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

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

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

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

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

Эффекты также можно применять к XAML UIElements с помощью кисти для эффекта с XamlCompositionBrushBase.

Функции эффектов

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

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

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

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

Дополнительные сведения см. в пространстве имен 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), которая будет использоваться для анимации свойства насыщенности эффекта следующим образом:

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;

Запустите анимацию свойства насыщенности эффекта следующим образом:

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

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

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

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

В этом кратком руководстве показано, как использовать некоторые основные возможности эффектов.

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

Установка Visual Studio

• Если у вас нет поддерживаемой версии Visual Studio, перейдите на страницу "Скачивание Visual Studio".

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

• Перейдите к файлу>нового>проекта.
• Выберите шаблон Пустое приложение WinUI (в упакованном виде).
• Введите название проекта по вашему выбору.
• Нажмите кнопку Создать.

Установка Win2D

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

• Запустите диспетчер пакетов NuGet, открыв > и затем Диспетчер пакетов NuGet, далее выберите >.
• Найдите Win2D.WinUI и установите этот пакет для проекта.
• Примите лицензионное соглашение.
• Нажмите кнопку Закрыть.

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

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

_compositor = ElementCompositionPreview.GetElementVisual(MyHost).Compositor;
_root = _compositor.CreateContainerVisual();
ElementCompositionPreview.SetElementChildVisual(MyHost, _root);

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

CompositionSurfaceBrush surfaceBrush = _compositor.CreateSurfaceBrush();
LoadedImageSurface imageSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/cat.png"));
surfaceBrush.Surface = imageSurface;

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

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. Запустите приложение. Результаты должны быть денасыщенными котами:

Дополнительная информация

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