Animaciones basadas en tiempo

Cuando cambia un componente o una experiencia de usuario completa, los usuarios finales suelen observarlo de dos maneras: a lo largo del tiempo o de forma instantánea. En la plataforma de Windows, es preferible la primera que la última: las experiencias de usuario que cambian al instante a menudo confunden y sorprenden a los usuarios finales porque no son capaces de seguir el proceso de lo que sucedió. A continuación, el usuario final percibe la experiencia como discordante y antinatural.

En su lugar, puede cambiar la interfaz de usuario a lo largo del tiempo para guiar al usuario final a través de o notificarle los cambios en la experiencia. En la plataforma de Windows, esto se hace mediante animaciones basadas en tiempo, también conocidas como KeyFrameAnimations. KeyFrameAnimations le permite cambiar una interfaz de usuario a lo largo del tiempo y controlar cada aspecto de la animación, lo que incluye cómo y cuándo se inicia y cómo alcanza su estado final. Por ejemplo, animar un objeto a una nueva posición de más de 300 milisegundos es más agradable que "teletransportar" al instante allí. Cuando se usan animaciones en lugar de cambios instantáneos, el resultado neto es una experiencia más agradable y atractiva.

Tipos de animaciones basadas en tiempo

Hay dos categorías de animaciones basadas en tiempo que puede utilizar para crear hermosas experiencias de usuario en Windows:

Animaciones explícitas: como el nombre lo indica, se inicia explícitamente la animación para realizar actualizaciones. Animaciones implícitas: el sistema inicia estas animaciones en su nombre cuando se cumple una condición.

En este artículo, analizaremos cómo crear y usar animaciones explícitas basadas en tiempo con KeyFrameAnimations.

En el caso de animaciones basadas en tiempo explícitas e implícitas, hay diferentes tipos, que corresponden a los diferentes tipos de propiedades de CompositionObjects que se pueden animar.

• ColorKeyFrameAnimation
• QuaternionKeyFrameAnimation
• ScalarKeyFrameAnimation
• Vector2KeyFrameAnimation
• Vector3KeyFrameAnimation
• Vector4KeyFrameAnimation

Crear animaciones basadas en tiempo con KeyFrameAnimations

Antes de describir cómo crear animaciones explícitas basadas en tiempo con KeyFrameAnimations, vamos a repasar algunos conceptos.

• Fotogramas clave: son las "instantáneas" individuales a las que se le dará movimiento a una animación.
  • Se define como pares clave-valor. La clave representa el progreso entre 0 y 1, es decir, en qué parte de la duración de la animación se realiza esta "instantánea". El otro parámetro representa el valor de propiedad en este momento.
• Propiedades KeyFrameAnimation: opciones de personalización que se pueden aplicar para satisfacer las necesidades de la interfaz de usuario.
  • DelayTime: tiempo antes de que se inicie una animación después de llamar a StartAnimation.
  • Duration: duración de la animación.
  • IterationBehavior: recuento o comportamiento infinito de repetición para una animación.
  • IterationCount: número de veces finitas que se repetirá una animación de fotograma clave.
  • Recuento de fotogramas clave: lee el número de fotogramas clave de una animación de fotograma clave determinada.
  • StopBehavior: especifica el comportamiento de un valor de propiedad de animación cuando se llama a StopAnimation.
  • Dirección: especifica la dirección de la animación para la reproducción.
• Grupo de animaciones: iniciando varias animaciones al mismo tiempo.
  • A menudo se usa al querer animar varias propiedades al mismo tiempo.

Para obtener más información, consulta CompositionAnimationGroup.

Teniendo en cuenta estos conceptos, vamos a hablar de la fórmula general para crear una KeyFrameAnimation:

1. Identifique CompositionObject y la respectiva propiedad que debe animar.
2. Cree una plantilla de tipo de KeyFrameAnimation del compositor que coincida con el tipo de propiedad que desea animar.
3. Con la plantilla de animación, empiece a agregar fotogramas clave y definir las propiedades de la animación.
   • Se requiere al menos un fotograma clave (el fotograma clave 100 % o 1f).
   • También se recomienda definir una duración.
4. Una vez que esté listo para ejecutar esta animación, llame a StartAnimation(...) en CompositionObject, con el destino de la propiedad que desea animar. En concreto:
   • visual.StartAnimation("targetProperty", CompositionAnimation animation);
   • visual.StartAnimationGroup(AnimationGroup animationGroup);
5. Si tienes una animación en ejecución y quiere detener la animación o el grupo de animaciones, puede utilizar estas API:
   • visual.StopAnimation("targetProperty");
   • visual.StopAnimationGroup(AnimationGroup AnimationGroup);

Echemos un vistazo a un ejemplo para ver esta fórmula en acción.

Ejemplo

En este ejemplo, quiere animar el desplazamiento de un objeto visual de <0,0,0> a <200,0,0> por encima de 1 segundo. Además, quiere ver el objeto visual animado entre estas posiciones 10 veces.

En primer lugar, debe identificar CompositionObject y la propiedad que desea animar. En este caso, el cuadrado rojo se representa mediante un objeto visual de composición denominado redVisual. Se inicia la animación a partir de este objeto.

A continuación, dado que desea animar la propiedad Offset, debe crear un Vector3KeyFrameAnimation (Offset es de tipo Vector3). También se definen los fotogramas clave correspondientes para KeyFrameAnimation.

    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));

A continuación, defina las propiedades de KeyFrameAnimation para describir su duración junto con el comportamiento de animación entre las dos posiciones (actuales y <200.0,0>) 10 veces.

    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Windows.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;

Por último, para ejecutar una animación, debe iniciarla en una propiedad de CompositionObject.

redVisual.StartAnimation("Offset", animation);

Este es el código completo.

private void AnimateSquare(Compositor compositor, SpriteVisual redVisual)
{ 
    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));
    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Windows.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;
    redVisual.StartAnimation("Offset", animation);
}