Эффекты композицииComposition effects

API Windows.UI.Composition позволяют применять эффекты в режиме реального времени к изображениям и пользовательскому интерфейсу, поддерживающему свойства анимации эффектов.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) для тех разработчиков, которые описывают эффекты в своих приложениях, эффекты композиции используют интерфейс IGraphicsEffect Win2D для описания эффектов с помощью пространства имен 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. API-интерфейсы эффектов композиции Windows 10 ориентированы на использование спрайтовых визуальных элементов.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 — это тип визуальных элементов композиции, которые могут закрашивать двумерный прямоугольник с помощью кисти.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.

Эффекты также можно применить к элементам пользовательского интерфейса XAML с помощью кисти эффекта с XamlCompositionBrushBase.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 affine transform Применяет двумерную матрицу афинного преобразования к изображению.Applies a 2D affine transform matrix to an image. Мы использовали этот эффект, чтобы анимировать альфа-маску в наших [примерах](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects) эффектов.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. Композиция позволяет использовать 21 из 26 режимов смешивания, поддерживаемых Win2D.Composition provides 21 of the 26 blend modes supported in Win2D.
Источник цветаColor source Создает изображение, закрашенное сплошным цветом.Generates an image containing a solid color.
СоставнойComposite Объединяет два изображения.Combines two images. Композиция позволяет использовать все 13 режимов объединения, поддерживаемых Win2D.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.

Более подробные сведения см. в разделе, посвященном пространству имен Microsoft.Graphics.Canvas.Effects Win2D.See Win2D’s Microsoft.Graphics.Canvas.Effects Namespace for more detailed information. Эффекты, не поддерживаемые в композиции, отмечены как " [ композиция" ] .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, которая будет использоваться для анимации свойства Saturation эффекта, следующим образом: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;

Запустите анимацию для свойства Saturation эффекта следующим образом: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), а сведения об использовании эффектов и выражений — в [примере альфа-маски](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. Для получения более подробных сведений см. [пример](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, перейдите на страницу загрузки.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
  • Нажмите кнопку OК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. Composition поддерживает Windows 10 (но не Windows 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

См. [пример визуального дерева композиции](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/CompositionImageSample) на нашей странице на GitHub. Этот пример показывает, как настроить конструктор Windows.UI.Composition и корневой элемент ContainerVisual и связать их с основным окном.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();

Создание кисти CompositionSurfaceCreating 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