Home > MVA, Tutoriales, WP7 > Animaciones

Animaciones

Animaciones

Este artículo es una traducción del artículo original encontrado en: http://create.msdn.com/en-US/education/quickstarts/Animations.

En Silverlight para Windows Phone 7, las animaciones pueden mejorar tus aplicaciones mediante la adición de movimiento y la interactividad.  A través de la animación del color de un fondo o la animación de una transformación, puedes crear transiciones de pantalla espectaculares o proporcionar indicaciones visuales útiles. Este tutorial te muestra cómo crear animaciones básicas al cambiar los valores de las propiedades y mediante recuadros.

Este tutorial contiene las siguientes secciones:

  • Animando una propiedad Double
  • Animando una propiedad Color
  • Iniciando, Deteniendo, Pausando y Reanudando
  • Animando usando Recuadros
  • Animando usando Funciones de Suavización

Nota

En estos ejemplos se utiliza Silverlight en el navegador para simular el comportamiento para Windows Phone. El comportamiento real puede ser ligeramente diferente en el emulador de Windows Phone o en un dispositivo Windows Phone

Animando una propiedad Double

Las animaciones en Silverlight para Windows Phone son creadas a través de la animación de los valores de las propiedades en los objetos. Por ejemplo, puedes animar el Width (ancho) de un Rectangle, el ángulo de un RotateTransform, o el valor del color de un Button.

Get Microsoft Silverlight

XAML

<StackPanel >

<StackPanel.Resources>

<!– Anima a la opacidad del rectángulo–>

<Storyboard x:Name="myStoryboard">

<DoubleAnimation

Storyboard.TargetName="MyAnimatedRectangle"

Storyboard.TargetProperty="Opacity"

From="1.0" To="0.0" Duration="0:0:1"

AutoReverse="True"

</Storyboard>

</StackPanel.Resources>

<Rectangle MouseLeftButtonUp="Rectangle_Tapped"

x:Name="MyAnimatedRectangle"

Width="300" Height="200" Fill="Blue" />

</StackPanel>

 

C#

 

/ / Cuando el usuario pulsa el rectángulo, la animación

/ / Comienza.

 private void Rectangle_Tapped(object sender, MouseEventArgs e)

{

myStoryboard.Begin();

}

 

En las siguientes secciones se describen los pasos para animar la propiedad Opacity  y examinar el código XAML que se utiliza para cada paso.

 

Identificando la propiedad para animar

En este ejemplo estás animando la propiedad Opacity de un Rectangle.  No tienes que declarar la propiedad que deseas animar en el objeto en sí.  Sin embardo, típicamente nombras el objeto que quieres animar.  El nombrar un objeto permite que sea más fácil especificar cuál será el objeto destino de la animación.  El siguiente XAML muestra el nombre del Rectangle, MyAnimatedRectangle.

<Rectangle x:Name="MyAnimatedRectangle" …

Creando un StoryBoard como recurso

Un Storyboard es el contenedor en el que colocas objetos de animación. Tienes que hacer el StoryBoard un recurso que esté disponible para el objeto que deseas animar. El siguiente XAML muestra cómo hacer el StoryBoard un recurso en el elemento raíz que es un StackPanel.  

<StackPanel X:Name="rootElement">

<StackPanel.Resources>

<- Anima la opacidad del rectángulo. ->

<Storyboard X:Name="myStoryboard">

<-! Objetos de animación, haga clic aquí. ->

</ Storyboard>

</ StackPanel.Resources>

</ StackPanel>

 

Agregando un objeto de animación a un Storyboard

Debido a que el valor de la propiedad que está animando (Opacity) utiliza un Double, en este ejemplo se utiliza un objeto DoubleAnimation.  Un objeto de animación especifica lo que está animando y la forma en que se comporta dicha animación. El siguiente XAML se muestra cómo el DoubleAnimation se agrega a un StoryBoard.

<Storyboard x:Name="myStoryboard">

<DoubleAnimation

Storyboard.TargetName="MyAnimatedRectangle"

Storyboard.TargetProperty="Opacity"

From="1.0" To="0.0" Duration="0:0:1"

AutoReverse="True"

RepeatBehavior="Forever" />

</Storyboard>

Este objeto DoubleAnimation específica la siguiente animación:

  • Storyboard.TargetProperty="Opacity" especifica que la propiedad Opacity es animada.
  • Storyboard.TargetName="MyAnimatedRectangle" especifica el objeto que esta propiedad está animando (el Rectangle).
  • From="1.0" To="0.0"  especifica que la propiedad Opacity se inicia con un valor de 1 y anima a 0 (comienza opaco y después se desvanece).
  • Duration="0:0:1" especifica el tiempo que dura la animación (lo rápido que el Rectangle se desvanece).  Ya que la propiedad Duration se especifica de la manera "horas:minutos:segundos", la duración utilizada en este ejemplo es de un segundo.
  • AutoReverse="True" especifica que cuando termine la animación, vaya en sentido inverso.  En el caso de este ejemplo, se desvanece y se invierte a una opacidad total.
  • RepeatBehavior="Forever" especifica que cuando la animación se inicie, continúe indefinidamente.  En este ejemplo, el rectángulo se desvanece en forma continua.

Iniciando la Animación

Una forma común de iniciar una animación es en respuesta a un evento.  En este ejemplo, el evento MouseLeftButtonUp se utiliza para iniciar la animación cuando el usuario pulse el Rectangle.

<Rectangle MouseLeftButtonUp="Rectangle_Tapped"

x:Name="MyAnimatedRectangle"

Width="100" Height="100" Fill="Blue" />

El StoryBoard es iniciado usando el método Begin.

myStoryboard.Begin ();

 

 

Nota

Puedes utilizar C# en lugar de XAML para crear una animación. Para un ejemplo, vea en MSDN Información general sobre animaciones.

Animando una propiedad Color

 

El ejemplo anterior muestra cómo animar una propiedad que utiliza un valor de tipo Double. ¿Qué pasaría si quieres animar un color? Silverlight para Windows Phone ofrece objetos de animación que se utilizan para animar a otros tipos de valores.  Los siguientes objetos básicos de animación animan propiedades de tipo Double, Color y Point, respectivamente:

·         DoubleAnimation

·         ColorAnimation

·         PointAnimation

Nota

También puedes animar propiedades que utilicen objetos.  Para más información consulta la sección Animaciones Avanzadas.

El siguiente ejemplo muestra cómo crear un ColorAnimation. Para probar este ejemplo, haz clic en el Rectangle para cambiar el color de fondo del Canvas de rojo a verde en un período de cuatro segundos.

Get Microsoft Silverlight

XAML

 

<StackPanel MouseLeftButtonUp="Rectangle_Tapped">

<StackPanel.Resources>

<Storyboard x:Name="myStoryboard">

<!– Animar el color de fondo del Canvas de rojo a verde en más de 4 segundos–>

<ColorAnimation Storyboard.TargetName="mySolidColorBrush"

Storyboard.TargetProperty="Color"

From="Red" To="Green" Duration="0:0:4" />

</Storyboard>

</StackPanel.Resources>

<StackPanel.Background>

<SolidColorBrush x:Name="mySolidColorBrush" Color="Red" />

</StackPanel.Background>

</StackPanel>

 

 

C#

 

/ / Cuando el usuario pulsa el rectángulo, la animación comienza.

private void Rectangle_Tapped (object sender, MouseEventArgs e)

{

myStoryboard.Begin ();

}

 

Iniciando, Deteniendo, Pausando y Reanudando

El ejemplo anterior muestra cómo iniciar una animación utilizando el método Begin. StoryBoard también tiene los métodos Stop, Pause y Resume que pueden utilizarse para controlar una animación. En el siguiente ejemplo se crean cuatro objetos Button que permiten al usuario controlar la animación de una Ellipse en la pantalla. Para probar este ejemplo, haz clic en los botones para ver cómo se comporta la animación.

Get Microsoft Silverlight

XAML

<Canvas>

<Canvas.Resources>

<Storyboard x:Name="myStoryboard">

<- Animar el punto central de la elipse. ->

<PointAnimation Storyboard.TargetProperty="Center"

Storyboard.TargetName="MyAnimatedEllipseGeometry"

Duration="0:0:5"

From="20,200"

To="400,100"

RepeatBehavior="Forever" />

</Storyboard>

</Canvas.Resources>

<Path Fill="Blue">

<Path.Data>

<- Describir una elipse. ->

    <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"

Center="20,20" RadiusX="15" RadiusY="15" />

</Path.Data>

</Path>

<StackPanel Orientation="Horizontal" Canvas.Left="10" Canvas.Top="265">

<-! Botón que comienza la animación. ->

<Button Click="Animation_Begin"

Width="65" Height="30" Margin="2" Content="Begin" />

<-! Botón que pausa la animación. ->

<Button Click="Animation_Pause"

Width="65" Height="30" Margin="2" Content="Pause" />

<-! Botón que restaura la animación. ->

<Button Click="Animation_Resume"

Width="65" Height="30" Margin="2" Content="Resume" />

<-! Botón que detiene la animación. Al detener la animación se devuelve el

elipse a su ubicación original. ->

<Button Click="Animation_Stop"

Width="65" Height="30" Margin="2" Content="Stop" />

</StackPanel>

</Canvas>

 

C#

 

private void Animation_Begin (object sender, RoutedEventArgs e)

{

myStoryboard.Begin ();

}

Animation_Pause private void (object sender, RoutedEventArgs e)

{

myStoryboard.Pause ();

}

private void Animation_Resume (object sender, RoutedEventArgs e)

{

myStoryboard.Resume ();

}

private void Animation_Stop (object sender, RoutedEventArgs e)

{

myStoryboard.Stop ();

}

Animando usando Recuadros

Hasta ahora, los ejemplos de este tutorial muestran la animación entre dos valores. (Estas se llaman animaciones From/To/By).  Las animaciones con recuadros te permiten usar más de dos valores destino y controlar el método de interpolación de una animación. Al especificar varios valores para animar puedes realizar animaciones más complejas.  Al especificar la interpolación de la animación (en concreto, mediante la propiedad KeySpline), puedes controlar la aceleración de una animación.

El siguiente ejemplo muestra cómo utilizar animación de recuadro para animar la propiedad Height  de un Rentangle.  Para probar este ejemplo, haz clic en el Rectangle para ver el efecto.

Get Microsoft Silverlight

XAML

 

<StackPanel Background="#FDF5E6">

<StackPanel.Resources>

<Storyboard X:Name="myStoryboard">

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName = "MyRectangle"

Storyboard.TargetProperty = "Height">

<- Este key frames restablece la animación a su partida

valor (30) al comienzo de la animación. ->

<LinearDoubleKeyFrame Value="30" KeyTime="0:0:0" />

<-! Animaciones de ranura se utilizan para crear la aceleración. Este

SplineDoubleKeyFrame crea una animación que comienza lenta.

y luego se acelera. El rectángulo "caídas". ->

KeySpline <SplineDoubleKeyFrame = "0,0 1,0" Value = "300"

KeyTime = "0:0:0.8" />

<- Esta animación de ranura crea el "rebote" en el final, donde

el rectángulo acorta su longitud rápidamente al principio y luego frena y se detiene. ->

<SplineDoubleKeyFrame KeySpline="0.10, 0.21 0.00, 1.0" Value="250"

KeyTime="0:0:1.5" />

</ DoubleAnimationUsingKeyFrames>

</ Storyboard>

</ StackPanel.Resources>

<Rectangle x:Name="myRectangle" MouseLeftButtonUp="Rectangle_Tapped" Fill="Blue"Width="200" Height="30" />

</ StackPanel>

C#

 

// Cuando el usuario pulsa el rectángulo, la animación comienza.

private void Rectangle_Tapped(object sender, MouseEventArgs e)

{

myStoryboard.Begin();

}

El XAML incluye los tres recuadros siguientes. Cada uno especifica un valor para animar a en un momento determinado.  La animación completa dura 1.5 segundos.

·         El primer recuadro de este ejemplo es un LinearDoubleKeyFrame. Los objetos de tipo LinearTipoKeyFrame como por ejemplo LinearDoubleKeyFrame crean transición linear y suave entre los valores.  Sin embargo, en este ejemplo, sólo se utiliza para especificar que la animación está en el valor 30 en el tiempo 0.

·         El segundo recuadro de este ejemplo es un SplineDoubleKeyFrame, que específica que el Height del rectángulo es de 300 en un tiempo de 0.8 segundos después que la animación comienza.  Los objetos de tipo SplineTipoKeyFrame como por ejemplo el SplineDoubleKeyFrame crean una transición variable entre los valores según sea el valor de la propiedad KeySpline.  En este ejemplo, el rectángulo comienza a moverse lentamente y luego se acelera hacia el final del segmento de tiempo.

·         El tercer recuadro de este ejemplo es un SplineDoubleKeyFrame, que especifica que la altura del rectángulo es 250 en un tiempo de 1.5 segundos después que la animación comienza (0.7 segundos después que finalizó el último SplineDoubleKeyFrame).  A diferencia con el anterior SplineDoubleKeyFrame, este recuadro hace que la animación comience rápido y vaya alentándose hacia el final.

Tal vez la propiedad más difícil usada por el SplineDoubleKeyFrame sea la propiedad KeySpline. Esta propiedad especifica los puntos de control, primero y segundo, de una curva de tipo Bézier, la cual describe la aceleración de la animación.

Get Microsoft Silverlight

Nota

Para obtener más información sobre las curvas Bézier, ejecuta el Ejemplo de Windows Presentation Foundation o consulta Animaciones en Recuadros en la biblioteca de MSDN.

Animando usando Funciones de Suavización

Las funciones de suavización te permiten aplicar fórmulas matemáticas a tus animaciones.  Por ejemplo, tal vez quisieras tener un objeto que rebote o que se comporte como si fuera un resorte.  Podrías utilizar recuadros o incluso animaciones From/To/By para aproximarte a estos efectos, pero tomaría una cantidad significativa de trabajo y la animación sería menos precisa que si usaras una fórmula matemática.  

En vez de crear tu propia función de suavización, mediante la implementación de la interfaz IEasingFunction, puedes utilizar alguna de las varias funciones de suavización proporcionadas por el runtime para crear efectos comunes. En el siguiente ejemplo se muestran las funciones de suavización que vienen en el runtime.  Selecciona una función de suavización de la lista desplegable, establece sus propiedades y, a continuación ejecuta la animación.  El XAML para la animación se muestra en la parte inferior derecha del ejemplo.  

El siguiente ejemplo muestra cómo utilizar animación de recuadro para animar la propiedad Height de un Rectangle.  Para probar este ejemplo, haz clic en el Rectangle para ver el efecto.

Get Microsoft Silverlight

A continuación se muestra una lista de las funciones de aceleración que se muestra en el ejemplo anterior, junto con un resumen rápido de lo que hace.

  • BackEase: Contrae el movimiento de una animación un poco antes de empezar a animar en el camino indicado.
  • BounceEase: Crea un efecto de rebote.
  • CircleEase: Crea una animación que aumenta o disminuye la velocidad utilizando una función circular.
  • CubicEase: Crea una animación que aumenta o disminuye la velocidad usando la fórmula f (t) = t3.
  • ElasticEase: Crea una animación que se asemeja a un resorte oscilando de un lado a otro hasta que se detiene.
  • ExponetialEase: Crea una animación que aumenta o disminuye la velocidad utilizando una fórmula exponencial.
  • PowerEase: Crea una animación que aumenta o disminuye la velocidad con la fórmula f (t) = tp donde p es igual a la propiedad Power.
  • QuadraticEase: Crea una animación que aumenta o disminuye la velocidad con la fórmula f (t) = t2.
  • QuarticEase: Crea una animación que aumenta o disminuye la velocidad con la fórmula f (t) = t4.
  • QuinticEase: Crea una animación que aumenta o disminuye la velocidad con la fórmula f (t) = t5.
  • SineEase: Crea una animación que aumenta o disminuye la velocidad utilizando una fórmula de seno.

En el ejemplo anterior, las funciones de suavización se aplican a una animación From/To/By.  También puedes aplicar estas funciones de suavización en animaciones de recuadro utilizando ya sea EasingDoubleKeyFrame, EasingPointKeyFrame o EasingColorKeyFrame.  El siguiente ejemplo muestra cómo utilizar recuadros con las funciones de suavización asociadas a ellos para crear una animación de un Rectangle que se contrae hacia arriba, se alenta, después se expande hacia abajo (como si estuviese cayendo) y luego salta a su finalización.  Para probar este ejemplo, haz clic en el rectángulo para ver el efecto.

Get Microsoft Silverlight

XAML

 

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

<StackPanel.Resources>

<Storyboard x:Name="myStoryboard">

<DoubleAnimationUsingKeyFrames

Storyboard.TargetProperty="Height"

Storyboard.TargetName="myRectangle">

where it slows down and stops. –>

<EasingDoubleKeyFrame Value="30" KeyTime="00:00:02">

<EasingDoubleKeyFrame.EasingFunction>

<CubicEase EasingMode="EaseOut"/>

</EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame>

<EasingDoubleKeyFrame Value="200" KeyTime="00:00:06">

<EasingDoubleKeyFrame.EasingFunction>

<BounceEase Bounces="5" EasingMode="EaseOut"/>

</EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</StackPanel.Resources>

<Rectangle x:Name="myRectangle" MouseLeftButtonUp="Rectangle_Tapped"

Fill="Blue" Width="200" Height="200" />

</StackPanel>

 

C#

/ / Cuando el usuario pulsa el rectángulo, la animación comienza.

private void Rectangle_Tapped(object sender, MouseEventArgs e)

{

myStoryboard.Begin();

}

Además de utilizar las funciones de suavización incluidas en el runtime, puedes crear tus propias funciones de suavización personalizadas, mediante la herencia de EasingFunctionBase. Para obtener más información, consulta EasingFunctionBase.

  1. November 23rd, 2011 at 14:37 | #1

    OK

  2. May 17th, 2012 at 17:16 | #2

    Muy interesante. Gracias.

  3. ehsaenz
    May 31st, 2012 at 02:35 | #3

    Bastante bueno el Material

  4. Oscar
    August 17th, 2012 at 14:09 | #4

    NO se ven las imagenes!!

  5. September 2nd, 2012 at 22:35 | #5

    No se ven los ejemplos interactivos

  6. alexjimpal
    December 20th, 2012 at 12:38 | #6

    Alguna idea de por que no se ven los ejemplos en silverlight, tengo instalada la versión 5.

  7. Gustavo Pages
    May 2nd, 2013 at 10:50 | #7

    Disculpa estoy teniendo problemas con los StoryBoard como le hago tengo que declarar alguna librería o que tengo que hacer?????
    Es urgente por favor!!!!!