合成效果Composition effects

Windows.UI.Composition API 允许将实时效果应用于图像和附带动画效果属性的 UI。The Windows.UI.Composition APIs allows real-time effects to be applied to images and UI with animatable effect properties. 在此概述中,我们将详细描述可用于允许效果应用于合成视觉对象的功能。In this overview, we’ll run through the functionality available that allows effects to be applied to a composition visual.

为了支持通用 Windows 平台 (UWP) 一致性以供开发人员在其应用程序中描述效果,合成效果利用 Win2D 的 IGraphicsEffect 接口通过 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.

画笔效果通过将效果应用于一组现有图像来绘制应用程序的区域。Brush effects are used to paint areas of an application by applying effects to a set of existing images. Windows 10 合成效果 API 专用于子画面视觉效果。Windows 10 composition effect APIs are focused on Sprite Visuals. 在创建颜色、图形和效果方面,SpriteVisual 具有灵活性和互动性。The SpriteVisual allows for flexibility and interplay in color, image and effect creation. SpriteVisual 是合成视觉对象类型,该效果可以使用画笔填充 2D 矩形。The SpriteVisual is a composition visual type that can fill a 2D rectangle with a brush. 该视觉效果定义矩形的边框,而画笔定义用于绘制矩形的像素。The visual defines the bounds of the rectangle and the brush defines the pixels used to paint the rectangle.

将会针对合成树视觉效果(其内容来自效果图的输出)使用效果画笔。Effect brushes are used on composition tree visuals whose content comes from the output of an effect graph. 效果可以引用现有图面/纹理,但不可以引用其他合成树的输出。Effects can reference existing surfaces/textures, but not the output of other composition trees.

效果还可以使用效果画笔 XamlCompositionBrushBase 应用于 XAML UIElement。Effects can also be applied to XAML UIElements using an effect brush with XamlCompositionBrushBase.

效果功能Effect Features

效果库Effect Library

目前,合成支持以下效果:Currently composition supports the following effects:

效果Effect 描述Description
2D 仿射变换2D affine transform 将 2D 仿射变换矩阵应用到图像。Applies a 2D affine transform matrix to an image. 我们使用此效果在我们的效果[示例](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects)中对 alpha 蒙板进行动画处理。We used this effect to animate alpha mask in our effect [samples](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects).
算术合成Arithmetic composite 使用灵活方程组合两张图像。Combines two images using a flexible equation. 我们使用算术合成在我们的[示例](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).
混合效果Blend effect 创建组合两张图像的混合效果。Creates a blend effect that combines two images. 合成提供 Win2D 中受支持的 21 种混合模式(共 26 种)。Composition provides 21 of the 26 blend modes supported in Win2D.
颜色源Color source 生成包含纯色的图像。Generates an image containing a solid color.
合成Composite 组合两张图像。Combines two images. 合成提供 Win2D 中受支持的全部 13 种合成模式Composition provides all 13 composite modes supported in Win2D.
与此示例Contrast 增加或降低图像的对比度。Increases or decreases the contrast of an image.
曝光Exposure 增加或降低图像的曝光。Increases or decreases the exposure of an image.
灰度Grayscale 将图像转换为单色灰度。Converts an image to monochromatic gray.
伽玛转换Gamma transfer 通过应用每个通道伽玛转换函数来更改图像的颜色。Alters the colors of an image by applying a per-channel gamma transfer function.
色调旋转Hue rotate 通过旋转图像的色调值来更改其颜色。Alters the color of an image by rotating its hue values.
InvertInvert 反转图像的颜色。Inverts the colors of an image.
饱和度Saturate 更改图像的饱和度。Alters the saturation of an image.
棕褐Sepia 将图像转换为棕褐色调。Converts an image to sepia tones.
温度和色调Temperature and tint 调整图像的温度和/或色调。Adjusts the temperature and/or tint of an image.

有关更多详细信息,请参阅 Win2D 的 Microsoft.Graphics.Canvas.Effects 命名空间。See Win2D’s Microsoft.Graphics.Canvas.Effects Namespace for more detailed information. 组合中不支持的效果以 NoComposition 的形式注明 [ ] 。Effects not supported in composition are noted as [NoComposition].

链接效果Chaining Effects

可以链接效果,以便允许应用程序针对某张图像同时使用多个效果。Effects can be chained, allowing an application to simultaneously use multiple effects on an image. 效果图支持可以引用一个和其他效果的多个效果。Effect graphs can support multiple effects that can refer to one and other. 当描述效果时,只需将效果作为输入添加到你的效果。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
}

上面示例说明了拥有两种输入的算术合成效果。The example above describes an arithmetic composite effect which has two inputs. 第二种输入具有附带 0.5 饱和度属性的效果。The second input has a saturation effect with a .5 saturation property.

动画支持Animation Support

效果属性支持动画,在效果编译期间,可以指定可进行动画处理并且可“烘焙”为常数的效果属性。Effect properties support animation, during effect compilation you can specify effect properties can be animated and which can be "baked in" as constants. 通过“effect name.property name”形式的字符串指定可进行动画处理的属性。The animatable properties are specified through strings of the form “effect name.property name”. 可以通过多个效果实例化独立地对这些属性进行动画处理。These properties can be animated independently over multiple instantiations of the effect.

常量与动画效果属性Constant vs Animated Effect Properties

在效果编译期间,可以将效果属性指定为动态或作为常量的“烘焙”属性。During effect compilation you can specify effect properties as dynamic or as properties that are "baked in" as constants. 动态属性通过“.”形式的字符串指定。The dynamic properties are specified through strings of the form “.”. 动态属性可设置为特定值或可使用合成动画系统进行动画处理。The dynamic properties can be set to a specific value or can be animated using the composition animation system.

当编译上面的效果描述时,你可以在饱和度等于 0.5 时灵活地进行烘焙或使其动态化,并进行动态设置或进行动画处理。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.

使用烘焙时采用的饱和度编译效果:Compiling an effect with saturation baked in:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

使用动态饱和度编译效果: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);

然后可通过 Expression 或 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.

你可以创建将用于对效果的“饱和度”属性进行动画处理的 ScalarKeyFrame,如下所示: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;

开始对效果的“饱和度”属性进行动画处理,如下所示:Start the animation on the Saturation property of the effect like this:

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

对于使用关键帧进行动画处理的效果属性,请参阅[去饱和度 - 动画示例](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/Desaturation - Animation);若要使用效果和表达式,请参阅 [AlphaMask 示例](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/AlphaMask)。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.

具有独立属性的多个效果实例Multiple Effect Instances with Independent Properties

效果编译期间,通过指定应为动态的参数,就可以根据每个效果实例更改该参数。By specifying that a parameter should be dynamic during effect compilation, the parameter can then be changed on a per-effect instance basis. 这允许两个视觉效果使用同一效果,但以不同的效果属性进行呈现。This allows two Visuals to use the same effect but be rendered with different effect properties. 有关详细信息,请参阅 ColorSource 和 Blend [示例](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/ColorSource and Blend)。See the ColorSource and Blend [sample](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/ColorSource and Blend) for more information.

合成效果入门Getting Started with Composition Effects

本快速入门教程向你介绍如何使用效果的一些基本功能。This quick start tutorial shows you how to make use of some of the basic capabilities of effects.

安装 Visual StudioInstalling Visual Studio

  • 如果尚未安装受支持版本的 Visual Studio,请转到此处的 Visual Studio 下载页。If you don't have a supported version of Visual Studio installed, go to the Visual Studio Downloads page here.

创建新项目Creating a new project

  • 转到“文件”->“新建”->“项目”...Go to File->New->Project...
  • 选择“Visual C#”Select 'Visual C#'
  • 创建“空白应用(Windows 通用)”(Visual Studio 2015)Create a 'Blank App (Windows Universal)' (Visual Studio 2015)
  • 输入你选择的项目名称Enter a project name of your choosing
  • 单击“确定”Click 'OK'

安装 Win2DInstalling Win2D

Win2D 发布为 Nuget.org 程序包,并且只有安装它之后才可以使用效果。Win2D is released as a Nuget.org package and needs to be installed before you can use effects.

有两个程序包版本,一个适用于 Windows 10,而另一个适用于 Windows 8.1。There are two package versions, one for Windows 10 and one for Windows 8.1. 对于合成效果,使用 Windows 10 版本。For Composition effects you’ll use the Windows 10 version.

  • 通过转到“工具”→“NuGet 程序包管理器”→“管理解决方案的 NuGet 程序包”来启动 NuGet 程序包管理器。Launch the NuGet Package Manager by going to Tools → NuGet Package Manager → Manage NuGet Packages for Solution.
  • 搜索“Win2D”,并选择适用于你的目标版本的 Windows 的程序包。Search for "Win2D" and select the appropriate package for your target version of Windows. 由于 Windows.UI。Because Windows.UI. 合成支持 Windows 10(不支持 8.1),请选择 Win2D.uwp。Composition supports Windows 10 (not 8.1), select Win2D.uwp.
  • 接受许可协议Accept the license agreement
  • 单击“关闭”Click 'Close'

在接下来的几个步骤中,我们将使用合成 API 来将饱和度效果应用到这张猫咪图像,这会删除所有饱和度。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. 在此模型中,创建该效果,然后将其应用到图像。In this model the effect is created and then applied to an image.

源图像

设置合成基本要素Setting your Composition Basics

有关如何设置 Windows.UI.Composition 合成器、对 ContainerVisual 进行根处理和与核心窗口相关联的示例,请参阅我们在 GitHub 上的[合成可视化树示例](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/CompositionImageSample)。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();

创建 CompositionSurface 画笔Creating a CompositionSurface Brush

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

创建、编译和应用效果Creating, Compiling and Applying Effects

  1. 创建图形效果Create the graphics effect

    var graphicsEffect = new SaturationEffect
    {
      Saturation = 0.0f,
      Source = new CompositionEffectSourceParameter("mySource")
    };
    
  2. 编译效果并创建效果画笔Compile the effect and create effect brush

    var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);
    
    var catEffect = effectFactory.CreateBrush();
    catEffect.SetSourceParameter("mySource", surfaceBrush);
    
  3. 在合成树中创建 SpriteVisual 并应用效果Create 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. 创建要加载的图像源。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. 调整 SpriteVisual 上的图面大小并涂刷Size and brush the surface on the SpriteVisual

    brush.Surface = imageSource.Surface;
    
  6. 运行你的应用:产生的效果应是一只去饱和的猫:Run your app – your results should be a desaturated cat:

去饱和图像

更多信息More Information