Efeitos de composição

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
• Efeitos de encadeamento
• Suporte de animação
• Propriedades de efeito constante vs. animado
• Múltiplas instâncias de efeito com propriedades independentes

Biblioteca de efeitos

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

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.

• Instalação do Visual Studio
• Criando um novo projeto
• Instalando o Win2D
• Definindo seus fundamentos de composição
• Criando um pincel CompositionSurface
• Criando, compilando e aplicando 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.

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

1. Criar o efeito gráfico

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

2. Compile o efeito e crie o pincel de efeito

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

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

4. 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)
   

5. Dimensione e pincele a superfície no SpriteVisual

   brush.Surface = imageSource.Surface;
   

6. Execute seu aplicativo – seus resultados devem ser um gato dessaturado:

Mais informações

• Microsoft – Composição GitHub
• Windows.UI.Composition
• Visão geral da composição
• Noções básicas de árvore visual
• Pincéis de composição
• XamlCompositionBrushBase
• Visão geral da animação
• Interoperação nativa de DirectX e Direct2D de composição com BeginDraw e EndDraw