Efectos de composición

Artículo
03/18/2023

Las API Windows.UI.Composition permiten aplicar efectos en tiempo real a imágenes e interfaz de usuario con propiedades de efecto animables. En esta introducción, veremos las funciones disponibles que permiten aplicar efectos a una composición visual.

Para respaldar la coherencia de la Plataforma universal de Windows (UWP) para los desarrolladores que describen efectos en sus aplicaciones, los efectos de composición aprovechan la interfaz IGraphicsEffect de Win2D para usar las descripciones de efectos a través del espacio de nombre Microsoft.Graphics.Canvas.Effects.

Los efectos de pincel se usan para pintar áreas de una aplicación mediante efectos en un conjunto de imágenes existentes. Las API de efectos de composición de Windows 10 se centran en las clases SpriteVisual. La clase SpriteVisual permite la flexibilidad e interacción en cuanto a la creación de colores, imágenes y efectos. La clase SpriteVisual es un tipo visual de composición que puede rellenar un rectángulo 2D con un pincel. El objeto visual define los límites del rectángulo y el pincel define los píxeles usados para pintar el rectángulo.

Los pinceles de efecto se usan en objetos visuales de árbol de composición cuyo contenido procede de la salida de un gráfico de efecto. 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 los efectos

Biblioteca de efectos

La composición admite actualmente los siguientes efectos:

Efecto	Descripción
Transformación afín 2D	Aplica una matriz de transformación afín 2D a una imagen.
Compuesta aritmética	Combina dos imágenes mediante una ecuación flexible.
Efecto de fusión	Crea un efecto de fusión que combina dos imágenes. La composición proporciona 21 de los 26 modos de fusión que se admiten en Win2D.
Fuente de color	Genera una imagen con un color sólido.
Compuesto	Combina dos imágenes. La composición proporciona los 13 modos compuestos que se admiten en Win2D.
Compare	Aumenta o disminuye el contraste de una imagen.
Exposure	Aumenta o disminuye la exposición de una imagen.
Escala de grises	Convierte una imagen a gris monocromático.
Transferencia gama	Modifica los colores de una imagen mediante la aplicación de una función de transferencia gama por canal.
Giro de matiz	Modifica el color de una imagen mediante la rotación de sus valores de matiz.
Invertir	Invierte los colores de una imagen.
Saturar	Altera la saturación de una imagen.
Sepia	Convierte una imagen a tonos sepia.
Temperatura y tono	Ajusta la temperatura y/o el tono de una imagen.

Consulta 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].

Encadenamiento de efectos

Los efectos se pueden encadenar, lo que permite que una aplicación use simultáneamente varios efectos en una imagen. Los gráficos de efectos pueden admitir varios efectos que pueden hacerse referencia entre sí. Al describir el efecto, basta con agregar un efecto como entrada para el 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 0,5.

Compatibilidad con animaciones

Las propiedades de los efectos admiten la animación. Durante la compilación del efecto se pueden especificar las propiedades del efecto, que pueden animarse y se pueden incorporar como constantes. Las propiedades que se pueden animar se especifican a través de las cadenas con formato "nombre de efecto.nombre de propiedad". Estas propiedades pueden animarse de forma independiente en varias instancias del efecto.

Comparación entre las propiedades de efectos constantes y las animadas

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

Al compilar la descripción del efecto anterior, tienes la flexibilidad de preparar la saturación para que sea igual a 0,5 o hacerla dinámica y configurarla dinámicamente o animarla.

Compilación de un efecto con la saturación incorporada:

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 anterior puede establecerse en un valor estático o animado con las animaciones Expression o ScalarKeyFrame.

Puedes crear un ScalarKeyFrame que se usará para animar la propiedad de saturación de un efecto como este:

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;

Inicia la animación en la propiedad de saturación del efecto como este:

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

Varias instancias de efecto con propiedades independientes

Al especificar que un parámetro debe ser dinámico durante la compilación del efecto, el parámetro se puede cambiar para cada instancia del efecto. Esto permite que dos objetos visuales usen el mismo efecto, pero se representen con propiedades de efecto diferentes.

Introducción a los efectos de composición

Este tutorial de inicio rápido muestra cómo usar algunas de las funciones básicas de los efectos.

Instalar Visual Studio

Si no tienes una versión compatible de Visual Studio instalada, dirígete a la página de descargas de Visual Studio aquí.

Creación de un nuevo proyecto

Vaya a Archivo-Nuevo-Proyecto>>...
Selecciona "Visual C#".
Crea una "aplicación vacía (universal de Windows)" (Visual Studio 2015).
Escribe el nombre que quieras asignar al proyecto.
Haz clic en "Aceptar".

Instalación de Win2D

Win2D se suministra como un paquete Nuget.org y debe instalarse para poder usar los efectos.

Existen dos versiones del paquete, una para Windows 10 y otra para Windows 8.1. Para los efectos de composición se usará la versión de Windows 10.

Inicia el Administrador de paquetes de NuGet. Para ello, ve a Herramientas → Administrador de paquetes NuGet → Administrar paquetes NuGet para la solución.
Busca "Win2D" y selecciona el paquete adecuado para tu versión de Windows de destino. Dado que la API Windows.UI.Composition es compatible con Windows 10 (no 8.1), seleccione Win2D.uwp.
Acepta el acuerdo de licencia.
Haz clic en "Cerrar".

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

Imagen de origen

Configuración de los conceptos básicos de la composición

_compositor = new Compositor();
_root = _compositor.CreateContainerVisual();
_target = _compositor.CreateTargetForCurrentView();
_target.Root = _root;
_imageFactory = new CompositionImageFactory(_compositor)
Desaturate();

Creación de un pincel CompositionSurface

CompositionSurfaceBrush surfaceBrush = _compositor.CreateSurfaceBrush();
LoadImage(surfaceBrush);

Creación, compilación y aplicación de efectos

Creación del efecto de gráficos

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

Compilar el efecto y crear pincel de efecto

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

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

Crear un SpriteVisual en el árbol de composición y aplicar el efecto

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

Cree el origen de la imagen que se va a cargar.

CompositionImage imageSource = _imageFactory.CreateImageFromUri(new Uri("ms-appx:///Assets/cat.png"));
CompositionImageLoadResult result = await imageSource.CompleteLoadAsync();
if (result.Status == CompositionImageLoadStatus.Success)

Tamaño y pincel de la superficie en spriteVisual
```
brush.Surface = imageSource.Surface;
```
Ejecutar la aplicación: los resultados deben ser un gato desaturado:

Imagen sin saturación

Compartir a través de