Animações baseadas no tempo para

Quando um componente ou uma experiência de utilizador inteira muda, os utilizadores finais frequentemente observam-no de duas formas: ao longo do tempo ou instantaneamente. Na plataforma Windows, o primeiro é preferido em detrimento do segundo – experiências de utilizador que mudam instantaneamente muitas vezes confundem e surpreendem os utilizadores finais porque não conseguem acompanhar o que aconteceu. O utilizador final percebe então a experiência como brusca e antinatural.

Em vez disso, pode alterar a sua interface ao longo do tempo para guiar o utilizador final ou notificá-lo sobre alterações na experiência. Na plataforma Windows, isto é feito usando animações baseadas no tempo, também conhecidas como KeyFrameAnimations. O KeyFrameAnimations permite-lhe alterar uma interface ao longo do tempo e controlar cada aspeto da animação, incluindo como e quando começa, e como chega ao seu estado final. Por exemplo, animar um objeto para uma nova posição durante 300 milissegundos é mais agradável do que "teletransportá-lo" instantaneamente para lá. Ao usar animações em vez de mudanças instantâneas, o resultado final é uma experiência mais agradável e apelativa.

Tipos de animações baseadas no tempo

Existem duas categorias de animações baseadas no tempo que pode usar para criar experiências de utilizador bonitas no Windows:

Animações Explícitas – como o nome indica, inicia explicitamente a animação para fazer atualizações. Animações Implícitas – estas animações são iniciadas pelo sistema em seu nome quando uma condição é cumprida.

Neste artigo, vamos discutir como criar e usar animações explícitas baseadas no tempo com o KeyFrameAnimations.

Para animações explícitas e implícitas baseadas no tempo, existem diferentes tipos, correspondendo aos diferentes tipos de propriedades dos CompositionObjects que pode animar.

• ColorKeyFrameAnimation
• QuaternionKeyFrameAnimation
• AnimaçãoEscalarKeyFrame
• Vector2KeyFrameAnimation
• Vector3KeyFrameAnimation
• Vector4KeyFrameAnimation

Criar animações baseadas no tempo com KeyFrameAnimations

Antes de descrever como criar animações explícitas baseadas no tempo com o KeyFrameAnimations, vamos rever alguns conceitos.

• KeyFrames – Estes são os "instantâneos" individuais através dos quais uma animação irá ser animada.
  • Definido como pares chave e valor. A chave representa o progresso entre 0 e 1, ou seja, em que fase da vida útil da animação este "instantâneo" ocorre. O outro parâmetro representa o valor da propriedade neste momento.
• KeyFrameAnimation Properties – opções de personalização que pode aplicar para satisfazer as necessidades da interface.
  • DelayTime – tempo antes de uma animação começar após a chamada StartAnimation.
  • Duração – duração da animação.
  • IterationBehavior – contagem ou comportamento de repetição infinita para uma animação.
  • IterationCount – número finito de vezes que uma animação de KeyFrame se repete.
  • Contagem de KeyFrames – lê quantos KeyFrames há numa determinada Animação de KeyFrame.
  • StopBehavior – especifica o comportamento de um valor de propriedade de animação quando StopAnimation é chamado.
  • Direção – especifica qual direção a animação deve seguir para a reprodução.
• Grupo de Animação – iniciar várias animações ao mesmo tempo.
  • É frequentemente usado quando se quer animar várias propriedades ao mesmo tempo.

Para mais informações, consulte CompositionAnimationGroup.

Com estes conceitos em mente, vamos falar sobre a fórmula geral para construir um KeyFrameAnimation:

1. Identifique o CompositionObject e a respetiva propriedade que necessita animar.
2. Cria um modelo do tipo KeyFrameAnimation do compositor que corresponda ao tipo de propriedade que queres animar.
3. Usando o modelo de animação, comece a adicionar KeyFrames e a definir propriedades da animação.
   • É necessário pelo menos um KeyFrame (o keyframe de 100% ou 1f).
   • Recomenda-se também definir uma duração.
4. Quando estiveres pronto para executar esta animação, chama StartAnimation(...) no CompositionObject, direcionando a propriedade que queres animar. Mais especificamente:
   • visual.StartAnimation("targetProperty", CompositionAnimation animation);
   • visual.StartAnimationGroup(AnimationGroup animationGroup);
5. Se tiver uma animação em execução e quiser parar a Animação ou Grupo de Animação, pode usar estas APIs.
   • visual.StopAnimation("targetProperty");
   • visual.StopAnimationGroup(AnimationGroup AnimationGroup);

Vamos dar uma vista de olhos a um exemplo para ver esta fórmula em ação.

Exemplo

Neste exemplo, queres animar o deslocamento de um visual de <0,0,0> para <200,0,0> ao longo de 1 segundo. Além disso, quer ver o elemento visual animar-se entre estas posições 10 vezes.

Começas por identificar o CompositionObject e a propriedade que queres animar. Neste caso, o quadrado vermelho é representado por um componente visual de composição chamado redVisual. Começas a animação a partir deste objeto.

De seguida, porque queres animar a propriedade Offset, precisas de criar uma Vector3KeyFrameAnimation (Offset é do tipo Vector3). Também defines os KeyFrames correspondentes para a KeyFrameAnimation.

    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));

Depois defines as propriedades do KeyFrameAnimation para descrever a sua duração, juntamente com o comportamento de animar entre as duas posições (atual e <200,0,0)> 10 vezes.

    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Microsoft.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;

Finalmente, para executar uma animação, é necessário iniciá-la numa propriedade de um CompositionObject.

redVisual.StartAnimation("Offset", animation);

Aqui está o código completo.

private void AnimateSquare(Compositor compositor, SpriteVisual redVisual)
{ 
    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));
    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Microsoft.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;
    redVisual.StartAnimation("Offset", animation);
}