Animações de primavera

Este artigo mostra como usar SpringNaturalMotionAnimations no WinUI.

Pré-requisitos

Aqui, assumimos que 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 da vida; desde brinquedos como o slinky até experiências em sala de aula de Física com um bloco preso a uma mola. O movimento oscilante de uma mola frequentemente provoca uma resposta emocional brincalhona e leve por parte daqueles que a observam. Como resultado, o movimento de uma mola traduz-se bem na interface de aplicação para quem procura criar uma experiência de movimento mais dinâmica que "sobressai" mais para o utilizador final do que um Cubic Bézier tradicional. Nestes casos, o spring motion não só cria uma experiência de movimento mais animada, como também pode ajudar a chamar a atenção para conteúdos novos ou em fase de animação. Dependendo da marca da aplicação ou da linguagem de movimento, a oscilação é mais pronunciada e visível, mas noutros casos é mais subtil.

Usar molas na sua interface de utilizador

Como mencionado anteriormente, as molas podem ser um movimento útil para integrar na sua aplicação WinUI para introduzir uma experiência de interface muito familiar e divertida. Os usos comuns das molas na interface de utilizador são:

Descrição do Uso da Mola	Exemplo Visual
Fazer uma experiência de movimento "sobressair" e dar-lhe um aspeto mais dinâmico. (Escala de animação)
Tornar uma experiência de movimento subtilmente mais energética (Deslocamento de Animação)

Em cada um destes casos, o movimento da mola pode ser desencadeado ao "saltar para" e oscilar em torno de um novo valor ou oscilar em torno do seu valor atual com alguma velocidade inicial.

Definir o movimento da mola

Cria uma experiência spring usando as APIs do NaturalMotionAnimation. Especificamente, crias um SpringNaturalMotionAnimation usando os métodos Create* do Compositor. Assim, é possível definir as seguintes propriedades do movimento:

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

Valor do Coeficiente de Amortecimento	Descrição
Relação de Amortecimento = 0	Sem amortecimento – a mola oscila durante muito tempo
0 < Relação de Amortecimento < 1	Subamortecido – a mola oscila de pouco a muito.
Razão de Amortecimento = 1	Amortecida criticamente – a mola não realiza qualquer oscilação.
Relação de Amortecimento > 1	Sobre-amortecido – a mola chega rapidamente ao seu destino com uma desaceleração abrupta e sem oscilação

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

Também pode definir um conjunto de propriedades do movimento que são iguais às KeyFrameAnimations:

• Tempo de Atraso / Comportamento de Atraso
• StopBehavior

Nos casos comuns de animação de Offset e Escala/Tamanho, a Equipa de Design do Windows recomenda os seguintes valores para DampingRatio e Período para diferentes tipos de molas:

Propriedade	Mola Normal	Mola Umedecida	Mola com amortecimento reduzido
Compensação	Razão de amortecimento = 0,8 Período = 50 ms	Rácio de amortecimento = 0,85 Período = 50 ms	Rácio de amortecimento = 0,65 Período = 60 ms
Escala/Tamanho	Rácio de amortecimento = 0,7 Período = 50 ms	Razão de amortecimento = 0,8 Período = 50 ms	Razão de amortecimento = 0,6 Período = 60 ms

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

Exemplo

Neste exemplo, cria-se uma experiência de interface de navegação e tela em que, quando o utilizador clica num botão de expandir, um painel de navegação é animado com um movimento oscilante e elástico.

Comece por definir a animação da mola dentro do evento de clique para que seja ativada quando o painel de navegação aparecer. Depois defines as propriedades da animação, usando a funcionalidade InitialValueExpression para usar uma Expression e definir o FinalValue. Também registas se o painel está aberto ou não e, quando estás pronto, inicias 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 quisesses ligar este movimento à entrada? Então, se o utilizador final deslizar para fora, os painéis saem com um movimento de mola? Mais importante ainda, se o utilizador deslizar com mais força ou mais velocidade, o movimento adapta-se com base na velocidade do utilizador final.

Para isso, pode usar a nossa mesma Animação de Spring e introduzi-la num InertiaModifier com o InteractionTracker. Para mais informações sobre o InputAnimations e o InteractionTracker, consulte Experiências de manipulação personalizadas com o InteractionTracker. Vamos assumir, neste exemplo de código, que já configurou o seu InteractionTracker e o VisualInteractionSource. Vamos focar-nos na criação dos Modificadores de Inércia que receberão uma animação de movimento natural, neste caso, uma mola.

// InteractionTracker and the VisualInteractionSource were previously set up.
// The open and close ScalarSpringAnimations were defined earlier.
private void SetupInput()
{
    // Define the InertiaModifier to manage the open motion.
    var openMotionModifier = InteractionTrackerInertiaNaturalMotion.Create(_compositor);

    // Use the open animation if the pane is not expanded.
    openMotionModifier.Condition = _compositor.CreateExpressionAnimation(
        "propSet.expanded == false");
    openMotionModifier.Condition.SetReferenceParameter("propSet", _propSet);
    openMotionModifier.NaturalMotion = _openSpringAnimation;

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

    // Use the close animation if the pane is expanded.
    closeMotionModifier.Condition = _compositor.CreateExpressionAnimation(
        "propSet.expanded == true");
    closeMotionModifier.Condition.SetReferenceParameter("propSet", _propSet);
    closeMotionModifier.NaturalMotion = _closeSpringAnimation;

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

    // Take the InteractionTracker output and assign it to the pane.
    var exp = _compositor.CreateExpressionAnimation("-tracker.Position.X");
    exp.SetReferenceParameter("tracker", _tracker);

    ElementCompositionPreview.GetElementVisual(pageNavigation)
        .StartAnimation("Translation.X", exp);
}

Agora tens tanto uma animação de mola programática como uma baseada em inputs na tua interface!

Em resumo, os passos para usar uma animação de mola na sua aplicação:

1. Cria o seu SpringAnimation a partir do seu Compositor.
2. Defina propriedades do SpringAnimation se quiser valores não padrão:
   • Relação de Amortecimento
   • Período
   • Valor Final
   • Valor Inicial
   • Velocidade inicial
3. Atribuir ao alvo.
   • Se estiveres a animar uma propriedade CompositionObject, passa o SpringAnimation como parâmetro para o StartAnimation.
   • Se quiseres usar com input, define a propriedade NaturalMotion de um InertiaModifier para SpringAnimation.