Animações de movimento natural

Este artigo fornece uma breve visão geral do espaço NaturalMotionAnimation e como pensar conceitualmente no uso desses tipos de animações na interface do usuário.

Tornando o movimento familiar e natural

Apps excelentes são aqueles que proporcionam experiências que capturam e retêm a atenção do usuário e ajudam a conduzi-los pelas tarefas. O movimento é o fator chave que distingue uma interface do usuário de uma experiência do usuário, provocando uma conexão entre 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 maneira de o movimento ajudar a estabelecer essa conexão é por meio de experiências que pareçam familiar para os usuários. Os usuários têm uma expectativa inconsciente de como percebem o movimento baseado em experiências da vida real. Vemos como os objetos deslizam pelo chão, caem da mesa, saltam em direção a outro e oscilam com uma mola. O movimento que aproveita essa expectativa baseado na física do mundo real parece mais natural aos nossos olhos. O movimento torna-se mais natural e interativo, mas, o mais importante é que toda a experiência se torna mais fácil de memorizar e divertida.

O resultado é o maior envolvimento e retenção do usuário com o app.

Balanceando controle e dinamismo

Na interface do usuário tradicional, os KeyFrameAnimations são a forma predominante de descrever o movimento. Os KeyFrames forneceram o máximo controle para os designers e desenvolvedores definirem o início, o fim e a interpolação. Embora isso seja muito útil em vários casos, as animações de quadro chave não são muito dinâmicas; o movimento não é adaptável e parece o mesmo em qualquer condição.

Na outra extremidade do espectro, há simulações frequentemente vistas em mecanismos de jogos e de física. Essas experiências são geralmente as mais realistas e dinâmicas com as quais os usuários interagem, conferindo a noção de ambiente e aleatoriedade que eles veem todos os dias. Embora isso torne o movimento mais dinâmico, os designers e os desenvolvedores têm menos controle, o que dificulta mais a integração à interface do usuário tradicional.

Os NaturalMotionAnimations existem para ajudar a diminuir esse distanciamento, permitindo o controle dos elementos importantes de uma animação, como início/término, mas mantendo o movimento que parece natural e dinâmico.

Observação

Os NaturalMotionAnimations não funcionam como um substituto das animações de quadro chave; ainda há locais na linguagem do Fluent Design em que os KeyFrames são recomendados. Os NaturalMotionAnimations devem ser usados em locais nos quais o movimento é necessário, mas as animações de quadro chave não são suficientemente dinâmicas.

Usando o NaturalMotionAnimations

A partir da Atualização do Fall Creators, você tem acesso a uma nova experiência de movimento: animações spring. Consulte Animações de mola para obter um passo a passo mais aprofundado sobre as molas.

Esse tipo de movimento é obtido através do novo NaturalMotionAnimation, um novo tipo de animação que permite aos desenvolvedores criar um movimento mais familiar e natural na interface do usuário, com um equilíbrio entre controle e dinamismo. Eles expõem os seguintes recursos:

• Defina os valores de início e término.
• Defina InitialVelocity e associe-se à entrada com o InteractionTracker.
• Definas as propriedades específicas de movimento (como DampingRatio para molas).

Fórmula geral para começar:

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

Um exemplo básico usando um NaturalMotionAnimation de mola para criar uma "mola" visual em um novo local de deslocamento X:

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