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

API Windows.UI.Composition позволяют применять эффекты в режиме реального времени к изображениям и пользовательскому интерфейсу, поддерживающему свойства анимации эффектов. В этом обзоре мы рассмотрим доступные функциональные возможности, позволяющие применять эффекты к визуальным элементам композиции.

Чтобы обеспечить совместимость с универсальной платформой Windows (UWP) для тех разработчиков, которые описывают эффекты в своих приложениях, эффекты композиции используют интерфейс IGraphicsEffect Win2D для описания эффектов с помощью пространства имен Microsoft.Graphics.Canvas.Effects.

Эффекты кисти используются для заливки областей приложения с помощью наложения эффектов на группу имеющихся изображений. API-интерфейсы эффектов композиции Windows 10 ориентированы на использование спрайтовых визуальных элементов. Объекты SpriteVisual обеспечивают гибкость и взаимодействие при создании цветов, изображений и эффектов. SpriteVisual — это тип визуальных элементов композиции, которые могут закрашивать двумерный прямоугольник с помощью кисти. Визуальный элемент определяет границы прямоугольника, а кисть определяет пиксели, используемые для его закрашивания.

Кисти эффектов используются с визуальными элементами дерева композиции, содержимое которых поступает от диаграммы эффекта. Эффекты могут ссылаться на имеющиеся поверхности или текстуры, но не данные, получаемые от других деревьев композиции.

Эффекты также можно применить к элементам пользовательского интерфейса XAML с помощью кисти эффекта с XamlCompositionBrushBase.

Функции эффекта

• Библиотека эффектов
• Создание цепочки эффектов
• Поддержка анимации
• Свойства констант и анимированных эффектов
• Несколько экземпляров эффектов с независимыми свойствами

Библиотека эффектов

В данный момент композиция поддерживает следующие эффекты.

Действие	Описание
Двумерное аффинное преобразование	Применяет двумерную матрицу афинного преобразования к изображению.
Арифметическое композитное	Объединяет два изображения с помощью легко приспосабливаемого уравнения.
Эффект смешивания	Создает эффект смешивания, который объединяет два изображения. Композиция позволяет использовать 21 из 26 режимов смешивания, поддерживаемых Win2D.
Источник цвета	Создает изображение, закрашенное сплошным цветом.
Составной	Объединяет два изображения. Композиция позволяет использовать все 13 режимов объединения, поддерживаемых Win2D.
Контраст	Увеличивает или уменьшает контрастность изображения.
Экспозиция	Увеличивает или уменьшает экспозицию изображения.
Оттенки серого	Преобразовывает изображение с использованием монохромных серых оттенков.
Гамма-передача	Изменяет цвета изображения, применяя к каждому каналу функцию гамма-передачи.
Поворот цветового круга	Изменяет цвет изображения, изменяя значения его оттенков на цветовом круге.
Invert	Инвертирует цвета изображения.
Изменение насыщенности	Изменяет насыщенность изображения.
Сепия	Преобразовывает изображение с использованием оттенков сепии.
Изменение температуры и оттенков	Изменяет температуру и (или) оттенки изображения.

Более подробные сведения см. в разделе, посвященном пространству имен Microsoft.Graphics.Canvas.Effects Win2D. Эффекты, не поддерживаемые в композиции, отмечаются как [NoComposition].

Создание цепочки эффектов

Эффекты можно объединять в цепочку, позволяя приложению применять к изображению сразу несколько эффектов. Диаграммы эффекта способны поддерживать несколько ссылающихся друг на друга эффектов. При описании эффекта просто добавьте его в качестве входного параметра.

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
}

В примере выше описан эффект арифметического композитного, который имеет два набора входных данных. Второй набор входных данных включает эффект насыщенности со свойством насыщенности 0,5.

Поддержка анимации

Свойства эффекта поддерживают анимацию. Во время компиляции эффекта можно указать, какие свойства эффекта будут анимированы, а какие — использованы в качестве постоянных. Анимируемые свойства можно указать с помощью строк формы (effect name.property name). Эти свойства можно анимировать независимо для нескольких экземпляров эффекта.

Постоянные и анимированные свойства эффекта

Во время компиляции эффекта можно указать динамические свойства эффекта и свойства, которые будут использованы в качестве постоянных. Динамические свойства задаются с помощью строк в формате "<имя> эффекта.< имя> свойства". Для динамических свойств можно задать конкретное значение, либо же их можно анимировать при помощи системы анимации композиции.

При компиляции эффекта, описанного выше, можно зафиксировать насыщенность, равную 0,5, или сделать ее динамической и устанавливать ее динамически или анимировать.

Компиляция эффекта с фиксированной насыщенностью:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Компиляция эффекта с динамической насыщенностью:

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

Для свойства насыщенности эффекта выше можно установить статическое значение, либо же его можно анимировать при помощи анимаций Expression или ScalarKeyFrame.

Вы можете создать анимацию ScalarKeyFrame, которая будет использоваться для анимации свойства Saturation эффекта, следующим образом:

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 эффекта следующим образом:

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

Несколько экземпляров эффектов с независимыми свойствами

Если во время компиляции указать, что параметр должен быть динамическим, его можно будет изменять для каждого экземпляра эффекта. Это позволит двум визуальным элементам использовать один и тот же эффект. При этом визуальные эффекты будут отрисовываться с использованием различных свойств эффекта.

Начало работы с эффектами композиции

В данном руководстве по быстрому началу работы приводится информация об использовании некоторых основных возможностей эффектов.

• установке Visual Studio
• Создание нового проекта
• Установка Win2D
• Настройка основных параметров композиции
• Создание кисти CompositionSurface
• Создание, компиляция и применение эффектов

Установка Visual Studio

• Если у вас еще не установлена поддерживаемая версия Visual Studio, перейдите на страницу загрузки.

Создание нового проекта

• Перейдите в раздел Файл-Создать-Проект>>...
• Выберите «Visual C#»
• Создайте пустое приложение (универсальное приложение Windows) (Visual Studio 2015)
• Введите выбранное название проекта
• Нажмите кнопку OК

Установка Win2D

Win2D выпускается в виде пакета Nuget.org. Прежде чем использовать эффекты, необходимо установить этот пакет.

Имеется две версии пакета: одна — для Windows 10, вторая — для Windows 8.1. Для эффектов композиции необходимо использовать версию для Windows 10.

• Запустите диспетчер пакетов NuGet, перейдя к разделу «Инструменты» → «Диспетчер пакетов NuGet» → «Управление пакетами NuGet для решения».
• Найдите Win2D и выберите подходящий пакет для своей целевой версии Windows. Поскольку Windows.UI. Composition поддерживает Windows 10 (но не Windows 8.1), выберите Win2D.uwp.
• Примите условия лицензионного соглашения
• Нажмите «Закрыть».

На следующих этапах нам потребуется использовать API-интерфейсы композиции, чтобы применить эффект и установить минимальное значение насыщенности для данного изображения с котом. В данном сценарии эффект сначала создается, а затем применяется к изображению.

Настройка основных параметров композиции

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

Создание кисти CompositionSurface

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

Создание, компиляция и применение эффектов

1. Создайте графический эффект.

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

2. Скомпилируйте эффект и создайте кисть эффекта.

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

3. Создайте объект SpriteVisual в дереве композиции и примените эффект.

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

4. Создайте источник изображения для загрузки.

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

5. Измените размер поверхности объекта SpriteVisual и примените к ней кисть.

   brush.Surface = imageSource.Surface;
   

6. Запустите приложение. В результате вы должны получить изображение с минимальным уровнем насыщенности.

Дополнительные сведения

• Страница Microsoft на веб-сайте GitHub, посвященная композиции
• Windows.UI.Composition
• Обзор композиции
• Основы визуального дерева
• Кисти композиции
• XamlCompositionBrushBase
• Общие сведения об эффектах анимации
• Собственное взаимодействие DirectX и Direct2D композиции с BeginDraw и EndDraw