Efeitos de composição

Artigo
03/18/2023

As APIs Windows.UI.Composition permitem que efeitos em tempo real sejam aplicados a imagens e interface do usuário com propriedades de efeito animáveis. Nesta visão geral, vamos realizar a execução por meio de funcionalidade disponível que permite adicionar efeitos a serem aplicados a uma composição visual.

Para dar suporte a consistência da Plataforma Universal do Windows (UWP) para desenvolvedores descrevendo efeitos em seus aplicativos, os efeitos de composição aproveitam a interface IGraphicsEffect do Win2D para usar as descrições do efeito via Namespace Microsoft.Graphics.Canvas.Effects Namespace.

Efeitos de pincel são usados para pintar áreas de um aplicativo pela aplicação de efeitos a um conjunto de imagens existentes. As APIs de efeito de composição do Windows 10 APIs estão concentradas em sprites visuais. O SpriteVisual oferece excelente flexibilidade e relacionamento na criação de cores, imagens e efeitos. O SpriteVisual é um tipo de visual de composição que pode preencher um retângulo 2D com um pincel. O visual define os limites do retângulo e o pincel define os pixels usados para desenhar o retângulo.

Os pincéis de efeito são usados em elementos visuais de árvore de composição cujo conteúdo vem da saída de um gráfico de efeito. Os efeitos podem fazer referência a superfícies/texturas existentes, mas não à saída das outras árvores de composição.

Os efeitos também podem ser aplicados a UIElements XAML usando um pincel de efeito com XamlCompositionBrushBase.

Recursos de efeito

Biblioteca de efeitos

Atualmente, a composição é compatível com os efeitos a seguir:

Efeito	Descrição
Transformação afim 2D	Aplica uma matriz de transformação afim 2D a uma imagem.
Composição aritmética	Combina duas imagens usando uma equação flexível.
Efeito de mesclagem	Cria um efeito de mesclagem que combina duas imagens. A composição fornece 21 dos 26 modos de mesclagem com suporte no Win2D.
Fonte de cor	Gera uma imagem que contém uma cor sólida.
Composição	Combina duas imagens. A composição fornece todos os 13 modos compostos com suporte no Win2D.
Contraste	Aumenta ou reduz o contraste de uma imagem.
Exposição	Aumenta ou reduz a exposição de uma imagem.
Escala de cinza	Converte uma imagem em cinza monocromático.
Transferência de gama	Altera as cores de uma imagem aplicando uma função de transferência de gama por canal.
Matiz girar	Altera a cor de uma imagem ao girar seus valores de matiz.
Invert	Inverte as cores de uma imagem.
Saturar	Altera a saturação de uma imagem.
Sépia	Converte uma imagem em tons de sépia.
Temperatura e tonalidade	Ajusta a temperatura e/ou a tonalidade de uma imagem.

Consulte o Namespace Microsoft.Graphics.Canvas.Effects do Win2D para obter informações mais detalhadas. Efeitos sem suporte na composição são observados como [NoComposition].

Efeitos de encadeamento

Os efeitos podem ser encadeados, o que permite a um aplicativo usar simultaneamente vários efeitos em uma imagem. Os gráficos de efeito podem dar suporte a vários efeitos que podem fazer referência um aos outros. Ao descrever seu efeito, basta adicionar um efeito como entrada para o efeito.

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
}

O exemplo acima descreve um efeito de composição aritmética que tem duas entradas. A segunda entrada tem um efeito de saturação com uma propriedade de saturação de 0,5.

Suporte de animação

As propriedades de efeito fornecem suporte à animação. Durante a compilação de efeito, você pode especificar as propriedades de efeito que podem ser animadas e quais podem ser "incorporadas" como constantes. As propriedades animáveis são especificadas por meio de cadeias de caracteres do formato "effect name.property name". Essas propriedades podem ser animadas de forma independente ao longo de várias instâncias do efeito.

Propriedades de efeito constantes versus animadas

Durante a compilação de efeitos, você pode especificar as propriedades do efeito como dinâmicas ou como propriedades que são "incorporadas" como constantes. As propriedades dinâmicas são especificadas por meio de cadeias de caracteres do formulário "<nome> do efeito".< nome> da propriedade". As propriedades dinâmicas pode ser definidas com um valor específico ou podem ser animadas usando o sistema de animação de composição.

Ao compilar a descrição de efeito acima, você tem a flexibilidade de incorporar a saturação para que seja igual a 0,5 ou torná-la dinâmica e defini-la dinamicamente ou animá-la.

Compilar um efeito com saturação incorporada:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Compilar um efeito com saturação dinâmica:

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

A propriedade de saturação do efeito acima pode ser definida como um valor estático ou animado usando animações Expression ou ScalarKeyFrame.

Você pode criar um ScalarKeyFrame que será usado para animar a propriedade Saturation de um efeito da seguinte forma:

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;

Inicie a animação na propriedade Saturation do efeito da seguinte forma:

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

Várias instâncias de efeito com propriedades independentes

Ao especificar que um parâmetro deve ser dinâmico durante a compilação do efeito, o parâmetro pode ser alterado para cada instância do efeito. Isso permite que dois elementos visuais usem o mesmo efeito mas que sejam renderizados com propriedades de outro efeito.

Introdução aos efeitos de composição

Este tutorial de início rápido mostra como fazer uso de alguns dos recursos básicos de efeitos.

Instalando o Visual Studio

Se você não tiver uma versão compatível do Visual Studio instalado, vá até a página de Downloads do Visual Studio aqui.

Crie um novo projeto

Vá para Arquivo-Novo-Projeto>>...
Selecione 'Visual C#'
Crie um 'Aplicativo em Branco (Universal do Windows)' (Visual Studio 2015)
Digite um nome para o projeto de sua escolha
Clique em 'OK'

Instalando o Win2D

O Win2D é lançado como um pacote Nuget.org e deve ser instalado antes que você use os efeitos.

Há duas versões do pacote, uma para o Windows 10 e outra para o Windows 8.1. Para efeitos de composição, você usará a versão do Windows 10.

Inicie o Gerenciador de Pacotes NuGet em Ferramentas → Gerenciador de Pacotes NuGet → Gerenciar Pacotes NuGet para Solução.
Procure "Win2D" e selecione o pacote apropriado para a sua versão do Windows. Como Windows.UI. Composition dá suporte ao Windows 10 (mas não ao 8.1), selecione Win2D.uwp.
Aceite o contrato de licença
Clique em 'Fechar'

Nas próximas etapas usaremos APIs de composição para aplicar um efeito de saturação a esta imagem de gato que removerá toda a saturação. Nesse modelo, o efeito foi criado e aplicado a uma imagem.

Imagem de origem

Definindo o básico de composição

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

Criando um pincel CompositionSurface

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

Criando, compilando e aplicando efeitos

Crie um efeito gráfico

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

Compile o efeito e crie um pincel de efeito

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

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

Crie um SpriteVisual na árvore de composição e aplique o efeito

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

Crie sua fonte de imagem a ser carregada.

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

Dimensione e pincele a superfície no SpriteVisual
```
brush.Surface = imageSource.Surface;
```
Execute o aplicativo – seus resultados devem ser um gato sem saturação:

Imagem sem saturação