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 instantáneamente. En la plataforma Windows, la primera se prefiere sobre la última: experiencias de usuario que cambian instantáneamente a menudo confunden y sorprenden a los usuarios finales porque no pueden seguir lo que ha ocurrido. A continuación, el usuario final percibe la experiencia como chocante 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 Windows, esto se realiza mediante animaciones basadas en tiempo, también conocidas como KeyFrameAnimations. KeyFrameAnimations te permite cambiar una interfaz de usuario a lo largo del tiempo y controlar cada aspecto de la animación, incluido cómo y cuándo se inicia y cómo llega a su estado final. Por ejemplo, animar un objeto a una nueva posición en 300 milisegundos es más agradable que "teletransportarlo" instantáneamente allí. Al usar 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 puedes usar para crear hermosas experiencias de usuario en Windows:

Animaciones explícitas : como indica el nombre, 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.

Para animaciones basadas en tiempo explícitas e implícitas, hay diferentes tipos, correspondientes 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, veamos algunos conceptos.

• Fotogramas clave – Estas son las "instantáneas" individuales a través de las cuales se animará una animación.
  • Se define como pares clave y valor. La clave representa el progreso entre 0 y 1, es decir, el punto en el tiempo de la animación en el que esta "instantánea" se produce. El otro parámetro representa el valor de propiedad en este momento.
• Propiedades KeyFrameAnimation: opciones de personalización que puede 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.
  • Duración: duración de la animación.
  • IteraciónBehavior: comportamiento de repetición infinito o recuento para una animación.
  • IteraciónCount: número de veces finitas que se repetirá una animación de fotograma clave.
  • Recuento de fotogramas clave: lectura de cuántos fotogramas clave hay en 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, veamos la fórmula general para construir una keyframeAnimation:

1. Identifique compositionObject y su propiedad respectiva que necesita animar.
2. Cree una plantilla de tipo KeyFrameAnimation del compositor que coincida con el tipo de propiedad que desea animar.
3. Con la plantilla de animación, comience 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 el objeto CompositionObject, apuntando a la propiedad que desea animar. En concreto:
   • visual.StartAnimation("targetProperty", CompositionAnimation animation);
   • visual.StartAnimationGroup(AnimationGroup animationGroup);
5. Si tiene una animación en ejecución y desea detener la animación o el grupo de animaciones, puede usar 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, quieres animar el desplazamiento de un objeto visual de <0,0,0> a <200,0,0> durante 1 segundo. Además, desea ver la animación visual entre estas posiciones 10 veces.

Primero, identifique el CompositionObject y la propiedad que desea animar. En este caso, el cuadrado rojo se representa mediante un objeto visual de composición denominado redVisual. Inicias 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, definir las propiedades de KeyFrameAnimation para describir su duración junto con el comportamiento para animar entre las dos posiciones (actual 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);
}