Animações baseadas no tempo

Quando um componente ou uma experiência do usuário inteira muda, os usuários finais geralmente o observam de duas maneiras: ao longo do tempo ou instantaneamente. Na plataforma Windows, o primeiro é preferido em relação ao 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, é possível alterar a 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 em tempo, também conhecidas como KeyFrameAnimations. KeyFrameAnimations permite alterar uma interface do usuário ao longo do tempo e controlar cada aspecto 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 líquido é uma experiência mais agradável e atraente.

Tipos de animações baseadas em tempo

Há duas categorias de animações baseadas em tempo que é possível 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 iniciadas pelo sistema em seu nome quando uma condição é atendida.

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

Para animações explícitas e implícitas baseadas em tempo, há diferentes tipos, correspondendo aos diferentes tipos de propriedades de CompositionObjects que é possível animar.

• ColorKeyFrameAnimation
• QuaternionKeyFrameAnimation
• ScalarKeyFrameAnimation
• Vector2KeyFrameAnimation
• Vector3KeyFrameAnimation
• Vector4KeyFrameAnimation

Criar animações baseadas em tempo com KeyFrameAnimations

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

• KeyFrames – Estes são os "instantâneos" individuais por meio dos quais uma animação vai animar.
  • Definido como par chave-valor. A chave representa o progresso entre 0 e 1, também conhecido como onde na vida útil da animação esse "instantâneo" ocorre. O outro parâmetro representa o valor da propriedade neste momento.
• Propriedades KeyFrameAnimation – opções de personalização que é possível aplicar para atender às necessidades da interface do usuário.
  • DelayTime – tempo antes de uma animação ser iniciada após StartAnimation ser chamada.
  • Duração – duração da animação.
  • IterationBehavior – comportamento de contagem ou repetição infinita para uma animação.
  • IterationCount – número de vezes finitas que uma animação KeyFrame se repetirá.
  • KeyFrame Count – leia quantos KeyFrames em uma determinada animação KeyFrame.
  • 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 sua respectiva propriedade que você precisa animar.
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. Especificamente:
   • visual.StartAnimation("targetProperty", CompositionAnimation animation);
   • visual.StartAnimationGroup(AnimationGroup animationGroup);
5. Se você tiver uma animação em execução e quiser interromper a Animação ou o Grupo de Animação, poderá usar estas APIs:
   • visual.StopAnimation("targetProperty");
   • visual.StopAnimationGroup(AnimationGroup AnimationGroup);

Vamos dar 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> em 1 segundo. Além disso, você deseja ver o visual animado entre essas posições 10 vezes.

Primeiro, você começa identificando o CompositionObject e a propriedade que deseja animar. Nesse caso, o quadrado vermelho é representado por um Visual de Composição chamado redVisual. Inicie a animação a partir deste objeto.

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

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

Em seguida, defina as propriedades de KeyFrameAnimation para descrever sua duração junto com o comportamento a ser animado 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);
}