[Windows 8] Animaciones

Posted on


Artículo escrito por: Néstor Fernández.

Twitter: @xamlparaadeptos

VIDA PARA UNA INTERFACE

Para XAML una animación consiste en cambiar el valor de una propiedad a través del tiempo. Si se desea que un control se desplace a través de la pantalla todo lo que debemos hacer es aplicarle una animación a la propiedad que de alguna manera altera sus coordenadas (X,Y) y así dar la impresión de movimiento. Si queremos que cambie de color entonces aplicamos una animación sobre la propiedad que le defina uno o algunos de sus colores. Así de simple.

ANATOMIA DE UNA ANIMACIÓN

Animations

Toda animación debe estar coordinada por un objeto Storyboard. El Storyboard se encarga de lanzar, pausar y detener una o varias animaciones.

Los objetos Animation son los realmente encargados de ejecutar las animaciones. Estos son los que debemos apuntar hacia la propiedad que queremos animar (cambiar su valor a través del tiempo). Se pueden animar propiedades para tres tipos de datos: Double (DoubleAnimation), Color (ColorAnimation) y Point (PointAnimation).

Opcionalmente una animación puede referenciar un objeto del tipo Easing Function, lo que modifica la animación de modo que el cambio del valor de la propiedad ya no es constante pues utiliza fórmulas matemáticas que aplican cambios como aceleración, desaceleración o incluso efectos de rebote.

DEFINIENDO UNA ANIMACIÓN

Ya teniendo claro lo que compone una animación revisemos un poco los parámetros que podemos utilizar para configurarla:

Objeto Storyboard
  • Name: Nombre del storyboard si es colocado dentro de un diccionario de recursos. Dado que en Metro todas las animaciones deben ser iniciadas en código y no en XAML, es preferible utilizar la propiedad Name y no Key, pues tendremos un acceso más fácil a éste desde código.

El Storyboard cuenta con el método Begin(), encargado de ejecutar las animaciones. Este es el método que debemos invocar por código para tal efecto.

Objeto Animation
  • Storyboard.TargetName: Nombre del objeto que contiene la propiedad que se desea animar.
  • Storyboard.TargetProperty: Nombre de la propiedad del objeto, definido en TargetName, que se desea animar.
  • From: Opcional (valor por defecto "0"). Valor inicial de la animación.
  • To: Opcional (valor por defecto "0"). Valor final absoluto de la animación.
  • By: Opcional (valor por defecto "0"). Valor final relativo al valor actual de la propiedad. Ejemplo: Si el valor actual de la propiedad es 20 y By se define como 10, el valor final de la animación será 30 (20 + 10). Si se definen las propiedad "By" y "To" se ignora "By".
  • RepeatBehavior: Opcional (valor por defecto "1x"). Número de veces que se repite la animación. Ejemplo: Para que la animación se ejecute una vez el valor es "1x", que es el valor por defecto. Para que se repita 12 veces: "12x" (la "x" se requiere y no es opcional). Para repetir la animación sin fin: "forever".
  • Duration: Duración de la animación, esto es, cuanto se tardará en llevar la propiedad desde un valor inicial a uno final. Ejemplo: Para que la animación tarde 1 hora, 3 minutos y 7 segundos y medio: "1:3:7.5".
  • BeginTime: Opcional (valor por defecto "0:0:0"). Define una pausa de tiempo que la animación debe esperar antes de comenzar. Ejemplo: Para que la animación espere 2 segundos antes del iniciar: "0:0:2".
  • AutoReverse: Opcional (valor por defecto "false"). Define si se lleva la propiedad desde un valor inicial a uno final únicamente (falso), o si al finalizar se ejecuta en reversa (verdadero).
  • SpeedRatio: Opcional. Multiplicador de velocidad de la animación. Ejemplo: Si deseamos que la animación se ejecute al doble de velocidad: "2". Si queremos que se ejecute a la mitad de la velocidad: "0.5".
  • FillBehavior: Opcional. Define el comportamiento de la animación cuando finaliza. Se puede especificar uno de dos valores:
    • HoldEnd: Valor por defecto. La animación mantiene la propiedad con el valor final alcanzado.
    • Stop: La propiedad regresa al valor original que tenía antes de ejecutarse la animación.
Objeto Easing Function

Metro expone 11 tipos de easing function para casi cualquier necesidad. En este link se puede ver con ejemplos en línea como cada una de estas funciones altera una animación del tipo DoubleAnimation. Aunque es una página creada con Silverlight, todos los ejemplos aplican perfectamente para el entorno Metro.

EJEMPLOS

Para los siguientes ejemplo utilizaremos como base una página con un control Ellipse:

   1:  <StackPanel Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
   2:      <Ellipse x:Name="Elipse"
   3:          HorizontalAlignment="Left"
   4:          Width="100"
   5:          Height="100"
   6:          Fill="Red">
   7:          <Ellipse.RenderTransform>
   8:              <TranslateTransform x:Name="Transformacion" />
   9:          </Ellipse.RenderTransform>
  10:      </Ellipse>
  11:  </StackPanel>

EJEMPLO 1

Este Storyboard lanza una animación que desplaza (mueve) la elipse desde su punto actual hasta 200 puntos a la derecha durante 2 segundos:

   1:  <Storyboard x:Key="MiStoryboard">
   2:      <DoubleAnimation 
   3:          Storyboard.TargetName="Transformacion"
   4:          Storyboard.TargetProperty="X"
   5:          By="200"
   6:          Duration="0:0:2" />
   7:  </Storyboard>

EJEMPLO 2

En este ejemplo simulamos un balón que cae y rebota 5 veces (por dos segundos) antes de detenerse.

Nótese el uso de la propiedad "Bounces" en el easing function "BounceEase". Cada easing function altera de forma diferente la animación y por lo tanto no es de extrañar que cada una implemente sus propias propiedades.

   1:  <Storyboard x:Key="MiStoryboard">
   2:      <DoubleAnimation
   3:          Storyboard.TargetName="Transformacion"
   4:          Storyboard.TargetProperty="Y"
   5:          By="200"
   6:          Duration="0:0:2">
   7:          <DoubleAnimation.EasingFunction>
   8:              <BounceEase Bounces="5" />
   9:          </DoubleAnimation.EasingFunction>
  10:      </DoubleAnimation>
  11:  </Storyboard

Ejemplo 3

Aquí cambiamos el color de la elipse de rojo (From) a amarillo (To) tres veces (RepeatBehavoir), la animación avanza y se regresa (AutoReverse) y dura un segundo (Duration) cada repetición:

   1:  <Storyboard x:Key="MiStoryboard">
   2:    <ColorAnimation Storyboard.TargetName="Elipse"
   3:                    Storyboard.TargetProperty="Fill.Color"
   4:                    AutoReverse="True"
   5:                    RepeatBehavior="3x"
   6:                    From="Red"
   7:                    To="Yellow"
   8:                    Duration="0:0:1">
   9:    </ColorAnimation>
  10:  </Storyboard>

Obsérvese la sintaxis para el valor de "Storyboard.TargetProperty". La razón para el uso de los paréntesis se debe a que la propiedad "Fill" recibe un objeto tipo Bruch (brucha), y en XAML hay varios tipos de brochas (SolidColorBrush, GradientBrush, etc). Cuando una propiedad puede recibir varios tipos de datos, como en este caso, 

PARA SABER MÁS… Create Your Own Animations

Un comentario sobre “[Windows 8] Animaciones

    Resumen Post 2012 « Todo en ASP.NET escribió:
    12/19/2012 en 22:05

    […] [Windows 8] Animaciones […]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s