Efeitos de composição

Artigo
07/05/2024

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, examinaremos a funcionalidade disponível que permite que os efeitos sejam aplicados a um visual de composição.

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

Os efeitos de pincel são usados para pintar áreas de um aplicativo aplicando efeitos a um conjunto de imagens existentes. As APIs de efeito de composição do Windows 10 são focadas em Sprite Visuals. O SpriteVisual permite flexibilidade e interação na criação de cores, imagens e efeitos. O SpriteVisual é um tipo 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 pintar o retângulo.

Os pincéis de efeito são usados em visuais de árvore de composição cujo conteúdo vem da saída de um grafo de efeito. Os efeitos podem fazer referência a superfícies/texturas existentes, mas não à saída de 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 suporta os seguintes efeitos:

Efeito	Descrição
Transformação afim 2D	Aplica uma matriz de transformação afim 2D a uma imagem.
Composto aritmético	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 combinação com suporte no Win2D.
Fonte de cor	Gera uma imagem contendo uma cor sólida.
Composto	Combina duas imagens. A composição fornece todos os 13 modos compostos com suporte no Win2D.
Contraste	Aumenta ou diminui o contraste de uma imagem.
Exposure	Aumenta ou diminui a exposição de uma imagem.
Escala de cinza	Converte uma imagem em cinza monocromático.
Transferência 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 girando seus valores de matiz.
Inverter	Inverte as cores de uma imagem.
Saturar	Altera a saturação de uma imagem.
Sépia	Converte uma imagem em tons sépia.
Temperatura e tonalidade	Ajusta a temperatura e/ou tonalidade de uma imagem.

Consulte o namespace Microsoft.Graphics.Canvas.Effects do Win2D para obter informações mais detalhadas. Os efeitos não suportados na composição são indicados como [NoComposition].

Efeitos de encadeamento

Os efeitos podem ser encadeados, permitindo que um aplicativo use simultaneamente vários efeitos em uma imagem. Os gráficos de efeitos podem dar suporte a vários efeitos que podem se referir a um e outro. Ao descrever seu efeito, basta adicionar um efeito como entrada ao seu 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 composto aritmético que tem duas entradas. A segunda entrada tem um efeito de saturação com uma propriedade de saturação de .5.

Suporte à animação

As propriedades de efeito suportam animação, durante a compilação de efeitos, você pode especificar que as propriedades de efeito podem ser animadas e quais podem ser "incorporadas" como constantes. As propriedades animáveis são especificadas por meio de strings no formato "nome do efeito.nome da propriedade". Essas propriedades podem ser animadas independentemente em várias instanciações do efeito.

Propriedades de efeito constante vs animado

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

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

Compilando um efeito com saturação incorporada:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Compilando 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 animada usando animações Expression ou ScalarKeyFrame.

Você pode criar um ScalarKeyFrame que será usado para animar a propriedade Saturation de um efeito como este:

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);

Múltiplas 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 por instância de efeito. Isso permite que dois visuais usem o mesmo efeito, mas sejam renderizados com propriedades de efeito diferentes.

Introdução aos efeitos de composição

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

Instalar o Visual Studio

Se você não tiver uma versão com suporte do Visual Studio instalada, acesse a página Downloads do Visual Studio aqui.

Crie um novo projeto

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

Instalando o Win2D

O Win2D é lançado como um pacote Nuget.org e precisa ser instalado antes que você possa usar efeitos.

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

Inicie o Gerenciador de Pacotes NuGet acessando Ferramentas → Gerenciador de Pacotes NuGet → Gerenciar Pacotes NuGet para Solução.
Pesquise "Win2D" e selecione o pacote apropriado para sua versão de destino do Windows. Como Windows.UI. A composição dá suporte ao Windows 10 (não 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 essa imagem de gato que removerá toda a saturação. Neste modelo, o efeito é criado e aplicado a uma imagem.

Imagem de origem

Definindo seus fundamentos 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

Criar o efeito gráfico

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

Compile o efeito e crie o 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 para carregar.

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 seu aplicativo – seus resultados devem ser um gato dessaturado:

Imagem dessaturada

Compartilhar via