Animações de movimento natural

Este artigo apresenta uma breve visão geral do espaço NaturalMotionAnimation e como pensar conceptualmente na utilização destes tipos de animações na sua interface.

Fazer o movimento parecer familiar e natural

Grandes aplicações são aquelas que criam experiências que captam e retêm a atenção do utilizador, ajudando a orientá-los através das tarefas. O movimento é o principal fator diferenciador que separa uma Interface de Utilizador de uma Experiência de Utilizador – provocando uma ligação entre os utilizadores e a aplicação com que estão a interagir. Quanto melhor a ligação, maior envolvimento e satisfação dos utilizadores finais.

Uma forma como o movimento pode ajudar a construir esta ligação é criando experiências que pareçam e se sintam familiares para os utilizadores. Os utilizadores têm uma expectativa inconsciente sobre como percebem o movimento, baseada em experiências reais. Vemos como os objetos deslizam pelo chão, caem da mesa, saltam uns nos outros e oscilam com uma mola. O movimento que aproveita esta expectativa, baseando-se na física do mundo real, parece e sente-se mais natural aos nossos olhos. O movimento torna-se mais natural e interativo, mas, mais importante ainda, toda a experiência torna-se mais memorável e encantadora.

O resultado líquido é um maior envolvimento e retenção dos utilizadores com a sua aplicação.

Equilíbrio entre Controlo e Dinamismo

Na interface tradicional, os KeyFrameAnimationssão a forma predominante de descrever o movimento. Os KeyFrames proporcionavam o máximo controlo a designers e programadores para definir o início, o fim e a interpolação. Embora isto seja muito útil em muitos casos, as Animações de KeyFrame não são muito dinâmicas; O movimento não é adaptativo e tem o mesmo aspeto em qualquer condição.

No outro extremo do espectro, existem simulações frequentemente vistas em motores de jogos e física. Estas experiências são frequentemente as mais realistas e dinâmicas com que os utilizadores interagem – criando aquela sensação de ambiente e aleatoriedade que os utilizadores veem todos os dias. Embora isto torne o movimento mais vivo e dinâmico, os designers e programadores têm menos controlo, tornando assim mais difícil integrá-lo na interface tradicional.

O NaturalMotionAnimationexiste para ajudar a colmatar esta divisão – permitindo um equilíbrio entre o controlo dos elementos importantes de uma animação, como início/fim, mas mantendo um movimento que parece e se sente natural e dinâmico.

Observação

O NaturalMotionAnimations não foi concebido para substituir as KeyFrame Animations – ainda existem locais na linguagem de design Fluent onde os KeyFrames são recomendados. As Animações NaturalMotion destinam-se a ser usadas em locais onde é necessário movimento, mas as Animações por KeyFrame não são suficientemente dinâmicas.

Utilização do NaturalMotionAnimations

No WinUI e no Windows App SDK, tem acesso a uma experiência de movimento mais natural: animações de mola. Veja as animações de molas para uma visão mais aprofundada sobre o funcionamento das molas.

Este tipo de movimento é conseguido através do novo NaturalMotionAnimation – um novo tipo de animação centrado em permitir aos programadores incorporar movimentos mais familiares e naturais na sua interface, com um equilíbrio entre controlo e dinamismo. Revelam as seguintes capacidades:

• Defina os valores de início e fim.
• Define InitialVelocity e liga-o à entrada com o InteractionTracker.
• Defina propriedades específicas do movimento (como a Relação de Amortecimento 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. Passa o NaturalMotionAnimation como parâmetro na chamada da função StartAnimation de um CompositionObject.
   • Ou definir para a propriedade Motion de um InteractionTracker InertiaModifier.

Um exemplo básico usando uma mola NaturalMotionAnimation para criar uma "primavera" visual para uma nova localização em X Offset:

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