Efectos de composiciónComposition effects

Las API de Windows. UI. Composition permiten aplicar efectos en tiempo real a las imágenes y la interfaz de usuario con propiedades de efecto que se pueden animar.The Windows.UI.Composition APIs allows real-time effects to be applied to images and UI with animatable effect properties. En esta introducción, veremos las funciones disponibles que permiten aplicar efectos a una composición visual.In this overview, we’ll run through the functionality available that allows effects to be applied to a composition 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.To support Universal Windows Platform (UWP) consistency for developers describing effects in their applications, composition effects leverage Win2D’s IGraphicsEffect interface to use effect descriptions via the Microsoft.Graphics.Canvas.Effects Namespace.

Los efectos de pincel se usan para pintar áreas de una aplicación mediante efectos en un conjunto de imágenes existentes.Brush effects are used to paint areas of an application by applying effects to a set of existing images. Las API de efectos de composición de Windows 10 se centran en las clases SpriteVisual.Windows 10 composition effect APIs are focused on Sprite Visuals. La clase SpriteVisual permite la flexibilidad e interacción en cuanto a la creación de colores, imágenes y efectos.The SpriteVisual allows for flexibility and interplay in color, image and effect creation. La clase SpriteVisual es un tipo visual de composición que puede rellenar un rectángulo 2D con un pincel.The SpriteVisual is a composition visual type that can fill a 2D rectangle with a brush. El objeto visual define los límites del rectángulo y el pincel define los píxeles usados para pintar el rectángulo.The visual defines the bounds of the rectangle and the brush defines the pixels used to paint the rectangle.

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.Effect brushes are used on composition tree visuals whose content comes from the output of an effect graph. Los efectos pueden hacer referencia a superficies o texturas existentes, pero no a la salida de otros árboles de composición.Effects can reference existing surfaces/textures, but not the output of other composition trees.

También se pueden aplicar efectos a UIElements XAML con un pincel de efecto con XamlCompositionBrushBase.Effects can also be applied to XAML UIElements using an effect brush with XamlCompositionBrushBase.

Características de los efectosEffect Features

Biblioteca de efectosEffect Library

La composición admite actualmente los siguientes efectos:Currently composition supports the following effects:

EfectoEffect DescripciónDescription
Transformación afín 2D2D affine transform Aplica una matriz de transformación afín 2D a una imagen.Applies a 2D affine transform matrix to an image. Este efecto se usa para animar la máscara alfa en las [muestras](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects) de efectos.We used this effect to animate alpha mask in our effect [samples](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects).
Compuesta aritméticaArithmetic composite Combina dos imágenes mediante una ecuación flexible.Combines two images using a flexible equation. La compuesta aritmética se usa para crear un efecto de encadenado en las [muestras](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects).We used arithmetic composite to create a crossfade effect in our [samples](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects).
Efecto de fusiónBlend effect Crea un efecto de fusión que combina dos imágenes.Creates a blend effect that combines two images. La composición proporciona 21 de los 26 modos de fusión que se admiten en Win2D.Composition provides 21 of the 26 blend modes supported in Win2D.
Fuente de colorColor source Genera una imagen con un color sólido.Generates an image containing a solid color.
CompuestoComposite Combina dos imágenes.Combines two images. La composición proporciona los 13 modos compuestos que se admiten en Win2D.Composition provides all 13 composite modes supported in Win2D.
CompareContrast Aumenta o disminuye el contraste de una imagen.Increases or decreases the contrast of an image.
ExposureExposure Aumenta o disminuye la exposición de una imagen.Increases or decreases the exposure of an image.
Escala de grisesGrayscale Convierte una imagen a gris monocromático.Converts an image to monochromatic gray.
Transferencia gamaGamma transfer Modifica los colores de una imagen mediante la aplicación de una función de transferencia gama por canal.Alters the colors of an image by applying a per-channel gamma transfer function.
Giro de matizHue rotate Modifica el color de una imagen mediante la rotación de sus valores de matiz.Alters the color of an image by rotating its hue values.
InvertirInvert Invierte los colores de una imagen.Inverts the colors of an image.
SaturarSaturate Altera la saturación de una imagen.Alters the saturation of an image.
SepiaSepia Convierte una imagen a tonos sepia.Converts an image to sepia tones.
Temperatura y tonoTemperature and tint Ajusta la temperatura y/o el tono de una imagen.Adjusts the temperature and/or tint of an image.

Consulta el espacio de nombres Microsoft.Graphics.Canvas.Effects de Win2D para obtener información más detallada.See Win2D’s Microsoft.Graphics.Canvas.Effects Namespace for more detailed information. Los efectos no admitidos en la composición se indican como [ Composition ] .Effects not supported in composition are noted as [NoComposition].

Encadenamiento de efectosChaining Effects

Los efectos se pueden encadenar, lo que permite que una aplicación use simultáneamente varios efectos en una imagen.Effects can be chained, allowing an application to simultaneously use multiple effects on an image. Los gráficos de efectos pueden admitir varios efectos que pueden hacerse referencia entre sí.Effect graphs can support multiple effects that can refer to one and other. Al describir el efecto, basta con agregar un efecto como entrada para el efecto.When describing your effect, simply add an effect as input to your effect.

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.The example above describes an arithmetic composite effect which has two inputs. La segunda entrada tiene un efecto de saturación con una propiedad de saturación 0,5.The second input has a saturation effect with a .5 saturation property.

Compatibilidad con animacionesAnimation Support

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.Effect properties support animation, during effect compilation you can specify effect properties can be animated and which can be "baked in" as constants. Las propiedades que se pueden animar se especifican a través de las cadenas con formato "nombre de efecto.nombre de propiedad".The animatable properties are specified through strings of the form “effect name.property name”. Estas propiedades pueden animarse de forma independiente en varias instancias del efecto.These properties can be animated independently over multiple instantiations of the effect.

Comparación entre las propiedades de efectos constantes y las animadasConstant vs Animated Effect Properties

Durante la compilación de efectos, puedes especificar las propiedades de efectos como dinámicas o como propiedades que se "incorporan" como constantes.During effect compilation you can specify effect properties as dynamic or as properties that are "baked in" as constants. Las propiedades dinámicas se especifican a través de las cadenas del formulario ".".The dynamic properties are specified through strings of the form “.”. 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.The dynamic properties can be set to a specific value or can be animated using the composition animation system.

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.When compiling the effect description above, you have the flexibility of either baking in saturation to be equal to 0.5 or making it dynamic and setting it dynamically or animating it.

Compilación de un efecto con la saturación incorporada:Compiling an effect with saturation baked in:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Compilación de un efecto con saturación dinámica:Compiling an effect with dynamic saturation:

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.The saturation property of the effect above can then be either set to a static value or animated using either Expression or ScalarKeyFrame animations.

Puedes crear un ScalarKeyFrame que se usará para animar la propiedad de saturación de un efecto como este:You can create a ScalarKeyFrame that will be used to animate the Saturation property of an effect like this:

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:Start the animation on the Saturation property of the effect like this:

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

Consulta la [Muestra Desaturación - Animación](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/Desaturation - Animation) para las propiedades de efectos animados con fotogramas clave y la [muestra AlphaMask](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/AlphaMask) para el uso de efectos y expresiones.See the [Desaturation - Animation sample](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/Desaturation - Animation) for effect properties animated with key frames and the [AlphaMask sample](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/AlphaMask) for use of effects and expressions.

Varias instancias de efecto con propiedades independientesMultiple Effect Instances with Independent Properties

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.By specifying that a parameter should be dynamic during effect compilation, the parameter can then be changed on a per-effect instance basis. Esto permite que dos objetos visuales usen el mismo efecto, pero se representen con propiedades de efecto diferentes.This allows two Visuals to use the same effect but be rendered with different effect properties. Consulta la [muestra](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/ColorSource and Blend) ColorSource and Blend para obtener más información.See the ColorSource and Blend [sample](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/ColorSource and Blend) for more information.

Introducción a los efectos de composiciónGetting Started with Composition Effects

Este tutorial de inicio rápido muestra cómo usar algunas de las funciones básicas de los efectos.This quick start tutorial shows you how to make use of some of the basic capabilities of effects.

Instalar Visual StudioInstalling 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í.If you don't have a supported version of Visual Studio installed, go to the Visual Studio Downloads page here.

Creación de un nuevo proyectoCreating a new project

  • Ve a Archivo -> Nuevo -> Proyecto...Go to File->New->Project...
  • Selecciona "Visual C#".Select 'Visual C#'
  • Crea una "aplicación vacía (universal de Windows)" (Visual Studio 2015).Create a 'Blank App (Windows Universal)' (Visual Studio 2015)
  • Escribe el nombre que quieras asignar al proyecto.Enter a project name of your choosing
  • Haz clic en "Aceptar".Click 'OK'

Instalación de Win2DInstalling Win2D

Win2D se suministra como un paquete Nuget.org y debe instalarse para poder usar los efectos.Win2D is released as a Nuget.org package and needs to be installed before you can use effects.

Existen dos versiones del paquete, una para Windows 10 y otra para Windows 8.1.There are two package versions, one for Windows 10 and one for Windows 8.1. Para los efectos de composición se usará la versión de Windows 10.For Composition effects you’ll use the Windows 10 version.

  • Inicia el Administrador de paquetes de NuGet. Para ello, ve a Herramientas → Administrador de paquetes NuGet → Administrar paquetes NuGet para la solución.Launch the NuGet Package Manager by going to Tools → NuGet Package Manager → Manage NuGet Packages for Solution.
  • Busca "Win2D" y selecciona el paquete adecuado para tu versión de Windows de destino.Search for "Win2D" and select the appropriate package for your target version of Windows. Dado que la API Windows.UI.CompositionBecause Windows.UI. es compatible con Windows 10 (no 8.1), seleccione Win2D.uwp.Composition supports Windows 10 (not 8.1), select Win2D.uwp.
  • Acepta el acuerdo de licencia.Accept the license agreement
  • Haz clic en "Cerrar".Click 'Close'

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.In the next few steps we will use composition API’s to apply a saturation effect to this cat image which will remove all saturation. En este modelo, se crea el efecto y luego se aplica a una imagen.In this model the effect is created and then applied to an image.

Imagen de origen

Configuración de los conceptos básicos de la composiciónSetting your Composition Basics

Consulta la [muestra del árbol de objetos visuales de composición](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/CompositionImageSample) en GitHub para ver un ejemplo de cómo configurar el compositor Windows.UI.Composition, del elemento raíz ContainerVisual y de cómo asociarlo a la ventana principal.See the [Composition Visual Tree Sample](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/CompositionImageSample) on our GitHub for an example of how to set up Windows.UI.Composition Compositor, root ContainerVisual, and associate with the Core Window.

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

Creación de un pincel CompositionSurfaceCreating a CompositionSurface Brush

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

Creación, compilación y aplicación de efectosCreating, Compiling and Applying Effects

  1. Crear el efecto gráficosCreate the graphics effect

    var graphicsEffect = new SaturationEffect
    {
      Saturation = 0.0f,
      Source = new CompositionEffectSourceParameter("mySource")
    };
    
  2. Compilar el efecto y crear el pincel de efectoCompile the effect and create effect brush

    var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);
    
    var catEffect = effectFactory.CreateBrush();
    catEffect.SetSourceParameter("mySource", surfaceBrush);
    
  3. Crear un SpriteVisual en el árbol de composición y aplicar el efectoCreate a SpriteVisual in the composition tree and apply the effect

    var catVisual = _compositor.CreateSpriteVisual();
      catVisual.Brush = catEffect;
      catVisual.Size = new Vector2(219, 300);
      _root.Children.InsertAtBottom(catVisual);
    }
    
  4. Cree el origen de la imagen para cargarlo.Create your image source to load.

    CompositionImage imageSource = _imageFactory.CreateImageFromUri(new Uri("ms-appx:///Assets/cat.png"));
    CompositionImageLoadResult result = await imageSource.CompleteLoadAsync();
    if (result.Status == CompositionImageLoadStatus.Success)
    
  5. Tamaño y pincel en la superficie del SpriteVisualSize and brush the surface on the SpriteVisual

    brush.Surface = imageSource.Surface;
    
  6. Ejecutar la aplicación: los resultados deben ser un gato dessaturado:Run your app – your results should be a desaturated cat:

Imagen sin saturación

Más informaciónMore Information