Compartir a través de

Efectos de composición

Las API Microsoft.UI.Composition permiten aplicar efectos en tiempo real a imágenes e interfaz de usuario con propiedades de efecto animables. En esta introducción, le guiaremos por la funcionalidad que le permite aplicar efectos a un objeto visual de composición en aplicaciones winUI y Windows App SDK.

Para admitir la creación de efectos coherentes en aplicaciones winUI y Windows App SDK, los efectos de composición aprovechan la interfaz IGraphicsEffect de Win2D para que pueda describir los efectos mediante el espacio de nombres Microsoft.Graphics.Canvas.Effects .

Los efectos de pincel se usan para pintar áreas de una aplicación aplicando efectos a un conjunto de imágenes existentes. Las API de efecto de composición del SDK de aplicaciones de Windows se centran en SpriteVisuals. Un SpriteVisual proporciona flexibilidad al combinar la creación de colores, imágenes y efectos. El objeto visual define los límites del rectángulo y el pincel define los píxeles usados para pintarlo.

Los pinceles de efecto se utilizan en los elementos visuales del árbol de composición cuyo contenido proviene del resultado de un gráfico de efectos. Los efectos pueden hacer referencia a superficies o texturas existentes, pero no a la salida de otros árboles de composición.

Los efectos también se pueden aplicar a XAML UIElements mediante un pincel de efecto con XamlCompositionBrushBase.

Características de efecto

Biblioteca de efectos

Actualmente, la composición admite los siguientes efectos:

Efecto Descripción
Transformación afín 2D Aplica una matriz de transformación de afín 2D a una imagen.
Composición aritmética Combina dos imágenes mediante una ecuación flexible.
Efecto de mezcla Crea un efecto de mezcla que combina dos imágenes. Composition proporciona 21 de los 26 modos de mezcla admitidos en Win2D.
Origen de color Genera una imagen que contiene un color sólido.
Material compuesto Combina dos imágenes. Composition proporciona los 13 modos compuestos admitidos en Win2D.
Contraste Aumenta o disminuye el contraste de una imagen.
Exposición Aumenta o disminuye la exposición de una imagen.
Escala de grises Convierte una imagen en gris monocromático.
Transferencia gamma Modifica los colores de una imagen aplicando una función de transferencia gamma por canal.
Rotación de tono Modifica el color de una imagen girando sus valores de matiz.
Invertir Invierte los colores de una imagen.
Saturar Modifica la saturación de una imagen.
Sepia Convierte una imagen en tonos sepia.
Temperatura y tono Ajusta la temperatura o el tono de una imagen.

Consulte el espacio de nombres Microsoft.Graphics.Canvas.Effects de Win2D para obtener información más detallada. Los efectos no admitidos en la composición se indican como [NoComposition].

Efectos de encadenamiento

Los efectos se pueden encadenar, lo que permite a una aplicación usar simultáneamente varios efectos en una imagen. Los gráficos de efectos pueden admitir varios efectos que pueden hacer referencia a uno y otro. Al describir el efecto, basta con agregar un efecto como entrada al efecto.

IGraphicsEffect graphicsEffect =
new Microsoft.Graphics.Canvas.Effects.ArithmeticCompositeEffect
{
  Source1 = new CompositionEffectSourceParameter("source1"),
  Source2 = new SaturationEffect
  {
    Saturation = 0,
    Source = new CompositionEffectSourceParameter("source2")
  },
  MultiplyAmount = 0,
  Source1Amount = 0.5f,
  Source2Amount = 0.5f,
  Offset = 0
}

En el ejemplo anterior se describe un efecto compuesto aritmético que tiene dos entradas. La segunda entrada tiene un efecto de saturación con una propiedad de saturación de 0,5.

Compatibilidad con animaciones

Las propiedades de efecto admiten la animación. Durante la compilación de efectos, puedes especificar qué propiedades del efecto se pueden animar y cuáles pueden incorporarse como constantes. Las propiedades animables se especifican a través de cadenas de la forma "nombre de efecto.nombre de propiedad". Estas propiedades se pueden animar de forma independiente a través de varias instancias del efecto.

Propiedades constantes frente a efectos animados

Durante la compilación de efectos, puede especificar propiedades de efecto como dinámicas o como propiedades que se integran como constantes. Las propiedades dinámicas se especifican a través de cadenas del formato "<nombre> del efecto.<nombre de> propiedad". Las propiedades dinámicas se pueden establecer en un valor específico o se pueden animar mediante el sistema de animación de composición.

Al compilar la descripción del efecto anterior, tiene la flexibilidad de fijar la saturación en 0,5, hacerlo dinámico estableciéndolo de forma dinámica o animándolo.

Compilar un efecto con saturación integrada.

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Compilación de un efecto con saturación dinámica:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect, new[]{"SaturationEffect.Saturation"});
_catEffect = effectFactory.CreateBrush();
_catEffect.SetSourceParameter("mySource", surfaceBrush);
_catEffect.Properties.InsertScalar("saturationEffect.Saturation", 0f);

La propiedad de saturación del efecto mencionado anteriormente se puede fijar en un valor estático o animar mediante animaciones *Expression* o *ScalarKeyFrame*.

Puede crear un ScalarKeyFrame que se usará para animar la propiedad Saturación de un efecto de la siguiente manera:

ScalarKeyFrameAnimation effectAnimation = _compositor.CreateScalarKeyFrameAnimation();
            effectAnimation.InsertKeyFrame(0f, 0f);
            effectAnimation.InsertKeyFrame(0.50f, 1f);
            effectAnimation.InsertKeyFrame(1.0f, 0f);
            effectAnimation.Duration = TimeSpan.FromMilliseconds(2500);
            effectAnimation.IterationBehavior = AnimationIterationBehavior.Forever;

Inicie la animación en la propiedad Saturación del efecto de la siguiente manera:

catEffect.Properties.StartAnimation("saturationEffect.Saturation", effectAnimation);

Instancias de varios efectos con propiedades independientes

Al especificar que un parámetro debe ser dinámico durante la compilación de efectos, el parámetro se puede cambiar a partir de una instancia por efecto. Esto permite que dos objetos visuales usen el mismo efecto, pero se represente con propiedades de efecto diferentes.

Introducción a los efectos de composición

En este tutorial de inicio rápido se muestra cómo usar algunas de las funcionalidades básicas de los efectos.

Instalación de Visual Studio

  • Si no tiene instalada una versión compatible de Visual Studio, vaya a la página Descargas de Visual Studio aquí.

Creación de un nuevo proyecto

  • Vaya a Archivo>Nuevo>Proyecto.
  • Seleccione la plantilla Aplicación en blanco, Empaquetada (WinUI 3 en escritorio) o elija Aplicación en blanco, Sin empaquetar (WinUI 3 en escritorio) si coincide mejor con el modelo de aplicación.
  • Escriba un nombre de proyecto que elija.
  • Haga clic en Crear.

Instalación de Win2D

Win2D se publica como un paquete de NuGet.org y debe instalarse para poder usar estos efectos en un proyecto de WinUI.

  • Inicie el Administrador de paquetes NuGet y vaya a Herramientas>Administrador de paquetes NuGet>Administrar paquetes NuGet para la solución.
  • Busque Win2D.WinUI e instale ese paquete para el proyecto.
  • Acepta el acuerdo de licencia.
  • Haga clic en Cerrar.

En los pasos siguientes usaremos la API de composición para aplicar un efecto de saturación a esta imagen de gato que eliminará toda la saturación. En este modelo, se crea el efecto y, a continuación, se aplica a una imagen.

Imagen de origen

Establecimiento de los conceptos básicos de composición

_compositor = ElementCompositionPreview.GetElementVisual(MyHost).Compositor;
_root = _compositor.CreateContainerVisual();
ElementCompositionPreview.SetElementChildVisual(MyHost, _root);

Crear un pincel CompositionSurface

CompositionSurfaceBrush surfaceBrush = _compositor.CreateSurfaceBrush();
LoadedImageSurface imageSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/cat.png"));
surfaceBrush.Surface = imageSurface;

Crear, compilar y aplicar efectos

  1. Cree el efecto gráfico.

    var graphicsEffect = new SaturationEffect
{
    Saturation = 0.0f,
    Source = new CompositionEffectSourceParameter("mySource")
};

  2. Compilar el efecto y crear el pincel de efecto.

    var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

var catEffect = effectFactory.CreateBrush();
catEffect.SetSourceParameter("mySource", surfaceBrush);

  3. Cree un SpriteVisual en el árbol de composición y aplique el efecto.

    var catVisual = _compositor.CreateSpriteVisual();
catVisual.Brush = catEffect;
catVisual.Size = new Vector2(219, 300);
_root.Children.InsertAtBottom(catVisual);

  4. Ejecute la aplicación. El resultado debería ser un gato desaturado.

Imagen desaturada

Más Información

  • Last updated on