Introducción a las Animaciones – Play Silverlight

Uno de los aspectos más interesantes  de Silverlight y que mejoran enormemente la experiencia del usuario son las animaciones. Las animaciones pueden aplicarse a cualquier propiedad de dependencia de un elemento de la interfaz de usuario (que herede de la clase UIElement).

Existen varios tipos de animaciones, cada una de las cuales está directamente relacionada con el tipo de propiedad que modifica. Así, si se quiere animar el cambio de color de fondo de un elemento utilizaremos una animación que genere valores de tipo Color, como es el caso de ColorAnimation y ColorAnimationUsingKeyFrames. Estos dos tipos tienen el mismo objetivo, modificar una propiedad de tipo Color, pero lo realizan de forma distinta.Este es otro de los aspectos a destacar de las animaciones ya que, por un lado, tenemos las de tipo Animation que permiten modificar una propiedad desde un valor inicial hasta un valor final, y por otro, las de tipo AnimationUsingKeyFrames que ofrecen un mayor control sobre la animación.

Animación Básica

Este tipo de animaciones se caracterizan por ejecutar una transición que afecta a una propiedad concreta modificandola de forma gradual entre dos valores en un tiempo determinado. Las propiedades que puede afectar la animación básica son de tipo Color, Double y Point. En el siguiente fragmento de código se muestra un ejemplo de animación básica en el que en se modifica el color de fondo de un elemento Grid que pasará de rojo a azul en 5 segundos.

<!-- Elemento afectado -->
<Grid>
      <Grid.Background>
            <SolidColorBrush x:Name="GridBackground" Color="Transparent" />
      </Grid.Background>
      .
      .
      .
</Grid>

<!-- Animación asociada -->
<ColorAnimation Storyboard.TargetName="GridBackground" Storyboard.TargetProperty="Color" From="Blue" To="Red" Duration="0:0:5"/>

Además de marcar los valores de inicio y final, también se puede aplicar un desplazamiento con resecto al valor actual de propiedad a modificar. Esto se lleva a cabo utilizando la propiedad By de la animación.

Animación Avanzada utilizando fotogramas clave

Este tipo de animaciones permite una mayor personalización del usuario ya que, además de permitir definir más de dos valores a adquirir por la propiedad afectada y en momento concreto en el que se producirá, nos da la posibilidad de decidir el método de interpolación a utilizar.

Los tipos de interpolación son los siguientes:

  • Lineal. Este tipo de interpolación se caracteriza por cambiar la propiedad afectada de forma constante, siempre al mismo ritmo. En el caso de marcar solo dos puntos clave, el comportamiento sería análogo al de la animación básica.
  • Discreta. En este tipo, el cambio entre dos fotogramas clave se realiza de forma inmediata. Aunque con este tipo de interpolación no se consigue una animación suave controlada, su existencia se basa en la necesidad de mantener un valor durante un tiempo determinado y al ser la única manera de modificar propiedades que no sean de tipo Color, Double o Point (ObjectAnimationsUsingKeyFrames).
  • Spline (Utilizando curvas de Bezier). Este método permite definir el ritmo con el que cambia la propiedad utilizando curvas de Bezier.

Además, para facilitar el uso de animaciones, a partir de Silverlight 3, se proporcionan una serie de animaciones con las que conseguir animaciones interesantes. Se puede encontrar un listado de ellas aquí.

En el siguiente fragmento de código se muestra una animación en la que se utilizan los tres tipos de interpolación vistos y una de las animaciones que vienen por defecto, la de rebote.


<Storyboard>
     <ColorAnimationUsingKeyFrames
	Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
	Storyboard.TargetName="LayoutRoot">
             <LinearColorKeyFrame KeyTime="0:0:3" Value="Blue"/>
             <DiscreteColorKeyFrame KeyTime="0:0:6" Value="Green"/>
             <SplineColorKeyFrame KeyTime="0:0:9" Value="Red" KeySpline="0,0,1,0"/>
             <EasingColorKeyFrame KeyTime="0:0:15" Value="Yellow">
                  <EasingColorKeyFrame.EasingFunction>
                       <BounceEase Bounces="3" EasingMode="EaseIn" Bounciness="2"/>
                  </EasingColorKeyFrame.EasingFunction>
             </EasingColorKeyFrame>
      </ColorAnimationUsingKeyFrames>
</Storyboard>

La animación que se muestra se inicia modificando el valor de la propiedad Color de forma gradual hasta ser azul en segundo 3. A continuación, haciendo uso del tipo de interpolación discreta, se mantendrá el colo azul otros 3 segundos e inmediatamente pasará a ser verde. Después, utilizando la interpolación por curvas de Bezier, se pasará de verde a rojo, empezando de forma lenta y acelerándose al final. La animación finalizará con un efecto rebote que terminará con el color amarillo.

Hasta aquí esta introducción, en próximas entradas produndizaré en ello.

Snippet

ColorAnimationUsingKeyFrames
Anuncios
Esta entrada fue publicada en Animaciones, Silverlight y etiquetada , , . Guarda el enlace permanente.

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