Animações baseadas no tempo

Quando um componente ou toda a experiência do usuário muda, os usuários finais geralmente o observam de duas maneiras: ao longo do tempo ou instantaneamente. Na plataforma Windows, o primeiro é preferido sobre o segundo - experiências de usuário que mudam instantaneamente muitas vezes confundem e surpreendem os usuários finais porque eles não são capazes de acompanhar o que aconteceu. O usuário final então percebe a experiência como chocante e antinatural.

Em vez disso, você pode alterar sua interface do usuário ao longo do tempo para orientar o usuário final ou notificá-lo sobre alterações na experiência. Na plataforma Windows, isso é feito usando animações baseadas no tempo, também conhecidas como KeyFrameAnimations. KeyFrameAnimations permite alterar uma interface do usuário ao longo do tempo e controlar cada aspeto da animação, incluindo como e quando ela é iniciada e como ela atinge seu estado final. Por exemplo, animar um objeto para uma nova posição acima de 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 atraente.

Tipos de animações baseadas no tempo

Há duas categorias de animações baseadas no tempo que você pode usar para criar belas experiências de usuário no Windows:

Animações explícitas – como o nome significa, você inicia explicitamente a animação para fazer atualizações. Animações Implícitas – essas animações são ativadas pelo sistema em teu nome quando uma condição é atendida.

Para este artigo, discutiremos como criar e usar animações explícitas baseadas no tempo com KeyFrameAnimations.

Para animações explícitas e implícitas baseadas em tempo, existem diferentes tipos, correspondentes aos diferentes tipos de propriedades de CompositionObjects que você pode animar.

• ColorKeyFrameAnimation
• QuaternionKeyFrameAnimation
• Animação de Quadros-chave Escalares
• Vetor2KeyFrameAnimation
• Animação de Vetor3 com Quadros-chave
• Vetor4KeyFrameAnimation

Crie animações baseadas no tempo com KeyFrameAnimations

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

• KeyFrames – Estes são os "fotogramas" individuais por onde uma animação passará.
  • Definido como pares de chave e valor. A chave representa o progresso entre 0 e 1, ou seja, em que momento da duração da animação esse "instantâneo" ocorre. O outro parâmetro representa o valor da propriedade neste momento.
• KeyFrameAnimation Properties – opções de personalização que você pode aplicar para atender às necessidades da interface do usuário.
  • DelayTime – tempo antes de uma animação começar após StartAnimation ser chamado.
  • Duração – duração da animação.
  • IterationBehavior – contagem ou comportamento de repetição infinita para uma animação.
  • IterationCount – número de vezes finitas que uma animação KeyFrame irá repetir.
  • KeyFrame Count – leitura de quantos KeyFrames existem numa animação de KeyFrame específica.
  • StopBehavior – especifica o comportamento de um valor de propriedade de animação quando StopAnimation é chamado.
  • Direção – especifica a direção da animação para reprodução.
• Grupo de Animação – iniciando várias animações ao mesmo tempo.
  • Muitas vezes usado quando se deseja animar várias propriedades ao mesmo tempo.

Para obter mais informações, consulte CompositionAnimationGroup.

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

1. Identifique o CompositionObject e a respetiva propriedade que precisa de ser animada.
2. Crie um modelo KeyFrameAnimation Type do compositor que corresponda ao tipo de propriedade que você deseja animar.
3. Usando o modelo de animação, comece a adicionar KeyFrames e definir as propriedades da animação.
   • Pelo menos um KeyFrame é necessário (o quadro-chave 100% ou 1f).
   • Recomenda-se definir uma duração também.
4. Quando estiver pronto para executar essa animação, chame StartAnimation(...) no CompositionObject, direcionando a propriedade que você deseja animar. Mais especificamente:
   • visual.StartAnimation("targetProperty", CompositionAnimation animation);
   • visual.StartAnimationGroup(AnimationGroup animationGroup);
5. Se tiver uma animação a correr e quiser parar a Animação ou o Grupo de Animação, pode usar estas APIs:
   • visual.StopAnimation("targetProperty");
   • visual.StopAnimationGroup(AnimationGroup AnimationGroup);

Vamos dar uma olhada em um exemplo para ver essa fórmula em ação.

Exemplo

Neste exemplo, você deseja animar o deslocamento de um visual de <0,0,0> a <200,0,0> durante 1 segundo. Além disso, você quer ver o visual animado entre essas posições 10 vezes.

Primeiro, você começa identificando o CompositionObject e a propriedade que deseja animar. Neste caso, o quadrado vermelho é representado por uma Composição Visual chamada redVisual. Você inicia sua animação a partir deste objeto.

Em seguida, como você deseja animar a propriedade Offset, você precisa criar um Vetor3KeyFrameAnimation (Offset é do tipo Vetor3). Você também define os KeyFrames correspondentes para o KeyFrameAnimation.

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

Em seguida, você define as propriedades do KeyFrameAnimation para descrever sua duração, juntamente com o comportamento para animar entre as duas posições (atual e <200,0,0>) 10 vezes.

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

Finalmente, para executar uma animação, você precisa iniciá-la em uma 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 = Windows.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;
    redVisual.StartAnimation("Offset", animation);
}