Animações de primavera

O artigo mostra como usar o spring NaturalMotionAnimations.

Pré-requisitos

Aqui, assumimos que você está familiarizado com os conceitos discutidos nestes artigos:

• Animações de movimento natural

Porquê molas?

As molas são uma experiência de movimento comum que todos nós já experimentámos em algum momento das nossas vidas; variando de brinquedos Slinky a experiências na sala de aula de Física com um bloco alojado a molas. O movimento oscilante de uma mola muitas vezes incita uma resposta emocional lúdica e leve de quem a observa. Como resultado, o movimento de uma mola adapta-se bem à interface do utilizador para aqueles que procuram criar uma experiência de movimento mais animada e que se destaque mais para o utilizador final, em comparação com um Cubic Bezier tradicional. Nestes casos, o movimento da primavera não só cria uma experiência de movimento mais animada, mas também pode ajudar a chamar a atenção para conteúdos novos ou atualmente em animação. Dependendo da marca da aplicação ou da linguagem de movimento, a oscilação é mais pronunciada e visível, mas em outros casos é mais sutil.

Usando molas na sua interface de utilizador

Como mencionado anteriormente, as molas podem ser um movimento útil para integrar ao seu aplicativo para introduzir uma experiência de interface do usuário muito familiar e divertida. O uso comum de molas na UI é:

Descrição de uso da primavera	Exemplo visual
Tornar a experiência de movimento 'pop' e parecer mais animada. (Escala de Animação)
Fazer uma experiência de movimento parecer subtilmente mais enérgica (Animating Offset)

Em cada um destes casos, o movimento da mola pode ser desencadeado quer por "impulsionar-se para" e oscilar em torno de um novo valor, quer por oscilar em torno do seu valor atual com alguma velocidade inicial.

Definir o movimento da mola

Você cria uma experiência de primavera usando as APIs NaturalMotionAnimation. Especificamente, você cria um SpringNaturalMotionAnimation usando os métodos Create* fora do Compositor. Você é então capaz de definir as seguintes propriedades do movimento:

• DampingRatio – expressa o nível de amortecimento do movimento da mola usado na animação.

Valor da Razão de Amortecimento	Descrição
Razão de amortecimento = 0	Sem amortecimento – a mola oscilará por muito tempo
0 < Coeficiente de Amortecimento < 1	Underdamped – a primavera oscilará de um pouco a muito.
Razão de amortecimento = 1	Criticamente amortecido – a mola não realizará oscilação.
Rácio de Amortecimento > 1	Sobre-amortecido – a mola chegará rapidamente ao seu destino com uma desaceleração abrupta e sem oscilação

• Período – o tempo que a mola leva para realizar uma única oscilação.
• Valor Final / Inicial – posições iniciais e finais definidas do movimento da mola; se não estiverem definidos, os valores iniciais e/ou finais serão os valores atuais.
• Velocidade inicial – velocidade inicial programática para o movimento.

Você também pode definir um conjunto de propriedades do movimento que são as mesmas que KeyFrameAnimations:

• Tempo de Atraso / Comportamento de Atraso
• StopBehavior

Nos casos comuns de animação de Deslocamento e Escala/Tamanho, os seguintes valores são recomendados pela equipe de Design do Windows para DampingRatio e Period para diferentes tipos de molas:

Propriedade	Primavera Normal	Mola amortecida	Mola pouco amortecida
Compensação	Relação de amortecimento = 0,8 Período = 50 ms	Relação de amortecimento = 0,85 Período = 50 ms	Relação de amortecimento = 0,65 Período = 60 ms
Escala/Tamanho	Relação de amortecimento = 0,7 Período = 50 ms	Relação de amortecimento = 0,8 Período = 50 ms	Relação de amortecimento = 0,6 Período = 60 ms

Depois de definir as propriedades, você pode passar sua primavera NaturalMotionAnimation para o método StartAnimation de um CompositionObject ou a propriedade Motion de um InteractionTracker InertiaModifier.

Exemplo

Neste exemplo, você cria uma experiência de interface do usuário de navegação e tela na qual, quando o usuário clica em um botão de expansão, um painel de navegação é animado com um movimento de oscilação elástico.

Comece definindo a animação de mola dentro do evento clicado para quando o painel de navegação for exibido. Em seguida, você define as propriedades da animação, usando o recurso InitialValueExpression para usar uma expressão para definir o FinalValue. Você também controla se o painel está aberto ou não e, quando estiver pronto, inicia a animação.

private void Button_Clicked(object sender, RoutedEventArgs e)
{
 _springAnimation = _compositor.CreateSpringScalarAnimation();
 _springAnimation.DampingRatio = 0.75f;
 _springAnimation.Period = TimeSpan.FromSeconds(0.5);

 if (!_expanded)
 {
 _expanded = true;
 _propSet.InsertBoolean("expanded", true);
 _springAnimation.InitialValueExpression["FinalValue"] = "this.StartingValue + 250";
 } else
 {
 _expanded = false;
 _propSet.InsertBoolean("expanded", false);
_springAnimation.InitialValueExpression["FinalValue"] = "this.StartingValue - 250";
 }
 _naviPane.StartAnimation("Offset.X", _springAnimation);
}

E se quisesse ligar esta moção à entrada? Então, se o utilizador final deslizar para fora, os painéis saem com um movimento de mola? Mais importante ainda, se o usuário desliza mais forte ou mais rápido, o movimento se adapta com base na velocidade do usuário final.

Para fazer isso, você pode pegar nossa mesma animação de primavera e passá-la para um InertiaModifier com InteractionTracker. Para obter mais informações sobre InputAnimations e InteractionTracker, consulte Experiências de manipulação personalizadas com o InteractionTracker. Vamos supor que, para este exemplo de código, você já configurou seu InteractionTracker e VisualInteractionSource. Vamos nos concentrar na criação dos InertiaModifiers que receberão uma NaturalMotionAnimation, neste caso uma mola.

// InteractionTracker and the VisualInteractionSource previously setup
// The open and close ScalarSpringAnimations defined earlier
private void SetupInput()
{
 // Define the InertiaModifier to manage the open motion
 var openMotionModifer = InteractionTrackerInertiaNaturalMotion.Create(compositor);

 // Condition defines to use open animation if panes in non-expanded view
 // Property set value to track if open or closed is managed in other part of code
 openMotionModifer.Condition = _compositor.CreateExpressionAnimation(
"propset.expanded == false");
 openMotionModifer.Condition.SetReferenceParameter("propSet", _propSet);
 openMotionModifer.NaturalMotion = _openSpringAnimation;

 // Define the InertiaModifer to manage the close motion
 var closeMotionModifier = InteractionTrackerInertiaNaturalMotion.Create(_compositor);

 // Condition defines to use close animation if panes in expanded view
 // Property set value to track if open or closed is managed in other part of code
 closeMotionModifier.Condition = 
_compositor.CreateExpressionAnimation("propSet.expanded == true");
 closeMotionModifier.Condition.SetReferenceParameter("propSet", _propSet);
 closeMotionModifier.NaturalMotion = _closeSpringAnimation;

 _tracker.ConfigurePositionXInertiaModifiers(new 
InteractionTrackerInertiaNaturalMotion[] { openMotionModifer, closeMotionModifier});

 // Take output of InteractionTracker and assign to the pane
 var exp = _compositor.CreateExpressionAnimation("-tracker.Position.X");
 exp.SetReferenceParameter("tracker", _tracker);
 ElementCompositionPreview.GetElementVisual(pageNavigation).
StartAnimation("Translation.X", exp);
}

Agora você tem uma animação de mola controlada por programação e outra controlada por entrada na sua interface do utilizador!

Em resumo, as etapas para usar uma animação de primavera em seu aplicativo:

1. Crie o seu SpringAnimation a partir do seu Compositor.
2. Defina as propriedades do SpringAnimation se desejar valores não padrão:
   • Rácio de amortecimento
   • Período
   • Valor final
   • Valor Inicial
   • Velocidade inicial
3. Atribuir ao alvo.
   • Se você estiver animando uma propriedade CompositionObject, passe SpringAnimation como parâmetro para StartAnimation.
   • Se quiseres usar com a entrada, define a propriedade NaturalMotion de um InertiaModifier como SpringAnimation.