Compartilhar via

Animando elementos XAML com animações de composição

  • Artigo

Este artigo apresenta novas propriedades que permitem animar um UIElement XAML com o desempenho de animações de composição e a facilidade de definir propriedades XAML.

Antes do Windows 10, versão 1809, você tinha 2 opções para criar animações em seus aplicativos UWP:

O uso da camada visual fornece melhor desempenho do que o uso dos constructos XAML. Mas usar ElementCompositionPreview para obter o objeto Visual de composição subjacente do elemento e, em seguida, animar o Visual com animações de composição é mais complexo de usar.

A partir do Windows 10, versão 1809, você pode animar propriedades em um UIElement diretamente usando animações de composição sem a necessidade de obter o Visual de composição subjacente.

Observação

Para usar essas propriedades em UIElement, a versão de destino do projeto UWP deve ser 1809 ou posterior. Para obter mais informações sobre como configurar a versão do projeto, consulte Aplicativos adaptáveis de versão.

Exemplos

Galeria WinUI 2
Galeria WinUI

Se você tiver o aplicativo Galeria do WinUI 2 instalado, clique aqui para abrir o aplicativo e ver Interoperabilidade de animação em ação.

Novas propriedades de renderização substituem propriedades de renderização antigas

Esta tabela mostra as propriedades que você pode usar para modificar a renderização de um UIElement, que também pode ser animado com um CompositionAnimation.

Propriedade Type Descrição
Opacity Double O grau de opacidade do objeto
Tradução Vetor 3 Deslocar a posição X/Y/Z do elemento
Matriz de transformação Matriz4x4 A matriz de transformação a ser aplicada ao elemento
Escala Vetor 3 Dimensionar o elemento, centralizado no Ponto central
Rotação Float Gire o elemento em torno do RotationAxis e CenterPoint
Eixo de rotação Vetor 3 O eixo de rotação
Ponto central Vetor 3 O ponto central de escala e rotação

O valor da propriedade TransformMatrix é combinado com as propriedades Scale, Rotation e Translation na seguinte ordem: TransformMatrix, Scale, Rotation, Translation.

Essas propriedades não afetam o layout do elemento, portanto, modificá-las não causa uma nova passagem de Measure/Arrange .

Essas propriedades têm a mesma finalidade e comportamento que as propriedades com nomes semelhantes na classe Visual de composição (exceto para Translation, que não está em Visual).

Exemplo: Definindo a propriedade Escala

Este exemplo mostra como definir a propriedade Scale em um Button.

<Button Scale="2,2,1" Content="I am a large button" />

var button = new Button();
button.Content = "I am a large button";
button.Scale = new Vector3(2.0f,2.0f,1.0f);

Exclusividade mútua entre imóveis novos e antigos

Observação

A propriedade Opacity não impõe a exclusividade mútua descrita nesta seção. Você usa a mesma propriedade Opacity se usar XAML ou animações de composição.

As propriedades que podem ser animadas com um CompositionAnimation são substituições para várias propriedades UIElement existentes:

Ao definir (ou animar) qualquer uma das novas propriedades, você não pode usar as propriedades antigas. Por outro lado, se você definir (ou animar) qualquer uma das propriedades antigas, não poderá usar as novas propriedades.

Você também não poderá usar as novas propriedades se usar ElementCompositionPreview para obter e gerenciar o Visual por conta própria usando estes métodos:

Importante

A tentativa de misturar o uso dos dois conjuntos de propriedades fará com que a chamada à API falhe e produza uma mensagem de erro.

É possível alternar de um conjunto de propriedades limpando-as, embora, para simplificar, não seja recomendado. Se a propriedade for apoiada por um DependencyProperty (por exemplo, UIElement.Projection for apoiado por UIElement.ProjectionProperty), chame ClearValue para restaurá-la ao seu estado "não utilizado". Caso contrário (por exemplo, a propriedade Scale), defina a propriedade como seu valor padrão.

Animando propriedades UIElement com CompositionAnimation

Você pode animar as propriedades de renderização listadas na tabela com um CompositionAnimation. Essas propriedades também podem ser referenciadas por um ExpressionAnimation.

Use os métodos StartAnimation e StopAnimation em UIElement para animar as propriedades UIElement.

Exemplo: animando a propriedade Scale com um Vector3KeyFrameAnimation

Este exemplo mostra como animar a escala de um Button.

var compositor = Window.Current.Compositor;
var animation = compositor.CreateVector3KeyFrameAnimation();

animation.InsertKeyFrame(1.0f, new Vector3(2.0f,2.0f,1.0f));
animation.Duration = TimeSpan.FromSeconds(1);
animation.Target = "Scale";

button.StartAnimation(animation);

Exemplo: animando a propriedade Scale com um ExpressionAnimation

Uma página tem dois botões. O segundo botão é animado para ser duas vezes maior (via escala) que o primeiro botão.

<Button x:Name="sourceButton" Content="Source"/>
<Button x:Name="destinationButton" Content="Destination"/>

var compositor = Window.Current.Compositor;
var animation = compositor.CreateExpressionAnimation("sourceButton.Scale*2");
animation.SetExpressionReferenceParameter("sourceButton", sourceButton);
animation.Target = "Scale";
destinationButton.StartAnimation(animation);