Animações baseadas em tempo

Quando um componente ou uma experiência inteira do usuário é alterado, os usuários finais geralmente o observam de duas maneiras: ao longo do tempo ou instantaneamente. Na plataforma Windows, o primeiro é preferencial em relação ao último – experiências do usuário que mudam instantaneamente muitas vezes confundem e surpreendem os usuários finais porque eles não são capazes de seguir o que aconteceu. Em seguida, o usuário final percebe a experiência como chocante e não natural.

Em vez disso, você pode alterar sua interface do usuário ao longo do tempo para orientar o usuário final ou notificá-lo de 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 lá. Ao usar animações em vez de alterações instantâneas, o resultado final é 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 você pode usar para criar belas experiências do 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 para você quando uma condição é atendida.

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

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

• ColorKeyFrameAnimation
• QuaternionKeyFrameAnimation
• ScalarKeyFrameAnimation
• Vector2KeyFrameAnimation
• Vector3KeyFrameAnimation
• Animação de Quadro-Chave de Vetor4

Criar animações baseadas em tempo com KeyFrameAnimations

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

• KeyFrames – Esses são os "instantâneos" individuais pelos quais uma animação será animada.
  • Definidos como pares de chave & valor. A chave representa o progresso entre 0 e 1, também indicando em qual ponto do tempo de vida da animação esse "instantâneo" ocorre. O outro parâmetro representa o valor da propriedade no momento.
• Propriedades de Animação de Quadro-chave – opções de personalização que podem ser aplicadas para atender às necessidades da UI.
  • DelayTime – tempo antes de uma animação ser iniciada após StartAnimation ser chamada.
  • Duração – duração da animação.
  • ComportamentoDeIteração – contagem ou comportamento de repetição infinita para uma animação.
  • IteraçãoCount – número finito de vezes que uma animação de quadro-chave será repetida.
  • Contagem de KeyFrames – leitura do número de KeyFrames em uma animação específica de KeyFrames.
  • 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.
  • Geralmente usado ao querer 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 sua respectiva propriedade que você precisa animar.
2. Crie um modelo de tipo KeyFrameAnimation 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 propriedades da animação.
   • Pelo menos um quadro-chave é necessário (o quadro-chave de 100% ou 1f).
   • É recomendável definir uma duração também.
4. Depois de estar 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 parar a Animação ou Grupo de Animação, poderá 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> para <200,0,0> em 1 segundo. Além disso, você deseja ver a animação visual 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. Você inicia sua animação a partir deste objeto.

Em seguida, como você deseja animar a propriedade Offset, é necessário 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, você define as propriedades do KeyFrameAnimation para descrever sua duração, juntamente com o comportamento de animação entre as duas posições (atual e <200,0,0>), repetindo esse processo 10 vezes.

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

Por fim, 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);
}