Animaciones de movimiento natural

En este artículo se proporciona una breve introducción al espacio NaturalMotionAnimation y cómo pensar conceptualmente en el uso de estos tipos de animaciones en la interfaz de usuario.

Hacer que el movimiento se sienta familiar y natural

Las aplicaciones excelentes son aquellas que crean experiencias que capturan y conservan la atención del usuario, y ayudan a guiar a los usuarios a través de tareas. El movimiento es el factor diferenciador clave que separa una interfaz de usuario de una experiencia de usuario, lo que provoca una conexión entre los usuarios y la aplicación con la que interactúan. Cuanto mejor sea la conexión, mayor compromiso y satisfacción de los usuarios finales.

Un movimiento de una manera puede ayudar a crear esta conexión es mediante la creación de experiencias que parecen familiares para los usuarios. Los usuarios tienen una expectativa inconsciente de cómo perciben el movimiento basado en experiencias reales de la vida. Vemos cómo los objetos se deslizan por el suelo, caen de la mesa, rebotan entre sí y oscilan con un muelle. Movimiento que aprovecha esta expectativa al basarse en apariencias físicas del mundo real y se siente más natural en nuestros ojos. El movimiento se vuelve más natural e interactivo, pero más importante, toda la experiencia se vuelve más memorable y encantadora.

El resultado neto es mayor participación y retención del usuario con la aplicación.

Control de equilibrio y dinamismo

En la interfaz de usuario tradicional, KeyFrameAnimations es la manera predominante de describir el movimiento. Los fotogramas clave proporcionan el mayor control a los diseñadores y desarrolladores para definir el inicio, el final y la interpolación. Aunque esto es muy útil en muchos casos, las animaciones de fotograma clave no son muy dinámicas; el movimiento no es adaptable y tiene el mismo aspecto en cualquier condición.

En el otro extremo del espectro, hay simulaciones que a menudo se ven en los motores de juegos y físicas. Estas experiencias suelen ser las más similares a la vida y dinámicas con las que interactúan los usuarios, creando ese sentido de ambiente y aleatoriedad que ven los usuarios todos los días. Aunque esto hace que el movimiento se sienta más vivo y dinámico, los diseñadores y desarrolladores tienen menos control, por lo que resulta más difícil integrarlo en la interfaz de usuario tradicional.

NaturalMotionAnimations existe para ayudar a salvar esta división, lo que permite un equilibrio de control para los elementos importantes de una animación como el inicio y el fin, pero manteniendo el movimiento que se ve y se siente natural y dinámico.

Nota:

NaturalMotionAnimations no están diseñados como reemplazo de animaciones de fotograma clave: todavía hay lugares en el lenguaje de diseño fluent donde se recomiendan los fotogramas clave. NaturalMotionAnimations están diseñados para usarse en lugares donde se requiere movimiento, pero las animaciones de fotograma clave no son lo suficientemente dinámicas.

Uso de NaturalMotionAnimations

A partir de Fall Creators Update, tienes acceso a una nueva experiencia de movimiento: animaciones spring. Consulta Animaciones de spring para obtener un tutorial más detallado de muelles .

Este tipo de movimiento se logra mediante el nuevo NaturalMotionAnimation, un nuevo tipo de animación centrado en permitir a los desarrolladores crear movimiento más familiar y natural en su interfaz de usuario, con un equilibrio de control y dinamismo. Exponen las siguientes funcionalidades:

• Defina los valores inicial y final.
• Defina InitialVelocity y vinvíe a la entrada con InteractionTracker.
• Definir propiedades específicas del movimiento (como DampingRatio para muelles).

Fórmula general para empezar:

1. Cree naturalMotionAnimation fuera del compositor mediante uno de los métodos Create .
2. Defina las propiedades de la animación.
3. Pase NaturalMotionAnimation como parámetro a la llamada StartAnimation de un objeto CompositionObject.
   • O bien, establezca en la propiedad Motion de un InteractionTracker InertiaModifier.

Un ejemplo básico mediante un spring NaturalMotionAnimation para crear un objeto Visual "spring" en una nueva ubicación de desplazamiento X:

_springAnimation = _compositor.CreateSpringScalarAnimation();
_springAnimation.Period = TimeSpan.FromSeconds(0.07);
_springAnimation.DelayTime = TimeSpan.FromSeconds(1);
_springAnimation.EndPoint = 500f;
sectionNav.StartAnimation("Offset.X", _springAnimation);