Partilhar via

Efeitos de composição

As APIs Microsoft.UI.Composition permitem a aplicação de efeitos em tempo real a imagens e interfaces com propriedades de efeitos animáveis. Nesta visão geral, vamos explicar a funcionalidade que permite aplicar efeitos a um visual de composição nas aplicações WinUI e Windows App SDK.

Para suportar a autoria consistente de efeitos em aplicações WinUI e Windows App SDK, os efeitos de composição utilizam a interface IGraphicsEffect do Win2D, permitindo-lhe descrever efeitos utilizando o namespace Microsoft.Graphics.Canvas.Effects.

Os efeitos de pincel são usados para pintar áreas de uma aplicação, aplicando efeitos a um conjunto de imagens existentes. As APIs de efeitos de composição do SDK do Windows App estão focadas no SpriteVisuals. Um SpriteVisual dá-lhe flexibilidade ao combinar cor, imagem e criação de efeitos. O visual define os limites do retângulo, e o pincel define os pixels usados para o pintar.

Os pincéis de efeitos são usados em imagens de árvore de composição cujo conteúdo provém da saída de um gráfico de efeitos. Os efeitos podem referenciar superfícies/texturas existentes, mas não o output de outras árvores de composição.

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

Funcionalidades de Efeito

Biblioteca de Efeitos

Atualmente, a composição suporta os seguintes efeitos:

Efeito Descrição
Transformada 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 mistura Cria um efeito de mistura que combina duas imagens. Composition fornece 21 dos 26 modos de mistura suportados no Win2D.
Fonte de cor Gera uma imagem contendo uma cor sólida.
Composto Combina duas imagens. O Composition fornece todos os 13 modos compostos suportados no Win2D.
Contraste Aumenta ou diminui o contraste de uma imagem.
Exposição Aumenta ou diminui a exposição de uma imagem.
Tons de cinza Converte uma imagem para cinzento monocromático.
Transferência gama Altera as cores de uma imagem aplicando uma função de transferência gama por canal.
Rotação de matiz Altera a cor de uma imagem rodando os 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 o tom de uma imagem.

Consulte o namespace Microsoft.Graphics.Canvas.Effects do Win2D para 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 uma aplicação use simultaneamente múltiplos efeitos numa imagem. Os gráficos de efeitos podem suportar múltiplos efeitos que se referem a um ou outro. Ao descrever o 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 aritmético composto que tem duas entradas. A segunda entrada tem um efeito de saturação com uma propriedade de saturação de 0,5.

Suporte à Animação

As propriedades dos efeitos permitem animação. Durante a compilação de efeitos, podes especificar que as propriedades dos efeitos podem ser animadas e que podem ser "fixadas" como constantes. As propriedades animáveis são especificadas através de cadeias da forma "nome do efeito.nome da propriedade". Estas propriedades podem ser animadas independentemente através de múltiplas instâncias do efeito.

Propriedades do Efeito: Constante vs Animado

Durante a compilação de efeitos podes especificar propriedades de efeito como dinâmicas ou como propriedades que estão "incorporadas" como constantes. As propriedades dinâmicas são especificadas através de cadeias da forma "<nome> do efeito".<nome> da propriedade". As propriedades dinâmicas podem ser definidas para 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, tens a flexibilidade de incorporar a saturação e defini-la como 0,5 ou torná-la dinâmica, ajustando-a ou animando-a.

Compilar um efeito com saturação incorporada:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Compilação de 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 então ser definida para um valor estático ou animada usando animações Expression ou ScalarKeyFrame.

Pode criar um ScalarKeyFrame que será utilizado para animar a propriedade de Saturação de um efeito deste tipo.

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 de Saturação do efeito desta forma:

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

Instâncias de Múltiplos Efeitos com Propriedades Independentes

Ao especificar que um parâmetro deve ser dinâmico durante a compilação de efeitos, o parâmetro pode então ser alterado por instância de efeito. Isto 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-te como tirar partido de algumas das capacidades básicas dos efeitos.

Instalando o Visual Studio

  • Se não tiver uma versão suportada do Visual Studio instalada, vá à página de Downloads do Visual Studio aqui.

Criação de um novo projeto

  • Vá para Ficheiro>Novo>Projeto.
  • Selecione o modelo Aplicação em Branco, Empacotado (WinUI 3 no Ambiente de Trabalho), ou escolha Aplicação em Branco, Desempacotado (WinUI 3 no Ambiente de Trabalho) se isso corresponder melhor ao modelo da sua aplicação.
  • Introduza o nome do projeto à sua escolha.
  • Clique em Criar.

Instalação do Win2D

O Win2D é lançado como um pacote NuGet.org e precisa de ser instalado antes de poderes usar estes efeitos num projeto WinUI.

  • Inicie o Gestor de Pacotes NuGet indo ao menu Ferramentas>Gestor de Pacotes NuGet>Gerir pacotes NuGet para a solução.
  • Procure por Win2D.WinUI e instale esse pacote para o seu projeto.
  • Aceite o contrato de licença.
  • Clique em Fechar.

Nos próximos passos, vamos usar APIs de composição para aplicar um efeito de saturação a esta imagem cat, o que irá remover toda a saturação. Neste modelo, o efeito é criado e depois aplicado a uma imagem.

Imagem de origem

Definir os Fundamentos da Sua Composição

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

Criar um Pincel CompositionSurface

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

Criar, compilar e aplicar efeitos

  1. Cria o efeito gráfico.

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

  2. Compila o efeito e cria o pincel de efeito.

    var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

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

  3. Cria um SpriteVisual na árvore de composição e aplica o efeito.

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

  4. Execute seu aplicativo. Os seus resultados devem ser um gato dessaturado:

Imagem dessaturada

Mais informações

  • Last updated on