Animaciones de muelle
En el artículo se muestra cómo usar spring NaturalMotionAnimations.
Requisitos previos
En este caso, se supone que está familiarizado con los conceptos descritos en estos artículos:
¿Por qué resortes?
Springs es una experiencia de movimiento común que todos hemos experimentado en algún momento de nuestra vida; desde juguetes vinculados a experiencias físicas con un bloque de muelles. 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 traduce bien en la interfaz de usuario de la aplicación para aquellos que buscan crear una experiencia de movimiento más dinámica que "pop" más al usuario final que un bezier cúbico tradicional. En estos casos, el movimiento spring no solo crea una experiencia de movimiento más dinámico, sino que también puede ayudar a llamar la atención a contenido nuevo o actualmente animado. 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 una experiencia de movimiento "pop" y looklier. (Animar escala) |  |
| Hacer que una experiencia de movimiento se sienta subtmente más energética (Desplazamiento de animación) | |
En cada uno de estos casos, el movimiento de resorte se puede desencadenar mediante el "resorte hacia" y oscilando alrededor de un nuevo valor o oscilando alrededor de su valor actual con cierta velocidad inicial.
Definición del movimiento de la primavera
Puede crear una experiencia de spring mediante las API de NaturalMotionAnimation. En concreto, se crea una SpringNaturalMotionAnimation mediante los métodos Create* de 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 marca: el muelle oscilará durante mucho tiempo. |
| 0 < DampingRatio < 1 | Infradampado: el muelle oscilará de un poco a un montón. |
| DampingRatio = 1 | Crítico: el muelle no realizará ninguna oscilación. |
| Amortiguación > 1 | Sobredampado: el muelle llegará rápidamente a su destino 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:
- DelayTime/Delay Behavior
- 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 | Muelle húmedo | Muelle menos húmedo |
|---|---|---|---|
| Desplazamiento | 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, puede pasar su spring NaturalMotionAnimation al método StartAnimation de un CompositionObject o 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 de expansión, se anima un panel de navegación con un movimiento de oscilación y primavera.
Comience definiendo la animación de primavera dentro del evento clicked 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 quisieras vincular este movimiento a la entrada? Entonces, si el usuario final desliza el dedo hacia afuera, ¿los paneles salen con un movimiento spring? 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 InerciaModifiers que tomarán una NaturalMotionAnimation, en este caso un muelle.
// 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:
- Crea tu SpringAnimation fuera de tu Compositor.
- Defina las propiedades de SpringAnimation si desea valores no predeterminados:
- DampingRatio
- Período
- Valor final
- Valor inicial
- Velocidad inicial
- Asignar al 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.