Continuamos por nuestro pequeño tutorial de animaciones. En esta ocasión vamos a ver un poco más a fondo los atributos que podemos modificar para darle a nuestra animación el toque que queramos.

En el post anterior usamos From y To para definir de donde a donde iba a variar el valor de la propiedad. También contamos con el atributo By, el cual es muy útil cuando no sabemos el valor actual de la propiedad que estamos cambiando. A By le podemos especificar por cuánto queremos variar el valor del atributo. Números positivos para aumentar y números negativos para disminuir.

Para efectos de rapidez y espacio, reutilizaremos el mismo code-behind en todos los ejemplos de este post y solo variaremos el XAML:

Code behind:

namespace Animaciones2._1

{

    public partial class Page : UserControl

    {

        public Page()

        {

            InitializeComponent();

            circulo.MouseLeftButtonUp += new MouseButtonEventHandler(circulo_MouseLeftButtonUp);

        }

        void circulo_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

        {

            guion.Begin();

        }

    }

}

XAML:

<UserControl x:Class="Animaciones2._1.Page"

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

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

             Width="100"

             Height="100">

    <UserControl.Resources>

        <Storyboard x:Name="guion">

            <DoubleAnimation Storyboard.TargetName="circulo"

                             Storyboard.TargetProperty="width"

                             By="-50" />

        </Storyboard>

    </UserControl.Resources>

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

        <Ellipse x:Name="circulo"

                 Width="100"

                 Height="100"

                 Fill="Azure"/>

    </Grid>

</UserControl>

Resultado:

Ahora bien, podemos observar que si damos clic sobre el círculo para comenzar la animación 2 veces, éste desaparecerá, o mejor dicho, tendrá un ancho de 0px. Podemos tomar diferentes caminos para evitar esto:

• Podemos agregar el atributo From para establecer un valor inicial de la propiedad.
• Podemos poner en True el atributo AutoReverse, esto hará que la animación se vaya en reversa cuando termine.
• Podemos usar FillBehavior para decirle que hacer a la animación cuando termine. Este atributo acepta dos valores:
  • HoldEnd: es el valor predeterminado e indica que la propiedad modificada se quedará en el mismo estado en que termina la animación.
  • Stop: indica que la animación debe ser detenida por completo por lo que las propiedades modificadas regresan a su estado original.

Otro atributo útil para controlar la animación es BeginTime. Con él podemos decirle a nuestra animación en qué momento empezar. Por ejemplo, si tenemos dos DoubleAnimation en un mismo Storyboard, podemos indicarle a una de ellas que comience cuando termine la otra. Podemos observar esto modificando el Storyboard del ejemplo de la siguiente manera:

<Storyboard x:Name="guion"

            AutoReverse="True">

        <DoubleAnimation Storyboard.TargetName="circulo"

                         Storyboard.TargetProperty="width"

                         By="-50" />

        <DoubleAnimation Storyboard.TargetName="circulo"

                         Storyboard.TargetProperty="height"

                         By="-50"

                         BeginTime="0:0:1"/>

</Storyboard>

Así obtenemos:

Otro atributo que nos permite jugar con nuestra animación es SpeedRatio, la cuál nos permite variar la velocidad con que se ejecuta la animación. Para ir más rápido usa valores arriba del 1, para ir mas lento usa valores entre el 0 y el 1 (el 0 no es un valor válido, pero podemos usar 0.1 o 0.01, etc…).

Finalmente, RepeatBehaviour permite indicar el número de veces que se repetirá la animación. Podemos indicar un número entero seguido de la letra “x” (Por ejemplo, 2x, 5x, etc.) o podemos especificar “forever” que repetirá la animación hasta que se detenga específicamente por ejemplo, usando el método Stop() del Storyboard.

Es importante recalcar que AutoReverse, BeginTime, Duration, FillBehavoir, RepeatBehavior y SpeedRatio son propiedades de la clase Timeline, de la cual heredan Storyboard, DoubleAnimation, ColorAnimation, etc. Esto significa que las podemos definir a nivel Storyboard o individualmente en cada animación del Storyboard.

Este tipo de animaciones se conoce como From/To/By. Les recomiendo experimentar con estos atributos para que se den una idea de lo que pueden hacer con ellos.

En el próximo post conoceremos otro tipo de animaciones conocido como Key-Frame, el cuál nos da mucho poder ya que podemos definir el estado del objeto en un momento determinado y como queremos que cambie en otro momento. Silverlight se encarga de interpolar los valores por nosotros para crear el efecto de animación. ¡Hasta la próxima!