Un gran recurso para enriquecer la experiencia del usuario son las animaciones. Ya sean decorativas o interactivas, las animaciones realzan el aspecto visual de tu interfaz y pueden atraer la atención del usuario de forma fácil. Para los que no pudieron asistir a la 2da reunión prescencial de La Liga Silverglight, aquí les dejo un poco de lo que se expuso.

En Silverlight, las animaciones consisten en modificar propiedades de objetos. Dichas modificaciones ocurren sobre un periodo de tiempo. Este cambio de valor de una propiedad sobre un período de tiempo forma el efecto de animación ante el ojo humano.

¿Qué necesitamos para hacer una animación?

Básicamente necesitamos 3 cosas:

• El tipo de animación (DoubleAnimation, ColorAnimation, etc…)
• El Storyboard (el guión de nuestra animación)
• Un evento que inicie la animación

Veamos un ejemplo rápido de un rectángulo que se desvanece cuando le damos clic:

Page.xaml

<UserControl x:Class="AnimacionesDemo1.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

    <UserControl.Resources>

        <Storyboard x:Name="rectangulea" >

            <DoubleAnimation From="1.0"

                             To="0.0"

                             Duration="0:0:1"

                             AutoReverse="True"

                             Storyboard.TargetName="rectangulo"

                             Storyboard.TargetProperty="Opacity" />

        </Storyboard>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">

        <Rectangle x:Name="rectangulo"

                   Width="100"

                   Height="100"

                   Fill="Green"  />

    </Grid>

</UserControl>

Page.xaml.cs

namespace AnimacionesDemo1

{

    public partial class Page : UserControl

    {

        public Page()

        {

            InitializeComponent();

            rectangulo.MouseLeftButtonUp += new MouseButtonEventHandler(rectangulo_MouseLeftButtonUp);

        }

        void rectangulo_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

        {

            this.rectangulea.Begin();

        }

    }

}

Aquí tenemos el resultado:

Vamos explicando un poco el proceso. Primero tenemos el rectángulo, lo importante aquí es que nuestro elemento a animar debe estar nombrado para que lo podramos referenciar.

Después necesitamos un Storyboard. Toda animación necesita de un Storyboard ya que es este el elemento desde donde podemos iniciar, detener, pausar o lo que necesitemos hacer con la animación. Un storyboard puede contener una o varias animaciones.

A continuación tenemos la DoubleAnimation, esta es la que tiene el qué y el quién de la animación. Por medio de las dos propiedades adjuntas Storyboard.TargetName y Storyboard.TargetProperty definimos qué objecto y qué propiedad del objeto vamos a animar. En este caso vamos a trabajar con el objeto de nombre “rectangulo” y su propiedad Opacity. Esta propiedad acepta valores del 0.0 al 1.0 y represente el porcentaje de opacidad del objeto (1.0 es color sólido y 0.0 es totalmente transparente). Los atributos From, To y Duration indican que el valor de la propiedad irá de 1.0 a 0.0 en 1 segundo. Finalmente, AutoReverse es para indicar que el objeto regresará a su estado original (ejecutando la animación en reversa) una vez que esta haya terminado.

Una vez que tenemos terminado el Storyboard procedemos a definir el momento en que se ejecutará. En este ejemplo, agregaremos un manejador al evento MouseLeftButtonUp. En el manejador de dicho evento todo lo que tenemos que hacer es invocar el método Begin() de nuestro Storyboard.

¡Y listo! tenemos nuestra primera animación el Silverlight. En las próximas semanas estaré tocando más a fondo este interesante tema. Cualquier duda, comentario o sugerencia que tengan sobre este y otro temas no duden en dejar un comentario o escribirme a Arturo.Molina@ligasilverlight.com