Animações de movimento natural

Este artigo fornece uma breve visão geral do espaço NaturalMotionAnimation e como pensar conceitualmente sobre como usar esses tipos de animações em sua interface do usuário.

Fazer com que o movimento pareça familiar e natural

Ótimos aplicativos são os que criam experiências que capturam e retêm a atenção do usuário e ajudam a orientar os usuários por meio de tarefas. O movimento é o principal fator diferencial que separa uma Interface do Usuário de uma Experiência do Usuário, provocando uma conexão entre os usuários e o aplicativo com o qual eles estão interagindo. Quanto melhor a conexão, maior o envolvimento e a satisfação dos usuários finais.

Uma forma de o movimento ajudar a construir essa conexão é ao criar experiências que são familiares para os usuários. Os usuários têm uma expectativa inconsciente de como percebem o movimento que se baseia em experiências da vida real. Vemos como os objetos deslizam pelo chão, caem da mesa, saltam uns para os outros e oscilam com uma mola. Movimento que aproveita essa expectativa por ser baseado na física do mundo real parece e soa mais natural aos nossos olhos. O movimento torna-se mais natural e interativo, mas o mais importante, toda a experiência torna-se mais memorável e deliciosa.

O resultado líquido é maior envolvimento e retenção do usuário com seu aplicativo.

Controle de balanceamento e dinamismo

Na interface do usuário tradicional, KeyFrameAnimations são a maneira predominante de descrever o movimento. O KeyFrames forneceu o controle máximo aos designers e desenvolvedores para definir o início, o término e a interpolação. Embora isso seja muito útil em muitos casos, as Animações de KeyFrame não são muito dinâmicas; o movimento não é adaptável e tem a mesma aparência em qualquer condição.

Na outra extremidade do espectro, há simulações frequentemente vistas em mecanismos de jogos e física. Essas experiências geralmente são as mais dinâmicas e semelhantes à vida com as quais os usuários interagem, criando essa sensação de ambiente e aleatoriedade que os usuários veem todos os dias. Embora isso faça com que o movimento pareça mais ativo e dinâmico, designers e desenvolvedores têm menos controle, tornando mais difícil integrar-se à interface do usuário tradicional.

NaturalMotionAnimation existe para ajudar a fechar essa divisão, permitindo um equilíbrio de controle para os elementos importantes de uma animação, como início/fim, enquanto mantém o movimento que parece e se sente natural e dinâmico.

Observação

NaturalMotionAnimations não são destinadas a substituir animações KeyFrame – ainda há lugares na linguagem de design Fluent onde KeyFrame são recomendados. NaturalMotionAnimations devem ser usados em locais onde o movimento é necessário, mas as Animações de KeyFrame não são dinâmicas o suficiente.

Usando NaturalMotionAnimations

No WinUI e no SDK do Aplicativo do Windows, você tem acesso a uma experiência de movimento natural: animações de mola. Confira as animações da Primavera para obter um passo a passo mais aprofundado das molas.

Esse tipo de movimento é obtido usando o novo NaturalMotionAnimation – um novo tipo de animação centrado em permitir que os desenvolvedores criem um movimento de sentimento mais familiar e natural em sua interface do usuário, com um equilíbrio de controle e dinamismo. Eles expõem os seguintes recursos:

• Defina os valores inicial e final.
• Defina InitialVelocity e vincule à entrada com o InteractionTracker.
• Definir propriedades específicas do movimento (como DampingRatio para molas).)

Fórmula geral para começar:

1. Crie o NaturalMotionAnimation fora do Compositor usando um dos métodos Create .
2. Defina as propriedades da animação.
3. Passe o NaturalMotionAnimation como parâmetro na chamada StartAnimation de um CompositionObject.
   • Ou definido como a propriedade Motion de um InteractionTracker InertiaModifier.

Um exemplo básico usando um Spring NaturalMotionAnimation para mover um Visual para uma nova posição de deslocamento no eixo X:

_springAnimation = _compositor.CreateSpringScalarAnimation();
_springAnimation.Period = TimeSpan.FromSeconds(0.07);
_springAnimation.DelayTime = TimeSpan.FromSeconds(1);
_springAnimation.EndPoint = 500f;
sectionNav.StartAnimation("Offset.X", _springAnimation);