Animaciones de primavera

En el artículo se muestra cómo usar spring NaturalMotionAnimations.

Prerrequisitos

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

• animaciones de movimiento natural

¿Por qué resortes?

Los resortes son una experiencia de movimiento común que todos hemos experimentado en algún momento de nuestra vida; desde los juguetes Slinky hasta las experiencias en el aula de física con un bloque atado 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 muelle se adapta bien a la interfaz de usuario de la aplicación para aquellos que buscan crear una experiencia de movimiento más dinámica, que destaque más para el usuario final que un Bezier cúbico tradicional. En estos casos, el movimiento por resorte no solo crea una experiencia de movimiento más dinámica, sino que también puede ayudar a llamar la atención sobre contenido nuevo o en animación. 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 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 animada. (Animar escala)
Hacer que una experiencia de movimiento se sienta subtmente más energética (Desplazamiento de animación)	de animación de resorte

En cada uno de estos casos, el movimiento del resorte se puede desencadenar ya sea moviéndose hacia un nuevo valor y oscilando alrededor de él, o bien oscilando 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. Específicamente, se crea una SpringNaturalMotionAnimation mediante 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.

• 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 con respecto a diferentes tipos de resortes:

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

Ejemplo

En este ejemplo, creas una experiencia de interfaz de usuario de navegación y gráfico en la que, cuando el usuario hace clic en un botón para expandir, se anima un panel de navegación con un movimiento oscilante y elástico.

animación

Comience definiendo la animación de resorte 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);
}

¿Qué pasaría si quisieras vincular este movimiento a la entrada? Entonces, si el usuario final desliza el dedo hacia afuera, ¿los paneles salen con un movimiento de resorte? 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.

animación

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 Modificadores de Inercia que tomarán una Animación de Movimiento Natural, en este caso un resorte.

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

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 a partir de tu Compositor.
2. Defina las propiedades de SpringAnimation si desea valores no predeterminados:
   • Relación de amortiguamiento
   • Período
   • Valor final
   • Valor inicial
   • Velocidad inicial
3. Asignar al objetivo.
   • 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.