Animações de primavera

O artigo mostra como usar o Spring NaturalMotionAnimations.

Pré-requisitos

Aqui, presumimos que você esteja familiarizado com os conceitos discutidos nestes artigos:

• animações de movimento natural

Por que molas?

Experiências com molas são comuns e todos nós já as vivenciamos em algum momento de nossas vidas; desde brinquedos mola até experiências em sala de aula de Física com um bloco preso a uma mola. O movimento oscilante de uma primavera muitas vezes incita uma resposta emocional lúdica e leve daqueles que o observam. Como resultado, a tradução do movimento de uma mola para a interface do usuário do aplicativo funciona bem para quem deseja criar uma experiência de movimento mais dinâmica, que chama mais a atenção do usuário final do que uma tradicional Bezier cúbico. Nesses casos, o spring motion não só cria uma experiência de movimento mais dinâmica, mas também pode ajudar a chamar a atenção para conteúdo novo ou atualmente animado. Dependendo da identidade visual do aplicativo ou da linguagem de movimento, a oscilação é mais pronunciada e visível, mas em outros casos é mais sutil.

Usando molas na interface do usuário

Conforme mencionado anteriormente, o springs pode ser um movimento útil para se integrar ao seu aplicativo para introduzir uma experiência de interface do usuário muito familiar e lúdica. O uso comum de molas na interface do usuário é:

Descrição do uso do Spring	Exemplo visual
Tornando uma experiência de movimento mais destacada e ficando mais animada. (Animando escala)
Fazer com que uma experiência de movimento sutil pareça mais enérgica (Deslocamento Animado)

Em cada um desses casos, o movimento de mola pode ser ativado por um impulso que a faz oscilar ao redor de um novo valor ou oscilar ao redor de seu valor atual com alguma velocidade inicial.

de oscilação de animação da Primavera

Definindo o movimento da sua mola

Você cria uma experiência spring usando as APIs NaturalMotionAnimation. Especificamente, você cria um SpringNaturalMotionAnimation usando os métodos Create* do Compositor. Em seguida, você pode definir as seguintes propriedades do movimento:

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

• Período – o tempo que leva a mola para executar uma única oscilação.
• Valor Final/Inicial – as posições inicial e final definidas do movimento da mola (se não forem definidas, o valor inicial e/ou o valor final será o valor atual).
• Velocidade Inicial – velocidade inicial programática para o movimento.

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

• Tempo de Atraso / Comportamento de Atraso
• StopBehavior

Nos casos comuns de animação de deslocamento e escala/tamanho, a equipe de Design do Windows recomenda os seguintes valores para relação de amortecimento (DampingRatio) e período (Period) para diferentes tipos de molas:

Depois de definir as propriedades, você poderá então passar sua NaturalMotionAnimation com mola para o método StartAnimation de um CompositionObject ou para a propriedade Motion de um InteractionTracker InertiaModifier.

Exemplo

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

animação Spring ao clicar

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, inicie 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 você quisesse vincular esse movimento à entrada? Então, se o usuário final deslizar o dedo, os painéis sairão com um movimento de mola? Mais importante, se o usuário passar o dedo mais forte ou mais rápido, o movimento se adaptará com base na velocidade do usuário final.

animação spring ao passar o dedo

Para fazer isso, você pode pegar nossa mesma animação Spring 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 o InteractionTracker e o VisualInteractionSource. Vamos nos concentrar na criação dos modificadores de inércia, os quais receberão uma animação de movimento natural, 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 programática e baseada em entrada na sua interface do usuário!

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

1. Crie seu SpringAnimation a partir do seu Compositor.
2. Defina as propriedades do SpringAnimation se você quiser valores não padrão:
   • Razão 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 você quiser usar com a entrada de dados, configure a propriedade NaturalMotion de um InertiaModifier para SpringAnimation.