Información general sobre animaciones

Actualización: noviembre 2007

Windows Presentation Foundation (WPF) proporciona un conjunto eficaz de características de gráficos y diseño que permite crear interfaces de usuario y documentos atractivos. Las animaciones pueden hacer que una interfaz de usuario sea más vistosa y práctica. Simplemente con animar un color de fondo o con aplicar un elemento Transform animado, puede crear transiciones de pantalla espectaculares o proporcionar indicaciones visuales útiles.

Aquí se ofrece una introducción al sistema de animación y temporización de WPF. Se centra en la animación de objetos WPF mediante guiones gráficos.

Este tema contiene las secciones siguientes.

• Introducción a las animaciones
• Sistema de animación de propiedades de WPF
• Ejemplo: Hacer que un elemento se intensifique y se atenúe hasta desaparecer
• Tipos de animación
• Aplicar una animación a una propiedad
• Control interactivo de guiones gráficos
• Comportamiento tras la finalización de una animación
• Animaciones con enlace de datos y animaciones animadas
• Otras maneras de crear animaciones
• Ejemplos de animaciones
• Temas relacionados

Introducción a las animaciones

Una animación es una ilusión que se crea mediante el cambio rápido entre una serie de imágenes, cada una de las cuales es ligeramente diferente de la anterior. El cerebro percibe el grupo de imágenes como una sola escena cambiante. En las películas, esta efecto se obtiene mediante el uso de cámaras que graban muchas fotografías, o fotogramas, cada segundo. Cuando los fotogramas se reproducen en un proyector, la audiencia ve una imagen en movimiento.

La animación en un equipo es similar. Por ejemplo, un programa que hace que un dibujo de un rectángulo se desvanezca hasta desaparecer de la vista podría funcionar de la siguiente manera.

• El programa crea un temporizador.

• El programa comprueba el temporizador en los intervalos establecidos para ver cuánto tiempo ha transcurrido.

• Cada vez que el programa comprueba el temporizador, calcula el valor de opacidad actual del rectángulo en función del tiempo que ha transcurrido.

• Después, el programa actualiza el rectángulo con el nuevo valor y lo redibuja.

Con anterioridad a WPF, los desarrolladores de Microsoft Windows tenían que crear y administrar sus propios sistemas de temporización o utilizar bibliotecas personalizadas especiales. WPF incluye un sistema de temporización eficaz que se expone a través del código administrado y Lenguaje de marcado de aplicaciones extensible (XAML), y que está completamente integrado en el marco de trabajo de WPF. La animación de WPF permite animar controles y otros objetos gráficos de forma sencilla.

WPF controla todo el trabajo de administración del sistema de temporización y de actualización de la pantalla que se produce en segundo plano. Proporciona clases de control de tiempo que permiten centrarse en los efectos que se desean crear, en lugar de en la manera de lograr esos efectos. WPF también permite crear fácilmente animaciones propias exponiendo clases base de animación de las que pueden heredar sus propias clases para generar animaciones personalizadas. Estas animaciones personalizadas se benefician de la mayoría de las ventajas de rendimiento de las clases de animación estándar.

Sistema de animación de propiedades de WPF

Si conoce algunos conceptos importantes del sistema de temporización, le resultará más fácil usar las animaciones de WPF. Lo más importante es que, en WPF, los objetos se animan al aplicar animaciones a sus propiedades individuales. Por ejemplo, para hacer que un elemento de marco crezca, se animan sus propiedades Width y Height. Para hacer que un objeto se desvanezca hasta desaparecer de la vista, se anima su propiedad Opacity.

Para tener funcionalidad de animación, una propiedad debe cumplir los tres requisitos siguientes:

• Debe ser una propiedad de dependencia.

• Debe pertenecer a una clase que herede de DependencyObject e implemente la interfaz IAnimatable.

• Debe haber un tipo de animación compatible disponible. Si Windows Presentation Foundation (WPF) no proporciona ninguno, puede crear el suyo propio. Consulte Información general sobre animaciones personalizadas.

WPF contiene muchos objetos con propiedades que se pueden animar. Algunos controles, como Button y TabControl, y también los objetos Panel y Shape heredan de DependencyObject. La mayoría de sus propiedades son propiedades de dependencia. 

Las animaciones pueden usarse casi en cualquier parte, lo que incluye estilos y plantillas de control. Las animaciones no tienen que ser visuales; puede animar objetos que no formen parte de la interfaz de usuario siempre y cuando cumplan los criterios que se describen en esta sección.

Ejemplo: Hacer que un elemento se intensifique y se atenúe hasta desaparecer

En este ejemplo se muestra cómo usar una animación de WPF para animar el valor de una propiedad de dependencia. Se usa DoubleAnimation, que es un tipo de animación que genera valores Double, para animar la propiedad Opacity de un elemento Rectangle. Como resultado, Rectangle se intensifica y se atenúa hasta desaparecer de la vista.

En la primera parte del ejemplo se crea un elemento Rectangle y se muestra en un objeto Page. Los pasos siguientes muestran cómo crear una animación y aplicarla a la propiedad Opacity del rectángulo.

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Fading Rectangle Example">
  <StackPanel Margin="10">
    
    <Rectangle
      Name="MyRectangle"
      Width="100" 
      Height="100"
      Fill="Blue">
    </Rectangle> 
  </StackPanel>
</Page>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace Microsoft.SDK.Animation
{
    public class RectangleOpacityFadeExample : Page
    {
        public RectangleOpacityFadeExample()
        {
            NameScope.SetNameScope(this, new NameScope());
            this.WindowTitle = "Fading Rectangle Example";
            StackPanel myPanel = new StackPanel();
            myPanel.Margin = new Thickness(10);
            
            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;
            myPanel.Children.Add(myRectangle);
            this.Content = myPanel; 
        }
    }
}

Parte 1: Crear una DoubleAnimation

Una manera de conseguir que un elemento se intensifique y se atenúe hasta desaparecer es animar su propiedad Opacity. Dado que la propiedad Opacity es de tipo Double, necesita una animación que genere valores double. DoubleAnimation es una animación que se ajusta a ese perfil. DoubleAnimation crea una transición entre dos valores double. Para especificar el valor inicial, establezca su propiedad From. Para especificar el valor final, establezca su propiedad To.

1. Un valor de opacidad de 1.0 hace que el objeto sea completamente opaco y un valor de opacidad de 0.0 hace que sea completamente invisible. Para lograr una transición de la animación de 1.0 a 0.0, establezca su propiedad From en 1.0 y su propiedad To en 0.0.

   ...
   <DoubleAnimation From="1.0" To="0.0"  />        
   ...
   

   [C#]

   DoubleAnimation myDoubleAnimation = new DoubleAnimation();
   myDoubleAnimation.From = 1.0;
   myDoubleAnimation.To = 0.0;
   

2. Luego debe especificar un valor Duration. El valor Duration de una animación especifica cuánto tiempo le lleva pasar del valor de origen al valor de destino. En el ejemplo siguiente, se proporciona a la animación una duración de cinco segundos.

   ...
   <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />        
   ...
   
   myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
   

3. En el código anterior se mostraba una animación que cambiaba de 1.0 a 0.0, lo que hacía que el elemento de destino se atenuara y pasase de ser completamente opaco a ser completamente invisible. Para hacer que el elemento vuelva a intensificarse antes de desaparecer, establezca la propiedad AutoReverse de la animación en true. Para hacer que la animación se repita indefinidamente, establezca su propiedad RepeatBehavior en Forever.

   ...
   <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>        
   ...
   
   myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
   myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
   

Parte 2: Crear un guión gráfico

Para aplicar una animación a un objeto, se crea un objeto Storyboard y se usan las propiedades asociadasTargetName y TargetProperty para especificar el objeto y la propiedad que se desean animar.

1. Cree Storyboard y agregue la animación como su elemento secundario.

   ...
   <Storyboard>
     <DoubleAnimation
       From="1.0" To="0.0" Duration="0:0:1" 
       AutoReverse="True" RepeatBehavior="Forever" />
   </Storyboard>
   ...
   

   En el código, declare Storyboard como un miembro de clase.

   public class RectangleOpacityFadeExample : Page
   { 
       private Storyboard myStoryboard;
   

   A continuación, inicialice Storyboard y agregue la animación como su elemento secundario.

   myStoryboard = new Storyboard();
   myStoryboard.Children.Add(myDoubleAnimation);
   

2. Storyboard debe saber dónde aplicar la animación. Use la propiedad asociada Storyboard.TargetName para especificar el objeto que desea animar. En el código siguiente, a DoubleAnimation se le asigna el nombre de destino de MyRectangle, que es el nombre del objeto que se va a animar.

   ...
   <Storyboard>
     <DoubleAnimation
       Storyboard.TargetName="MyRectangle" 
       From="1.0" To="0.0" Duration="0:0:1" 
       AutoReverse="True" RepeatBehavior="Forever" />
   </Storyboard>
   ...
   
   Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
   

   Nota

   Cuando se crean guiones gráficos en el código, es necesario realizar dos pasos adicionales: crear un ámbito de nombres y registrar el nombre del objeto que se va a animar. En el código incluido al principio de esta sección para crear la página y el rectángulo también se declaraba un objeto NameScope y se registraba un nombre para el rectángulo. Use el método SetNameScope para crear NameScope, si todavía no existe. Use el método RegisterName para registrar el nombre del objeto de destino con el elemento para el que creó NameScope. De lo contrario, Storyboard no encontrará el objeto para animarlo. Para obtener otro ejemplo, vea Cómo: Definir un ámbito de nombres.

3. Use la propiedad asociada TargetProperty para especificar la propiedad que desea animar. En el código siguiente, la animación se configura para tener como destino la propiedad Opacity de Rectangle.

<BeginStoryboard>
  <Storyboard>
    <DoubleAnimation
      Storyboard.TargetName="MyRectangle" 
      Storyboard.TargetProperty="Opacity"
      From="1.0" To="0.0" Duration="0:0:5" 
      AutoReverse="True" RepeatBehavior="Forever" />
  </Storyboard>
</BeginStoryboard>

Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

Para obtener más información acerca de la sintaxis de TargetProperty y más ejemplos, vea Información general sobre objetos Storyboard.

Parte 3 (XAML): Asociar el guión gráfico a un desencadenador

La manera más fácil de aplicar e iniciar un elemento Storyboard en XAML es usar un desencadenador de eventos.

Cree un objeto BeginStoryboard y asóciele su guión gráfico. BeginStoryboard es un tipo de TriggerAction que aplica e inicia Storyboard.

<BeginStoryboard>
  <Storyboard>
    <DoubleAnimation
      Storyboard.TargetName="MyRectangle" 
      Storyboard.TargetProperty="Opacity"
      From="1.0" To="0.0" Duration="0:0:5" 
      AutoReverse="True" RepeatBehavior="Forever" />
  </Storyboard>
</BeginStoryboard>

Cree un EventTrigger y agregue BeginStoryboard a su colección Actions. Establezca la propiedad RoutedEvent de EventTrigger en el evento enrutado que desee para iniciar Storyboard. Para obtener más información acerca de los eventos enrutados, vea Información general sobre eventos enrutados.

<!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
  <BeginStoryboard>
    <Storyboard>
      <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:5" 
        AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
  </BeginStoryboard>
</EventTrigger>

Agregue EventTrigger a la colección Triggers del rectángulo.

<Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>
    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Parte 3 (código): Asociar el guión gráfico a un controlador de eventos

La manera más fácil de aplicar e iniciar un Storyboard en el código es usar un controlador de eventos.

1. Registre el evento Loaded del rectángulo.

   [C#]

   myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
   

2. Declare el controlador de eventos. En el controlador de eventos, use el método Begin para aplicar el guión gráfico.

   [C#]

   ...
   public void myRectangleLoaded(object sender, RoutedEventArgs e)
   {
       myStoryboard.Begin(this);
   }
   ...
   

Ejemplo completo

En el ejemplo siguiente se muestra el código completo que es necesario para crear un rectángulo que se intensifica y se atenúa hasta desaparecer.

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Fading Rectangle Example">
  <StackPanel Margin="10">
    <Rectangle
      Name="MyRectangle"
      Width="100" 
      Height="100"
      Fill="Blue">
      <Rectangle.Triggers>
        <!-- Animates the rectangle's opacity. -->
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.TargetName="MyRectangle" 
                Storyboard.TargetProperty="Opacity"
                From="1.0" To="0.0" Duration="0:0:5" 
                AutoReverse="True" RepeatBehavior="Forever" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>
  </StackPanel>
</Page>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace SDKSample
{

    public class RectangleOpacityFadeExample : Page
    {
        private Storyboard myStoryboard;

        public RectangleOpacityFadeExample()
        {
            NameScope.SetNameScope(this, new NameScope());

            this.WindowTitle = "Fading Rectangle Example";
            StackPanel myPanel = new StackPanel();
            myPanel.Margin = new Thickness(10);

            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;

            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 1.0;
            myDoubleAnimation.To = 0.0;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
            myDoubleAnimation.AutoReverse = true;
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

            // Use the Loaded event to start the Storyboard.
            myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);  

            myPanel.Children.Add(myRectangle);
            this.Content = myPanel;
        }

        private void myRectangleLoaded(object sender, RoutedEventArgs e)
        {
            myStoryboard.Begin(this);
        }

    }
}

Tipos de animación

Dado que las animaciones generan valores de propiedad, existen distintos tipos de animaciones para los diversos tipos de propiedades. Para animar una propiedad que acepta una estructura Double, como la propiedad Width de un elemento, se usa una animación que genera valores Double. Para animar una propiedad que acepta una estructura Point, se usa una animación que genera valores Point; y así sucesivamente. Dado que existen tipos de propiedades diferentes, hay varias clases de animación en el espacio de nombres System.Windows.Media.Animation. Afortunadamente se rigen por una convención de nomenclatura estricta que hace que sea fácil diferenciarlas:

• <<Tipo>Animation

  Conocidas como animaciones "From/To/By" o "basic", generan una animación entre un valor inicial y de destino o agregan un valor de desplazamiento al valor inicial.

  • Para especificar un valor inicial, establezca la propiedad From de la animación.

  • Para especificar un valor final, establezca la propiedad To de la animación.

  • Para especificar un valor de desplazamiento, establezca la propiedad By de la animación.

  En los ejemplos de este tema se incluyen estas animaciones porque son las más fáciles de usar. Las animaciones From/To/By se describen en detalle en Información general sobre animaciones From/To/By.

• <<Tipo>AnimationUsingKeyFrames

  Las animaciones de fotogramas clave son más eficaces que las animaciones From/To/By porque se puede especificar cualquier número de valores de destino e incluso controlar su método de interpolación. Algunos tipos solo se pueden animar con animaciones de fotogramas clave. Las animaciones de fotogramas clave se describen con detalle en Información general sobre animaciones de fotogramas clave.

• <<Tipo>AnimationUsingPath

  Las animaciones de trazado permiten usar un trazado geométrico para generar valores animados.

• <<Tipo>AnimationBase

  Clase abstracta que, cuando se implementa, anima un valor de <Tipo>. Esta clase actúa como clase base para las clases <Tipo>Animation y <Tipo>AnimationUsingKeyFrames. Tiene que tratar directamente con estas clases solo si desea crear sus propias animaciones personalizadas. En caso contrario, use <Tipo>Animation o KeyFrame<Tipo>Animation.

En la mayoría de los casos, deseará usar las clases <Tipo>Animation, como DoubleAnimation y ColorAnimation.

La tabla siguiente muestra varios tipos de animación comunes y algunas propiedades con las que se usan.

Tipo de propiedad	Animación básica correspondiente (From/To/By)	Animación de fotogramas clave correspondiente	Animación de trazado correspondiente	Ejemplo de uso
Color	ColorAnimation	ColorAnimationUsingKeyFrames	Ninguna	Animar la propiedad Color de un objeto SolidColorBrush o GradientStop.
Double	DoubleAnimation	DoubleAnimationUsingKeyFrames	DoubleAnimationUsingPath	Animar la propiedad Width de un objeto DockPanel o la propiedad Height de un objeto Button.
Point	PointAnimation	PointAnimationUsingKeyFrames	PointAnimationUsingPath	Animar la posición Center de un objeto EllipseGeometry.
String	Ninguna	StringAnimationUsingKeyFrames	Ninguna	Animar la propiedad Text de un objeto TextBlock o la propiedad Content de un objeto Button.

Las animaciones son escalas de tiempo

Todos los tipos de animaciones heredan de la clase Timeline, por lo que todas las animaciones son tipos de escalas de tiempo especializados. Un objeto Timeline define un segmento de tiempo. Puede especificar los comportamientos de temporización de una escala de tiempo: su Duration, cuántas veces se repite e incluso con qué rapidez pasa el tiempo para ella.

Dado que una animación es un objeto Timeline, también representa un segmento de tiempo. Una animación también calcula los valores de salida a medida que avanza por su segmento de tiempo (o Duration). A medida que la animación avanza, o se "reproduce", actualiza la propiedad a la que está asociada.

Tres propiedades de temporización que se usan con frecuencia son Duration, AutoReverse y RepeatBehavior.

Propiedad Duration

Como se ha mencionado previamente, una escala de tiempo representa un segmento de tiempo. La propiedad Duration de la escala de tiempo, que normalmente se especifica mediante un valor TimeSpan, determina la longitud de ese segmento. Cuando una escala de tiempo llega al final de su duración, ha completado una iteración.

Una animación usa su propiedad Duration para determinar su valor actual. Si no especifica un valor Duration para una animación, se usa 1 segundo, que es el valor predeterminado.

La sintaxis siguiente muestra una versión simplificada de la sintaxis de atributo de Lenguaje de marcado de aplicaciones extensible (XAML) para la propiedad Duration.

horas:minutes:seconds

La tabla siguiente muestra varias configuraciones de Duration y sus valores resultantes.

Configuración	Valor resultante
0:0:5.5	5,5 segundos.
0:30:5.5	30 minutos y 5,5 segundos.
1:30:5.5	1 hora, 30 minutos y 5,5 segundos.

Una manera de especificar Duration en el código es usar el método FromSeconds para crear un elemento TimeSpan y después declarar una nueva estructura Duration mediante TimeSpan.

Para obtener más información acerca de los valores de Duration y la sintaxis de Lenguaje de marcado de aplicaciones extensible (XAML) completa, vea la página del tipo Duration.

AutoReverse

La propiedad AutoReverse especifica si una escala de tiempo se vuelve a reproducir hacia atrás al llegar al final de Duration. Si establece esta propiedad de animación en true, la animación se invierte después de llegar al fin de Duration y se reproduce desde su valor final hasta su valor inicial. De forma predeterminada, esta propiedad es false.

RepeatBehavior

La propiedad RepeatBehavior especifica cuántas veces se reproduce una escala de tiempo. De forma predeterminada, las escalas de tiempo tienen una iteración de 1.0, lo que significa que se reproducen una vez y no se repiten en absoluto.

Para obtener más información acerca de estas propiedades y otras, vea Información general sobre comportamientos de control de tiempo.

Aplicar una animación a una propiedad

En las secciones anteriores se han descrito los distintos tipos de animaciones y sus propiedades de temporización. En esta sección se muestra cómo aplicar la animación a la propiedad que se desea animar. Los objetos Storyboard proporcionan una manera de aplicar animaciones a propiedades. Storyboard es una escala de tiempo contenedora que proporciona información de destino para las animaciones que contiene.

Objetos y propiedades de destino

La clase Storyboard proporciona las propiedades asociadasTargetName y TargetProperty. Al establecer estas propiedades en una animación, se indica a la animación qué debe animar. Sin embargo, para que una animación pueda tener un objeto como destino, normalmente se debe dar un nombre al objeto.

Asignar un nombre a un FrameworkElement difiere de asignar un nombre a un objeto Freezable. La mayoría de los controles y paneles son elementos de marco, pero los objetos gráficos más puros, como los pinceles, las transformaciones y las formas geométricas, son objetos inmovilizables. Si no tiene la certeza de si un tipo es FrameworkElement o Freezable, consulte la sección Jerarquía de herencia de la página del tipo.

• Para convertir un FrameworkElement en un destino de animación, se le asigna un nombre mediante el establecimiento de su propiedad Name. En el código también se debe usar el método RegisterName para registrar el nombre del elemento con la página a la que pertenece.

• Para convertir un objeto Freezable en un destino de animación en XAML, utilice Atributo x:Name para asignarle un nombre. En el código simplemente se usa el método RegisterName para registrar el objeto con la página a la que pertenece.

En las secciones siguientes se proporciona un ejemplo de cómo asignar un nombre a un elemento en XAML y en el código. Para obtener información más detallada acerca de la asignación de nombres y destinos, vea Información general sobre objetos Storyboard.

Aplicar e iniciar guiones gráficos

Para iniciar un guión gráfico en XAML, se asocia a un EventTrigger. Un EventTrigger es un objeto que describe qué acciones deben realizarse cuando se produce un evento especificado. Una de esas acciones puede ser una acción BeginStoryboard, que se usa para iniciar el guión gráfico. Los desencadenadores de eventos son similares en concepto a los controladores de eventos, porque permiten especificar cómo responde una aplicación a un evento determinado. A diferencia de los controladores de eventos, los desencadenadores de eventos se pueden describir totalmente en XAML; no se requiere ningún otro código.

Para iniciar un Storyboard en el código, se puede usar EventTrigger o el método Begin de la clase Storyboard.

Control interactivo de guiones gráficos

En el ejemplo anterior se mostró cómo iniciar Storyboard cuando se produce un evento. Un Storyboard también se puede controlar interactivamente después haberse iniciado: puede pausar, reanudar, detener, hacer que avance hasta su período de relleno, buscar y quitar el Storyboard. Para obtener más información y un ejemplo que muestra cómo controlar interactivamente un Storyboard, vea Información general sobre objetos Storyboard.

Comportamiento tras la finalización de una animación

La propiedad FillBehavior especifica cómo se comporta una escala de tiempo cuando finaliza. De forma predeterminada, una escala de tiempo inicia el proceso Filling cuando finaliza. Una animación que se encuentra en el proceso Filling mantiene su valor de salida final.

El objeto DoubleAnimation del ejemplo anterior no finaliza porque su propiedad RepeatBehavior está establecida en Forever. En el ejemplo siguiente se anima un rectángulo mediante el uso de una animación similar. A diferencia del ejemplo anterior, las propiedades RepeatBehavior y AutoReverse de esta animación se mantienen en sus valores predeterminados. Por consiguiente, la animación progresa de 1 a 0 en cinco segundos y, a continuación, se detiene.

<Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>

    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0" Duration="0:0:5" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));

Dado que no se modificó el valor predeterminado de su FillBehavior, que es HoldEnd, la animación mantiene su valor final, 0, cuando finaliza. Por tanto, la propiedad Opacity del rectángulo se mantiene en 0 después de que finaliza la animación. Si establece la propiedad Opacity del rectángulo en otro valor, aparentemente su código no tiene ningún efecto, porque la animación todavía influye en la propiedad Opacity.

Una manera de recobrar el control de una propiedad animada en el código es usar el método BeginAnimation y especificar null para el parámetro AnimationTimeline. Para obtener más información y un ejemplo, vea Cómo: Establecer una propiedad después de animarla con un guión gráfico.

Tenga en cuenta que, aunque parece que no tiene ningún efecto establecer un valor de una propiedad que tiene una animación Active o Filling, el valor de la propiedad realmente cambia. Para obtener más información, vea Información general sobre sistemas de temporización y animación.

Animaciones con enlace de datos y animaciones animadas

La mayoría de las propiedades de animación pueden ser enlazadas a datos o animadas; por ejemplo, puede animar la propiedad Duration de DoubleAnimation. Sin embargo, debido a la manera en que funciona el sistema de temporización, las animaciones enlazadas a datos o animadas no se comportan como los demás objetos enlazados a datos o animados. Para entender su comportamiento, le será útil comprender el significado de aplicar una animación a una propiedad.

Consulte el ejemplo de la sección anterior que mostraba cómo animar la propiedad Opacity de un rectángulo. Cuando se carga el rectángulo del ejemplo anterior, su desencadenador de eventos aplica el elemento Storyboard. El sistema de temporización crea una copia de Storyboard y de su animación. Estas copias se inmovilizan (se convierten en copias de sólo lectura) y a partir de ellas se crean objetos Clock. Estos relojes son los que realmente se encargan de animar las propiedades de destino.

El sistema de temporización crea un reloj para DoubleAnimation y lo aplica al objeto y a la propiedad que se especifican mediante las propiedades TargetName y TargetProperty de DoubleAnimation. En este caso, el sistema de temporización aplica el reloj a la propiedad Opacity del objeto denominado "MyRectangle".

Aunque también se crea un reloj para Storyboard, el reloj no se aplica a ninguna propiedad. Su finalidad es controlar a su reloj secundario, el creado para DoubleAnimation.

Para que una animación refleje cambios de enlace de datos o de animación, su reloj se debe regenerar. Los relojes no se regeneran automáticamente. Para que una animación refleje los cambios, vuelva a aplicar su guión gráfico mediante un elemento BeginStoryboard o el método Begin. Al usar cualquiera de estos métodos, la animación se reinicia. En el código, puede usar el método Seek para hacer que el guión gráfico regrese a su posición anterior.

Para obtener un ejemplo de una animación enlazada a datos, vea Ejemplo Key Spline Animation. Para obtener más información acerca del funcionamiento del sistema de animación y temporización, vea Información general sobre sistemas de temporización y animación.

Otras maneras de crear animaciones

Los ejemplos de este tema muestran cómo aplicar animaciones mediante guiones gráficos. En el código se pueden aplicar animaciones de otras maneras. Para obtener más información, vea Información general sobre técnicas de animación de propiedades.

Ejemplos de animaciones

Los ejemplos siguientes pueden ayudarle a familiarizarse con la forma de agregar animaciones a sus aplicaciones.

• Ejemplo Property Animation

  Muestra cómo aplicar animaciones a elementos de marco y a objetos inmovilizables.

• Ejemplo From, To, and By Animation Target Values

  Muestra distintas configuraciones From/To/By.

• Ejemplo Animation Timing Behavior

  Muestra las distintas maneras de controlar el comportamiento de temporización de una animación. Este ejemplo también muestra cómo enlazar a datos el valor de destino de una animación.

Vea también

Conceptos

Información general sobre animaciones From/To/By

Información general sobre animaciones de fotogramas clave

Información general sobre objetos Storyboard

Información general sobre comportamientos de control de tiempo

Información general sobre sistemas de temporización y animación

Información general sobre eventos de control de tiempo

Información general sobre Windows Presentation Foundation

Referencia

Timeline

Storyboard