Animaciones de resorte

En este artículo se muestra cómo usar spring NaturalMotionAnimations en WinUI.

Prerrequisitos

Aquí se supone que está familiarizado con los conceptos descritos en estos artículos:

• Animaciones de movimiento natural

¿Por qué muelles?

Los resortes son una experiencia de movimiento común que todos hemos experimentado en algún momento de nuestra vida; desde juguetes de espiral hasta experiencias en el aula de física con un bloque unido a un resorte. El movimiento oscilante de una primavera a menudo incita una respuesta emocional juguetona y sincera de aquellos que lo observan. Como resultado, el movimiento de un resorte se traduce bien en la interfaz de usuario de la aplicación para quienes buscan crear una experiencia de movimiento más dinámica que sobresalga más al usuario final que un bezier cúbico tradicional. En estos casos, el movimiento de resorte no solo crea una experiencia de movimiento más dinámico, sino que también puede ayudar a llamar la atención al contenido nuevo o al que está siendo animado actualmente. Dependiendo de la personalización de marca o del lenguaje de movimiento de la aplicación, la oscilación es más pronunciada y visible, pero en otros casos es más sutil.

Uso de muelles en la interfaz de usuario

Como se mencionó anteriormente, springs puede ser un movimiento útil para integrar en la aplicación WinUI para introducir una experiencia de interfaz de usuario muy familiar y juguetona. El uso común de muelles en la interfaz de usuario son:

Descripción del uso de Spring	Ejemplo visual
Hacer que una experiencia de movimiento destaque y se vea más viva. (Animación de escala)
Hacer que una experiencia de movimiento se sienta sutilmente más energética (Offset de animación)

En cada uno de estos casos, el movimiento del resorte se puede desencadenar, ya sea al "saltar hacia" y oscilar alrededor de un nuevo valor, o al oscilar alrededor de su valor actual con cierta velocidad inicial.

Definición del movimiento del resorte

Puede crear una experiencia de spring mediante las API de NaturalMotionAnimation. En concreto, se crea una SpringNaturalMotionAnimation utilizando los métodos Create* del Compositor. A continuación, podrá definir las siguientes propiedades del movimiento:

• DampingRatio: expresa el nivel de amortiguación del movimiento de resorte utilizado en la animación.

Valor de relación de amortiguación	Descripción
DampingRatio = 0	Sin amortiguación: el resorte oscilará durante un largo tiempo.
0 < Proporción de amortiguamiento < 1	Subamortiguado: el muelle oscilará desde ligeramente hasta mucho.
DampingRatio = 1	Amortiguado críticamente: el muelle no realizará ninguna oscilación.
DampingRatio > 1	Sobreamortiguado: el resorte alcanzará rápidamente su posición final con una desaceleración abrupta y sin oscilación

• Período: el tiempo que tarda el resorte en realizar una sola oscilación.
• Valor final o inicial: las posiciones iniciales y finales definidas del movimiento de resorte (si no se definen, el valor inicial o el valor final serán valores actuales).
• Velocidad inicial: velocidad inicial mediante programación para el movimiento.

También puede definir un conjunto de propiedades del movimiento que son iguales que KeyFrameAnimations:

• Tiempo de Retraso / Comportamiento de Retraso
• StopBehavior

En los casos comunes de animación de desplazamiento y escala/tamaño, el equipo de diseño de Windows recomienda los valores siguientes para DampingRatio y Period para diferentes tipos de muelles:

Propiedad	Primavera normal	Resorte amortiguado	Resorte menos amortiguado
Desplazar	Relación de amortiguación = 0,8 Período = 50 ms	Relación de amortiguación = 0,85 Período = 50 ms	Relación de amortiguación = 0,65 Período = 60 ms
Escala y tamaño	Relación de amortiguación = 0,7 Período = 50 ms	Relación de amortiguación = 0,8 Período = 50 ms	Relación de amortiguación = 0,6 Período = 60 ms

Una vez que haya definido las propiedades, podrá pasar su "spring NaturalMotionAnimation" al método StartAnimation de un CompositionObject o a la propiedad Motion de un InteractionTracker InertiaModifier.

Ejemplo

En este ejemplo, se crea una experiencia de interfaz de usuario de navegación y lienzo en la que, cuando el usuario hace clic en un botón para desplegar, un panel de navegación se anima con un movimiento oscilante y eléctrico.

Comience definiendo la animación por resortes dentro del evento de clic para cuando aparezca el panel de navegación. A continuación, defina las propiedades de la animación mediante la característica InitialValueExpression para usar una expresión para definir finalValue. También realiza un seguimiento de si el panel está abierto o no y, cuando esté listo, inicie la animación.

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);
}

¿Y si quieres vincular este movimiento a la entrada? Entonces, si el usuario final desliza el dedo hacia afuera, ¿los paneles salen con un movimiento elástico? Lo más importante es que, si el usuario desliza el dedo más duro o más rápido, el movimiento se adapta en función de la velocidad del usuario final.

Para ello, puedes tomar nuestra misma animación spring y pasarla a un InertiaModifier con InteractionTracker. Para obtener más información sobre InputAnimations e InteractionTracker, consulte Experiencias de manipulación personalizadas con InteractionTracker. Se supone que en este ejemplo de código ya ha configurado InteractionTracker y VisualInteractionSource. Nos centraremos en la creación de los InertiaModifiers que tomarán una NaturalMotionAnimation, en este caso un resorte.

// 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);
}

Ahora tienes una animación de spring mediante programación y controlada por entrada en tu interfaz de usuario.

En resumen, los pasos para usar una animación spring en la aplicación:

1. Crea tu SpringAnimation fuera de tu Compositor.
2. Defina las propiedades de SpringAnimation si desea valores no predeterminados:
   • Relación de Amortiguamiento
   • Period
   • Valor final
   • Valor inicial
   • Velocidad inicial
3. Asignar a destino.
   • Si va a animar una propiedad CompositionObject, pase SpringAnimation como parámetro a StartAnimation.
   • Si desea usar con la entrada, establezca la propiedad NaturalMotion de un Objeto InertiaModifier en SpringAnimation.