Compartir a través de

Información general sobre animaciones

  • Artículo

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 control de tiempo de WPF. Se centra en la animación de objetos WPF mediante guiones gráficos.

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, este efecto se obtiene mediante el uso de cámaras que graban muchas fotografías, o fotogramas, cada segundo. Cuando un proyector reproduce estos fotogramas, los espectadores ven 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 control de tiempo o utilizar bibliotecas personalizadas especiales. WPF incluye un sistema de control de tiempo eficaz que se expone mediante el código administrado y del XAML que se integra perfectamente en el marco de WPF. La animación de WPF facilita la animación de controles y otros objetos gráficos.

WPF controla de forma eficiente todo el trabajo de administración del sistema de control de tiempo 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 desea crear, en lugar de la mecánica para lograr esos efectos. WPF también facilita la creación de sus propias animaciones exponiendo clases base de animación de las que se pueden heredar sus 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 comprende algunos conceptos importantes del sistema de control de tiempo, 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, debe animar sus propiedades Width y Height. Para hacer que un objeto desaparezca de la vista, debe animar su propiedad Opacity.

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

WPF contiene muchos objetos que tienen propiedades IAnimatable. Los controles como Button y TabControl, así como 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. Usa un elemento DoubleAnimation, que es un tipo de animación que genera valores Double, para animar la propiedad Opacity de un objeto Rectangle. Como resultado, Rectangle aparece y desaparece de la vista.

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

A continuación se muestra cómo crear un elemento Rectangle en un elemento StackPanel en XAML.

<StackPanel Margin="10">
    <Rectangle
        Name="MyRectangle"
        Width="100" 
        Height="100"
        Fill="Blue">
    </Rectangle>
</StackPanel>

A continuación se muestra cómo crear un elemento Rectangle en un elemento StackPanel en código.

var myPanel = new StackPanel();
myPanel.Margin = new Thickness(10);

var 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;

Dim myPanel As New StackPanel()
myPanel.Margin = New Thickness(10)

Dim myRectangle As New Rectangle()
myRectangle.Name = "myRectangle"
Me.RegisterName(myRectangle.Name, myRectangle)
myRectangle.Width = 100
myRectangle.Height = 100
myRectangle.Fill = Brushes.Blue

myPanel.Children.Add(myRectangle)
Me.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 produzca valores dobles. DoubleAnimation es una animación de este tipo. DoubleAnimation crea una transición entre dos valores dobles. Para especificar su valor inicial, debe establecer su propiedad From. Para especificar su valor final, debe establecer 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 hacer la transición de animación de 1.0 a 0.0, debe establecer su propiedad From en 1.0 y su propiedad To en 0.0. A continuación se muestra cómo crear un elemento DoubleAnimation en XAML.

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

    A continuación se muestra cómo crear un elemento DoubleAnimation en código.

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

    Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0

  2. A continuación, debe especificar un elemento Duration. El elemento Duration de una animación especifica cuánto tiempo le lleva pasar del valor de origen al valor de destino. A continuación se muestra cómo establecer Duration en cinco segundos en XAML.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />

    A continuación se muestra cómo establecer Duration en cinco segundos en código.

    myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(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 aparecer después de haberse desvanecido, establezca la propiedad AutoReverse de la animación en true. Para que la animación se repita indefinidamente, establezca su propiedad RepeatBehavior en Forever. A continuación se muestra cómo establecer las propiedades AutoReverse y RepeatBehavior en XAML.

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

    A continuación se muestra cómo establecer las propiedades AutoReverse y RepeatBehavior en código.

    myDoubleAnimation.AutoReverse = true;
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

    myDoubleAnimation.AutoReverse = True
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

Parte 2: Crear un guion gráfico

Para aplicar una animación a un objeto, cree Storyboard y use las propiedades adjuntas TargetName y TargetProperty para especificar el objeto y la propiedad que se van a animar.

  1. Cree Storyboard y agregue la animación como su elemento secundario. A continuación se muestra cómo crear Storyboard en XAML.

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

    Para crear Storyboard en código, declare una variable Storyboard en el nivel de clase.

    public partial class MainWindow : Window
{
    private Storyboard myStoryboard;

    Class MainWindow

    Private myStoryboard As Storyboard

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

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

    myStoryboard = New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

  2. Storyboard tiene que saber dónde debe aplicar la animación. Use la propiedad adjunta Storyboard.TargetName para especificar el objeto que se va a animar. A continuación se muestra cómo establecer el nombre de destino de DoubleAnimation en MyRectangle en XAML.

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

    A continuación se muestra cómo establecer el nombre de destino de DoubleAnimation en MyRectangle en código.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)

  3. Use la propiedad adjunta TargetProperty para especificar la propiedad que se va a animar. A continuación se muestra cómo se configura la animación para que tenga como destino la propiedad Opacity de Rectangle en XAML.

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

    A continuación se muestra cómo se configura la animación para que tenga como destino la propiedad Opacity de Rectangle en código.

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

    Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

Para obtener más información sobre la sintaxis de TargetProperty y ver ejemplos adicionales, consulte Información general sobre guiones gráficos.

Parte 3 (XAML): Asociar el guion gráfico a un desencadenador

La forma más sencilla de aplicar e iniciar Storyboard en XAML es usar un desencadenador de eventos. En esta sección se muestra cómo asociar Storyboard con un desencadenador en XAML.

  1. Cree un objeto BeginStoryboard y asócielo a su guion gráfico. BeginStoryboard es un tipo de TriggerAction que aplica e inicia un 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>

  2. Cree EventTrigger y agregue el objeto BeginStoryboard a su colección de Actions. Establezca la propiedad RoutedEvent de EventTrigger en el evento enrutado que desea que inicie Storyboard. Para obtener más información sobre los eventos enrutados, consulte 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>

  3. 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 guion gráfico a un controlador de eventos

La forma más sencilla de aplicar e iniciar Storyboard en código es usar un controlador de eventos. En esta sección se muestra cómo asociar Storyboard con un controlador de eventos en código.

  1. Regístrese al evento Loaded del rectángulo.

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

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

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

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
    myStoryboard.Begin(Me)
End Sub

Ejemplo completo

A continuación se muestra cómo crear un rectángulo que se intensifica y se atenúa hasta desaparecer en XAML.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <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>
    </Grid>
</Window>

A continuación se muestra cómo crear un rectángulo que se intensifica y se atenúa hasta desaparecer en el código.

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

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        private Storyboard myStoryboard;

        public MainWindow()
        {
            InitializeComponent();

            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);
        }
    }
}

Imports System.Windows.Media.Animation

Class MainWindow

    Private myStoryboard As Storyboard

    Public Sub New()
        InitializeComponent()

        Dim myPanel As New StackPanel()
        myPanel.Margin = New Thickness(10)

        Dim myRectangle As New Rectangle()
        myRectangle.Name = "myRectangle"
        Me.RegisterName(myRectangle.Name, myRectangle)
        myRectangle.Width = 100
        myRectangle.Height = 100
        myRectangle.Fill = Brushes.Blue

        Dim myDoubleAnimation As 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.
        AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

        myPanel.Children.Add(myRectangle)
        Me.Content = myPanel
    End Sub

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
        myStoryboard.Begin(Me)
    End Sub

End Class

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 toma un elemento Double, como la propiedad Width de un elemento, use una animación que produzca valores Double. Para animar una propiedad que toma un elemento Point, use una animación que produzca 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, querrá usar las clases <Tipo>Animation, como DoubleAnimation y ColorAnimation.

En la tabla siguiente se muestran 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 None Anime el elemento Color de un objeto SolidColorBrush o un objeto GradientStop.
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath Anime el elemento Width de un objeto DockPanel o el elemento Height de un objeto Button.
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath Anima la posición Center de un objeto EllipseGeometry.
String None StringAnimationUsingKeyFrames None Anime el elemento Text de un objeto TextBlock o el elemento 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. Timeline define un segmento de tiempo. Puede especificar los comportamientos de control de tiempo 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 elemento Timeline, también representa un segmento de tiempo. Una animación también calcula valores de salida a medida que avanza por su segmento de tiempo especificado (o Duration). A medida que la animación avanza, o se "reproduce", actualiza la propiedad a la que está asociada.

Tres propiedades de tiempo usadas con frecuencia son Duration, AutoReverse y RepeatBehavior.

Propiedad Duration

Como se ha mencionado previamente, una escala de tiempo representa un segmento de tiempo. La longitud de ese segmento se determina mediante el elemento Duration de la escala de tiempo, que normalmente se especifica mediante un valor TimeSpan. 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, usa 1 segundo, que es el valor predeterminado.

La sintaxis siguiente muestra una versión simplificada de la sintaxis de atributo del lenguaje XAML para la propiedad Duration.

horas:minutos:segundos

En la tabla siguiente se muestran 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 código es usar el método FromSeconds para crear un elemento TimeSpan y, a continuación, declarar una nueva estructura Duration mediante ese elemento TimeSpan.

Para obtener más información sobre los valores Duration y la sintaxis completa del lenguaje XAML, consulte la estructura Duration.

AutoReverse

La propiedad AutoReverse especifica si se reproduce la escala de tiempo a la inversa después de que llegue al final de su valor Duration. Si establece esta propiedad de animación en true, la animación se invierte después de llegar al fin de su Duration y se reproduce desde su valor final hasta su valor inicial. De manera predeterminada, esta propiedad es false.

RepeatBehavior

La propiedad RepeatBehavior especifica cuántas veces se reproduce una escala de tiempo. De manera 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 sobre estas propiedades y otras, consulte 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 control de tiempo. 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. Un Storyboard es una escala de tiempo de contenedor que proporciona información de destino para las animaciones que contiene.

Objetos y propiedades de destino

La clase Storyboard proporciona las propiedades adjuntas TargetName 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 objeto FrameworkElement es diferente 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 está seguro de si un tipo es un objeto FrameworkElement o un objeto Freezable, consulte la sección Jerarquía de herencia en su documentación de referencia.

  • Para hacer que FrameworkElement sea el destino de una animación, debe darle un nombre estableciendo su propiedad Name. En código, también debe usar el método RegisterName para registrar el nombre del elemento con la página a la que pertenece.

  • Para hacer que un objeto Freezable sea destino de una animación en XAML, debe usar la Directiva x:Name para asignarle un nombre. En código, solo debe usar 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 código. Para obtener información más detallada sobre la asignación de nombres y destinos, vea Información general sobre objetos Storyboard.

Aplicar e iniciar guiones gráficos

Para iniciar un guion gráfico en XAML, debe asociarlo con un objeto 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 guion 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 elemento Storyboard en código, puede usar EventTrigger o usar 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. También puede controlar de forma interactiva un elemento Storyboard después de que se inicie: puede pausarlo, reanudarlo, detenerlo, avanzarlo hasta su período de relleno, buscar y quitar el elemento Storyboard. Para obtener más información y un ejemplo que muestra cómo controlar interactivamente un Storyboard, consulte Información general sobre guiones gráficos.

Comportamiento tras la finalización de una animación

La propiedad FillBehavior especifica cómo se comporta una escala de tiempo cuando finaliza. De manera predeterminada, una escala de tiempo inicia Filling cuando finaliza. Una animación que sea Filling conserva su valor de salida final.

El elemento 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 dejan en sus valores predeterminados. Por consiguiente, la animación progresa de 1 a 0 en cinco segundos y luego 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));

Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))

Dado que su FillBehavior no se modificó con respecto a su valor predeterminado, que es HoldEnd, la animación conserva su valor final, 0, cuando finaliza. Por tanto, el elemento Opacity del rectángulo se mantiene en 0 después de que la animación finalice. Si establece el elemento Opacity del rectángulo en otro valor, el código no tiene ningún efecto, ya que la animación sigue afectando a la propiedad Opacity.

Una manera de volver a controlar la 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, consulte Establecer una propiedad después de animarla con un guion gráfico.

Tenga en cuenta que, si bien establecer un valor de propiedad que tenga una animación Active o Filling no tiene ningún efecto, el valor de propiedad sí cambia. Para obtener más información, consulte Información general sobre sistemas de control de tiempo y animación.

Animaciones con enlace de datos y animaciones animadas

La mayoría de las propiedades de animación pueden estar enlazadas a datos o ser animadas; por ejemplo, puede animar la propiedad Duration de un elemento DoubleAnimation. Sin embargo, debido a la manera en que funciona el sistema de control de tiempo, 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 control de tiempo crea una copia de Storyboard y su animación. Estas copias se inmovilizan (se hacen de solo lectura) y se crean objetos Clock a partir de ellas. Estos relojes son los que realmente se encargan de animar las propiedades de destino.

El sistema de control de tiempo crea un reloj para DoubleAnimation y lo aplica al objeto y a la propiedad que se especifica mediante TargetName y TargetProperty de DoubleAnimation. En este caso, el sistema de control de tiempo 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 su reloj secundario, el que se crea 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 guion gráfico mediante BeginStoryboard o el método Begin. Al usar cualquiera de estos métodos, la animación se reinicia. En código, puede usar el método Seek para desplazar el guion gráfico de vuelta a su posición anterior.

Para ver un ejemplo de una animación enlazada a datos, consulte Ejemplo Key Spline Animation. Para obtener más información acerca del funcionamiento del sistema de animación y control de tiempo, consulte Información general sobre sistemas de control de tiempo 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, consulte 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.

Title Descripción
Información general sobre sistemas de temporización y animación Describe cómo el sistema de control de tiempo usa las clases Timeline y Clock, que le permiten crear animaciones.
Sugerencias y trucos para animaciones Enumera las sugerencias útiles para solucionar problemas con animaciones, como el rendimiento.
Información general sobre animaciones personalizadas Describe cómo extender el sistema de animación con fotogramas clave, clases de animación o devoluciones de llamada por fotograma.
Información general sobre animaciones From/To/By Describe cómo crear una animación que realiza la transición entre dos valores.
Información general sobre animaciones de fotogramas clave Describe cómo crear una animación con varios valores de destino, incluida la capacidad de controlar el método de interpolación.
Funciones de aceleración Explica cómo aplicar fórmulas matemáticas a las animaciones para obtener un comportamiento realista, como el rebote.
Información general sobre animaciones en trazados Describe cómo mover o girar un objeto a lo largo de un trazado complejo.
Información general sobre técnicas de animación de propiedades Describe las animaciones de propiedades mediante guiones gráficos, animaciones locales, relojes y animaciones por fotograma.
Información general sobre objetos Storyboard Describe cómo utilizar guiones gráficos con varias escalas de tiempo para crear animaciones complejas.
Información general sobre comportamientos de control de tiempo Describe los tipos y propiedades de Timeline que se usan en animaciones.
Información general sobre eventos de control de tiempo Describe los eventos disponibles en los objetos Timeline y Clock para ejecutar código en puntos de la escala de tiempo, como iniciar, pausar, reanudar, omitir o detener.
Temas "Cómo..." Contiene ejemplos de código para usar animaciones y escalas de tiempo en una aplicación.
Temas "Cómo..." de relojes Contiene ejemplos de código para usar el objeto Clock en su aplicación.
Temas de procedimientos de fotogramas clave Contiene ejemplos de código para usar animaciones de fotogramas clave en una aplicación.
Temas "Cómo..." de animación de trazado Contiene ejemplos de código para usar animaciones de trazado en una aplicación.

Referencia