Animações de mola

O artigo mostra como usar NaturalMotionAnimations de mola.

Pré-requisitos

Aqui, presumimos que você esteja familiarizado com os conceitos abordados neste artigo:

• Animações de movimento natural

Por que molas?

As molas são uma experiência de movimento comum que todos nós experimentamos em algum momento de nossas vidas; variando de brinquedos furtivos a experiências em sala de aula de física com um bloco amarrado por mola. O movimento oscilante de uma mola muitas vezes incita uma resposta emocional lúdica e alegre daqueles que a observam. Como resultado, o movimento de uma mola se traduz bem na interface do usuário do aplicativo para aqueles que desejam criar uma experiência de movimento mais animada que "apareça" mais para o usuário final do que um Bézier cúbico tradicional. Nesses casos, o movimento de mola não apenas cria uma experiência de movimento mais animada, mas também pode ajudar a chamar a atenção para conteúdo novo ou atualmente animado. Dependendo da marca do aplicativo ou da linguagem do movimento, a oscilação é mais pronunciada e visível, mas em outros casos é mais sutil.

Usando molas em sua interface do usuário

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 interface do usuário é:

Descrição do uso da mola	Exemplo visual
Fazendo uma experiência de movimento "estourar" e parecer mais animada. (Escala de animação)
Tornando uma experiência de movimento sutilmente mais enérgica (Deslocamento de animação)

Em cada um desses casos, o movimento da mola pode ser acionado "saltando para" e oscilando em torno de um novo valor ou oscilando em torno de seu valor atual com alguma velocidade inicial.

Definindo 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* do Compositor. Em seguida, você pode definir as seguintes propriedades do movimento:

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

Valor da taxa de amortecimento	Descrição
DampingRatio = 0	Não amortecido - a mola oscilará por um longo tempo
< 0 DampingRatio < 1	Subamortecido – a primavera oscilará de pouco a muito.
DampingRatio = 1	Criticallydamped - a mola não executará nenhuma oscilação.
AmortecimentoRação > 1	Amortecida demais – 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 inicial e final definidas do movimento da mola (se não for definido, 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:

• Comportamento de DelayTime/Delay
• Comportamento de parada

Nos casos comuns de animação de Offset e Scale/Size, os seguintes valores são recomendados pela equipe de design do Windows para DampingRatio e Period para diferentes tipos de molas:

Propriedade	Mola normal	Mola amortecida	Mola menos amortecida
Deslocamento	Taxa de amortecimento = 0,8 Período = 50 ms	Taxa de amortecimento = 0.85 Período = 50 ms	Taxa de amortecimento = 0,65 Período = 60 ms
Escala/Tamanho	Taxa de amortecimento = 0,7 Período = 50 ms	Taxa de amortecimento = 0,8 Período = 50 ms	Taxa de amortecimento = 0,6 Período = 60 ms

Depois de definir as propriedades, você pode passar seu NaturalMotionAnimation de primavera 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 aparecer. 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);
}

Agora, e se você quisesse vincular essa moção à entrada? Então, se o usuário final deslizar para fora, os painéis sairão com um movimento de primavera? Mais importante, se o usuário deslizar 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 InteractionTracker. Vamos supor que, para este exemplo de código, você já tenha configurado seu InteractionTracker e VisualInteractionSource. Vamos nos concentrar na criação dos InertiaModifiers que receberão um 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 programática e orientada por entrada em sua interface do usuário!

Em resumo, as etapas para usar uma animação de primavera 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:
   • DampingRatio
   • Período
   • Valor Final
   • Valor inicial
   • Velocidade inicial
3. Atribuir ao destino.
   • Se você estiver animando uma propriedade CompositionObject, passe SpringAnimation como parâmetro para StartAnimation.
   • Se você quiser usar com entrada, defina a propriedade NaturalMotion de um InertiaModifier como SpringAnimation.