Compartilhar via

Animações baseadas em relação

Este artigo fornece uma visão geral sucinta de como criar animações baseadas em relacionamentos usando Composition ExpressionAnimations.

Experiências baseadas em relação dinâmicas

Ao criar experiências de movimento em um aplicativo, há momentos em que o movimento não é baseado em tempo, mas sim dependente de uma propriedade em outro objeto. KeyFrameAnimations não são capazes de expressar esses tipos de experiências de movimento muito facilmente. Nessas instâncias específicas, o movimento não precisa mais ser discreto e predefinido. Em vez disso, o movimento pode se adaptar dinamicamente com base em sua relação com outras propriedades de objeto. Por exemplo, você pode animar a opacidade de um objeto com base em sua posição horizontal. Outros exemplos incluem experiências de movimento, como Cabeçalhos Autoadesíveis e Parallax.

Esses tipos de experiências de movimento permitem que você crie uma interface do usuário que se sinta mais conectada, em vez de se sentir singular e independente. Para o usuário, isso dá a impressão de uma experiência dinâmica de interface do usuário.

Círculo em órbita

Exibição de lista com paralaxe

Usando ExpressionAnimations

Para criar experiências de movimento baseadas em relações, utiliza-se o tipo ExpressionAnimation. ExpressionAnimations (ou Expressões para abreviar), são um novo tipo de animação que permite expressar uma relação matemática – uma relação que o sistema usa para calcular o valor de uma propriedade de animação a cada quadro. Dito de outra forma, expressões são simplesmente uma equação matemática que define o valor desejado de uma propriedade de animação por quadro. As expressões são um componente muito versátil que pode ser usado em uma ampla variedade de cenários, incluindo:

Ao trabalhar com ExpressionAnimations, há algumas coisas que vale a pena mencionar antecipadamente:

  • Never Ending – ao contrário de seu irmão KeyFrameAnimation, Expressions não tem uma duração finita. Como expressões são relações matemáticas, elas são animações que estão constantemente "em execução". Você terá a opção de interromper essas animações se quiser.
  • Executando, mas nem sempre avaliando – o desempenho é sempre uma preocupação com animações que estão constantemente em execução. No entanto, não é necessário se preocupar, o sistema é inteligente o suficiente para que a Expressão só seja reavaliada se qualquer uma de suas entradas ou parâmetros tiver sido alterado.
  • Resolvendo para o tipo de objeto certo – como expressões são relações matemáticas, é importante garantir que a equação que define a Expressão seja resolvida para o mesmo tipo da propriedade que está sendo direcionada pela animação. Por exemplo, se animar Deslocamento, sua Expressão deverá ser resolvida para um tipo Vector3.

Componentes de uma expressão

Ao criar a relação matemática de uma Expressão, há vários componentes principais:

  • Parâmetros – valores que representam constantes ou referências a outros objetos de Composição.
  • Operadores matemáticos – os operadores matemáticos típicos plus(+), minus(-), multiply(*), divide(/) que unem parâmetros para formar uma equação. Também estão incluídos operadores condicionais, como maior que(>), equal(==), operador ternário (condição ? ifTrue : ifFalse), etc.
  • Funções matemáticas – funções matemáticas/atalhos com base em System.Numerics. Para obter uma lista completa de funções com suporte, consulte ExpressionAnimation.

As expressões também dão suporte a um conjunto de palavras-chave – frases especiais que têm significado distinto somente dentro do sistema ExpressionAnimation. Eles são listados (juntamente com a lista completa de funções matemáticas) na ExpressionAnimation documentação.

Criando expressões com ExpressionBuilder

Há duas opções para criar expressões em seu aplicativo WinUI:

  1. Crie a equação como uma cadeia de caracteres por meio da API pública oficial.
  2. Crie a equação em um modelo de objeto com segurança de tipo por meio da ferramenta ExpressionBuilder incluída no Kit de Ferramentas da Comunidade do Windows.

Por causa deste documento, definiremos nossas expressões usando ExpressionBuilder.

Parâmetros

Os parâmetros compõem o núcleo de uma expressão. Há dois tipos de parâmetros:

  • Constantes: esses são parâmetros que representam variáveis do System.Numeric tipadas. Esses parâmetros recebem seus valores atribuídos uma vez quando a animação é iniciada.
  • Referências: estes são parâmetros que representam referências a CompositionObjects – esses parâmetros obtêm continuamente seus valores atualizados depois que uma animação é iniciada.

Em geral, as referências são o principal aspecto de como a saída de uma expressão pode mudar dinamicamente. À medida que essas referências mudam, a saída da Expressão é alterada como resultado. Se você criar sua expressão com cadeias de caracteres ou usá-las em um cenário de modelagem (usando sua expressão para direcionar vários CompositionObjects), você precisará nomear e definir os valores de seus parâmetros. Consulte a seção Exemplo para obter mais informações.

Trabalhando com KeyFrameAnimations

Expressões também podem ser usadas com KeyFrameAnimations. Nesses casos, você deseja usar uma Expressão para definir o valor de um KeyFrame em um ponto de tempo – esses tipos KeyFrames são chamados expressionKeyFrames.

KeyFrameAnimation.InsertExpressionKeyFrame(Single, String)
KeyFrameAnimation.InsertExpressionKeyFrame(Single, ExpressionNode)

No entanto, ao contrário de ExpressionAnimations, ExpressionKeyFrames são avaliados apenas uma vez quando o KeyFrameAnimation é iniciado. Tenha em mente que você não passa um ExpressionAnimation como o valor do KeyFrame, mas sim uma cadeia de caracteres (ou um ExpressionNode, se você estiver usando ExpressionBuilder).

Exemplo

Agora vamos explorar um exemplo de uso de Expressões, especificamente o exemplo PropertySet da Galeria de Exemplos UI do Windows. Examinaremos a expressão que gerencia o comportamento de movimento de órbita da bola azul.

Círculo em órbita

Há três componentes em jogo para a experiência total:

  1. Um KeyFrameAnimation, animando o deslocamento Y da bola vermelha.
  2. Um PropertySet com uma propriedade Rotation que auxilia no controle da órbita, animada por outra KeyFrameAnimation.
  3. Uma ExpressionAnimation que controla o Offset da bola azul, referenciando o Offset da bola vermelha e a propriedade Rotation para manter uma órbita perfeita.

Vamos nos concentrar no ExpressionAnimation definido em #3. Também usaremos as classes ExpressionBuilder para construir essa Expressão. Uma cópia do código usado para criar essa experiência por meio de Cadeias de Caracteres é listada no final.

Nesta equação, há duas propriedades que você precisa referenciar do PropertySet; um é um deslocamento de ponto central e o outro é a rotação.

var propSetCenterPoint =
_propertySet.GetReference().GetVector3Property("CenterPointOffset");

// This rotation value will animate via KFA from 0 -> 360 degrees
var propSetRotation = _propertySet.GetReference().GetScalarProperty("Rotation");

Em seguida, você precisa definir o componente Vector3 que é responsável pela rotação em órbita real.

var orbitRotation = EF.Vector3(
    EF.Cos(EF.ToRadians(propSetRotation)) * 150,
    EF.Sin(EF.ToRadians(propSetRotation)) * 75, 0);

Observação

EF é uma notação abreviada de "using" para definir ExpressionFunctions da biblioteca de construção de expressões WinUI.

Por fim, combine esses componentes e referencie a posição da Bola Vermelha para definir a relação matemática.

var orbitExpression = redSprite.GetReference().Offset + propSetCenterPoint + orbitRotation;
blueSprite.StartAnimation("Offset", orbitExpression);

Em uma situação hipotética, e se você quisesse usar essa mesma expressão, mas com dois outros visuais, ou seja, dois conjuntos de círculos em órbita. Com CompositionAnimations, você pode reutilizar a animação e direcionar vários CompositionObjects. A única coisa que você precisa alterar ao usar esta Expressão para o caso de órbita adicional é a referência ao Visual. Chamamos isso de template.

Nesse caso, você modificará a expressão criada anteriormente. Em vez de "obter" uma referência ao CompositionObject, crie uma referência com um nome e atribua valores diferentes:

var orbitExpression = ExpressionValues.Reference.CreateVisualReference("orbitRoundVisual");
orbitExpression.SetReferenceParameter("orbitRoundVisual", redSprite);
blueSprite.StartAnimation("Offset", orbitExpression);
// Later on … use same Expression to assign to another orbiting Visual
orbitExpression.SetReferenceParameter("orbitRoundVisual", yellowSprite);
greenSprite.StartAnimation("Offset", orbitExpression);

Aqui está o código se você definiu sua Expressão com Cadeias de Caracteres por meio da API pública.

ExpressionAnimation expressionAnimation = compositor.CreateExpressionAnimation("visual.Offset + " +
    "propertySet.CenterPointOffset + " +
    "Vector3(cos(ToRadians(propertySet.Rotation)) * 150," + "sin(ToRadians(propertySet.Rotation)) * 75, 0)");
    
var propSetCenterPoint = _propertySet.GetReference().GetVector3Property("CenterPointOffset");
var propSetRotation = _propertySet.GetReference().GetScalarProperty("Rotation");
expressionAnimation.SetReferenceParameter("propertySet", _propertySet);
expressionAnimation.SetReferenceParameter("visual", redSprite);
  • Last updated on