Animações de movimento natural

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

Tornando o movimento familiar e natural

Ótimos aplicativos são aqueles que criam experiências que capturam e retêm a atenção do usuário e ajudam a orientá-los nas tarefas. O movimento é o principal fator de diferenciação que separa uma interface de usuário de uma experiência de 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 engajamento e a satisfação dos usuários finais.

Uma maneira pela qual o movimento pode ajudar a criar essa conexão é criando experiências que pareçam familiares para os usuários. Os usuários têm uma expectativa inconsciente de como percebem o movimento com base em experiências da vida real. Vemos como os objetos deslizam pelo chão, caem da mesa, saltam uns contra os outros e oscilam com uma mola. O movimento que aproveita essa expectativa por ser baseado na física do mundo real parece mais natural aos nossos olhos. O movimento se torna mais natural e interativo, mas o mais importante, toda a experiência se torna mais memorável e agradável.

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

Controle de equilíbrio e dinamismo

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

No outro extremo do espectro, existem simulações frequentemente vistas em motores de jogos e física. Essas experiências geralmente são as mais realistas e dinâmicas com as quais os usuários interagem – criando aquela 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 vivo e dinâmico, designers e desenvolvedores têm menos controle, dificultando a integração na interface do usuário tradicional.

Os NaturalMotionAnimationexistem para ajudar a preencher essa divisão, permitindo um equilíbrio de controle para os elementos importantes de uma animação, como início/término, mas mantendo o movimento que parece natural e dinâmico.

Observação

NaturalMotionAnimations não se destinam a substituir as animações de quadro-chave – ainda há lugares na linguagem de design fluente em que os quadros-chave são recomendados. NaturalMotionAnimations devem ser usadas em locais onde o movimento é necessário, mas as animações de quadro-chave não são dinâmicas o suficiente.

Usando NaturalMotionAnimations

A partir do Fall Creators Update, você tem acesso a uma nova experiência de movimento: animações de primavera. Consulte Animações de mola para obter um passo a passo mais detalhado das molas.

Esse tipo de movimento é obtido usando o novo NaturalMotionAnimation – um novo tipo de animação centrado em permitir que os desenvolvedores criem movimentos mais familiares e naturais 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 InteractionTracker.
• Defina propriedades específicas de movimento (como DampingRatio para molas).

Fórmula geral para começar:

1. Crie o NaturalMotionAnimation 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 como a propriedade Motion de um InteractionTracker InertiaModifier.

Um exemplo básico usando uma mola NaturalMotionAnimation para fazer uma "mola" Visual para 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);