Información general sobre animacionesAnimation Overview

Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) Proporciona un conjunto eficaz de gráficos y diseño de características que le permiten crear interfaces de usuario y documentos atractivos.Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) provides a powerful set of graphics and layout features that enable you to create attractive user interfaces and appealing documents. Las animaciones pueden hacer que una interfaz de usuario sea más vistosa y práctica.Animation can make an attractive user interface even more spectacular and usable. Simplemente animar un color de fondo o aplicando un elemento animado Transform, puede crear transiciones de pantalla espectaculares o proporcionar indicaciones visuales útiles.By just animating a background color or applying an animated Transform, you can create dramatic screen transitions or provide helpful visual cues.

Esta información general proporciona una introducción a la WPFWPF sistema de temporización y animación.This overview provides an introduction to the WPFWPF animation and timing system. Se centra en la animación de WPFWPF objetos mediante el uso de guiones gráficos.It focuses on the animation of WPFWPF objects by using storyboards.

Introducción a las animacionesIntroducing Animations

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.Animation is an illusion that is created by quickly cycling through a series of images, each slightly different from the last. El cerebro percibe el grupo de imágenes como una sola escena cambiante.The brain perceives the group of images as a single changing scene. En las películas, este efecto se obtiene mediante el uso de cámaras que graban muchas fotografías, o fotogramas, cada segundo.In film, this illusion is created by using cameras that record many photographs, or frames, each second. Cuando un proyector reproduce estos fotogramas, los espectadores ven una imagen en movimiento.When the frames are played back by a projector, the audience sees a moving picture.

La animación en un equipo es similar.Animation on a computer is 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.For example, a program that makes a drawing of a rectangle fade out of view might work as follows.

  • El programa crea un temporizador.The program creates a timer.

  • El programa comprueba el temporizador en los intervalos establecidos para ver cuánto tiempo ha transcurrido.The program checks the timer at set intervals to see how much time has elapsed.

  • 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.Each time the program checks the timer, it computes the current opacity value for the rectangle based on how much time has elapsed.

  • Después, el programa actualiza el rectángulo con el nuevo valor y lo redibuja.The program then updates the rectangle with the new value and redraws it.

Anteriores a WPFWPF, Microsoft WindowsMicrosoft Windows los desarrolladores tenían que crear y administrar sus propios sistemas de temporización o utilizar bibliotecas personalizadas especiales.Prior to WPFWPF, Microsoft WindowsMicrosoft Windows developers had to create and manage their own timing systems or use special custom libraries. WPFWPF incluye un sistema de control de tiempo eficaz que se expone a través de código administrado y Lenguaje XAML (Extensible Application Markup Language)Extensible Application Markup Language (XAML) y que está muy integrado en el WPFWPF framework.includes an efficient timing system that is exposed through managed code and Lenguaje XAML (Extensible Application Markup Language)Extensible Application Markup Language (XAML) and that is deeply integrated into the WPFWPF framework. La animación WPFWPF facilita la animación de controles y otros objetos gráficos.WPFWPF animation makes it easy to animate controls and other graphical objects.

WPFWPF 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.handles all the behind-the-scenes work of managing a timing system and redrawing the screen efficiently. 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.It provides timing classes that enable you to focus on the effects you want to create, instead of the mechanics of achieving those effects. WPFWPF 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.also makes it easy to create your own animations by exposing animation base classes from which your classes can inherit, to produce customized animations. Estas animaciones personalizadas se benefician de la mayoría de las ventajas de rendimiento de las clases de animación estándar.These custom animations gain many of the performance benefits of the standard animation classes.

Sistema de animación de propiedades de WPFWPF Property Animation System

Si comprende algunos conceptos importantes sobre el sistema de temporización WPFWPF animaciones pueden ser más fáciles de usar.If you understand a few important concepts about the timing system, WPFWPF animations can be easier to use. Más importante es que, en WPFWPF, objetos se animan al aplicar animaciones a sus propiedades individuales.Most important is that, in WPFWPF, you animate objects by applying animation to their individual properties. Por ejemplo, para hacer un elemento de marco crezca, se animan sus Width y Height propiedades.For example, to make a framework element grow, you animate its Width and Height properties. Para hacer que un objeto se desvanezca hasta desaparecer de la vista, se anima su Opacity propiedad.To make an object fade from view, you animate its Opacity property.

Para tener funcionalidad de animación, una propiedad debe cumplir los tres requisitos siguientes:For a property to have animation capabilities, it must meet the following three requirements:

WPFWPF contiene muchos objetos que tienen IAnimatable propiedades.contains many objects that have IAnimatable properties. Los controles como Button y TabControly también Panel y Shape objetos heredan de DependencyObject.Controls such as Button and TabControl, and also Panel and Shape objects inherit from DependencyObject. La mayoría de sus propiedades son propiedades de dependencia.Most of their properties are dependency properties.

Las animaciones pueden usarse casi en cualquier parte, lo que incluye estilos y plantillas de control.You can use animations almost anywhere, which includes in styles and control templates. 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.Animations do not have to be visual; you can animate objects that are not part of the user interface if they meet the criteria that are described in this section.

Ejemplo: Realizar una transición del elemento dentro y fuera de la vistaExample: Make an Element Fade In and Out of View

En este ejemplo se muestra cómo usar un WPFWPF animaciones para animar el valor de una propiedad de dependencia.This example shows how to use a WPFWPF animation to animate the value of a dependency property. Usa un DoubleAnimation, que es un tipo de animación que genera Double valores, se va a animar el Opacity propiedad de un Rectangle.It uses a DoubleAnimation, which is a type of animation that generates Double values, to animate the Opacity property of a Rectangle. Como resultado, el Rectangle desaparece.As a result, the Rectangle fades in and out of view.

La primera parte del ejemplo se crea un Rectangle elemento.The first part of the example creates a Rectangle element. Los pasos siguientes muestran cómo crear una animación y aplicarla al rectángulo Opacity propiedad.The steps that follow show how to create an animation and apply it to the rectangle's Opacity property .

La siguiente muestra cómo crear un Rectangle elemento en un StackPanel en XAML.The following shows how to create a Rectangle element in a StackPanel in XAML.

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

La siguiente muestra cómo crear un Rectangle elemento en un StackPanel en el código.The following shows how to create a Rectangle element in a StackPanel in code.

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;
Dim myPanel As StackPanel = New StackPanel
myPanel.Margin = New Thickness(10)

Dim myRectangle As Rectangle = 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 DoubleAnimationPart 1: Create a DoubleAnimation

Una manera de hacer que un elemento fundido es animar su Opacity propiedad.One way to make an element fade in and out of view is to animate its Opacity property. Dado que el Opacity propiedad es de tipo Double, necesita una animación que genera valores double.Because the Opacity property is of type Double, you need an animation that produces double values. Un DoubleAnimation es una animación de este tipo.A DoubleAnimation is one such animation. Un DoubleAnimation crea una transición entre dos valores double.A DoubleAnimation creates a transition between two double values. Para especificar su valor inicial, establezca su From propiedad.To specify its starting value, you set its From property. Para especificar su valor final, establezca su To propiedad.To specify its ending value, you set its To property.

  1. Un valor de opacidad de 1.0 hace que el objeto completamente opaco y un valor de opacidad de 0.0 hace que sea completamente invisible.An opacity value of 1.0 makes the object completely opaque, and an opacity value of 0.0 makes it completely invisible. Para realizar la transición de animación de 1.0 a 0.0 establece su From propiedad 1.0 y su To propiedad 0.0.To make the animation transition from 1.0 to 0.0 you set its From property to 1.0 and its To property to 0.0. La siguiente muestra cómo crear un DoubleAnimation en XAML.The following shows how to create a DoubleAnimation in XAML.

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

    La siguiente muestra cómo crear un DoubleAnimation en el código.The following shows how to create a DoubleAnimation in code.

    DoubleAnimation myDoubleAnimation = new DoubleAnimation();
    myDoubleAnimation.From = 1.0;
    myDoubleAnimation.To = 0.0;
    
    Dim myDoubleAnimation As DoubleAnimation = New DoubleAnimation()
    myDoubleAnimation.From = 1.0
    myDoubleAnimation.To = 0.0
    
  2. A continuación, debe especificar un Duration.Next, you must specify a Duration. El Duration de una animación especifica cuánto tarda en ir desde su valor inicial al valor de destino.The Duration of an animation specifies how long it takes to go from its starting value to its destination value. La siguiente muestra cómo establecer el Duration en cinco segundos en XAML.The following shows how to set the Duration to five seconds in XAML.

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

    La siguiente muestra cómo establecer el Duration en cinco segundos en código.The following shows how to set the Duration to five seconds in code.

    myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
    
    myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
    
  3. El código anterior mostraba una animación que realiza la transición desde 1.0 a 0.0, lo que hace que el elemento de destino para la transición desde totalmente opaco a ser completamente invisible.The previous code showed an animation that transitions from 1.0 to 0.0, which causes the target element to fade from completely opaque to completely invisible. Para que el elemento aparezca progresivamente en la vista antes de desaparecer, establezca el AutoReverse propiedad de la animación a true.To make the element fade back into view after it vanishes, set the AutoReverse property of the animation to true. Para que la animación se repita indefinidamente, establezca su RepeatBehavior propiedad Forever. La siguiente muestra cómo establecer el AutoReverse y RepeatBehavior propiedades en XAML.To make the animation repeat indefinitely, set its RepeatBehavior property to Forever.The following shows how to set the AutoReverse and RepeatBehavior properties in XAML.

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

    La siguiente muestra cómo establecer el AutoReverse y RepeatBehavior propiedades en el código.The following shows how to set the AutoReverse and RepeatBehavior properties in code.

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

Parte 2: Crear un guion gráficoPart 2: Create a Storyboard

Para aplicar una animación a un objeto, se crea un Storyboard y usar el TargetName y TargetProperty adjunta propiedades para especificar el objeto y propiedad que se va a animar.To apply an animation to an object, you create a Storyboard and use the TargetName and TargetProperty attached properties to specify the object and property to animate.

  1. Crear el Storyboard y agregue la animación como su elemento secundario.Create the Storyboard and add the animation as its child. La siguiente muestra cómo se crea el Storyboard en XAML.The following shows how to create the Storyboard in XAML.

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

    Para crear el Storyboard en el código, declare un Storyboard variable en el nivel de clase.To create the Storyboard in code, declare a Storyboard variable at the class level.

    public partial class MainWindow : Window
    {
        private Storyboard myStoryboard;
    
    Class MainWindow
    
        Private myStoryboard As Storyboard
    

    A continuación, inicialice el Storyboard y agregue la animación como su elemento secundario.Then initialize the Storyboard and add the animation as its child.

    myStoryboard = new Storyboard();
    myStoryboard.Children.Add(myDoubleAnimation);
    
    myStoryboard = New Storyboard()
    myStoryboard.Children.Add(myDoubleAnimation)
    
  2. El Storyboard tiene que saber dónde aplicar la animación.The Storyboard has to know where to apply the animation. Use el Storyboard.TargetName propiedad adjunta para especificar el objeto que se va a animar.Use the Storyboard.TargetName attached property to specify the object to animate. La continuación muestra cómo establecer el nombre de destino de la DoubleAnimation a MyRectangle en XAML.The following shows how to set the target name of the DoubleAnimation to MyRectangle in XAML.

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

    La continuación muestra cómo establecer el nombre de destino de la DoubleAnimation a MyRectangle en el código.The following shows how to set the target name of the DoubleAnimation to MyRectangle in code.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
    
    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
    
  3. Use el TargetProperty propiedad adjunta para especificar la propiedad que se va a animar.Use the TargetProperty attached property to specify the property to animate. La siguiente muestra cómo se configura la animación al destino la Opacity propiedad de la Rectangle en XAML.The following shows how the animation is configured to target the Opacity property of the Rectangle in XAML.

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

    La continuación muestra cómo se configura la animación al destino la Opacity propiedad de la Rectangle en el código.The following shows how the animation is configured to target the Opacity property of the Rectangle in code.

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

Para obtener más información acerca de TargetProperty sintaxis y ejemplos adicionales, vea el Storyboards Overview.For more information about TargetProperty syntax and for additional examples, see the Storyboards Overview.

Parte 3 (XAML): Asociar el guion gráfico a un desencadenadorPart 3 (XAML): Associate the Storyboard with a Trigger

La manera más fácil de aplicar e iniciar un Storyboard en XAMLXAML consiste en usar un desencadenador de eventos.The easiest way to apply and start a Storyboard in XAMLXAML is to use an event trigger. En esta sección se muestra cómo asociar el Storyboard con un desencadenador en XAML.This section shows how to associate the Storyboard with a trigger in XAML.

  1. Crear un BeginStoryboard de objetos y asóciele su guion gráfico.Create a BeginStoryboard object and associate your storyboard with it. Un BeginStoryboard es un tipo de TriggerAction que aplica e inicia un Storyboard.A BeginStoryboard is a type of TriggerAction that applies and starts a 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. Crear un EventTrigger y agregue el BeginStoryboard a su Actions colección.Create an EventTrigger and add the BeginStoryboard to its Actions collection. Establecer el RoutedEvent propiedad de la EventTrigger al evento enrutado que se desea iniciar la Storyboard.Set the RoutedEvent property of the EventTrigger to the routed event that you want to start the Storyboard. (Para obtener más información sobre los eventos enrutados, vea el Routed Events Overview.)(For more information about routed events, see the Routed Events Overview.)

    <!-- 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. Agregar el EventTrigger a la Triggers colección del rectángulo.Add the EventTrigger to the Triggers collection of the Rectangle.

    <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 eventosPart 3 (Code): Associate the Storyboard with an Event Handler

La manera más fácil de aplicar e iniciar un Storyboard en código es usar un controlador de eventos.The easiest way to apply and start a Storyboard in code is to use an event handler. En esta sección se muestra cómo asociar el Storyboard con un controlador de eventos en el código.This section shows how to associate the Storyboard with an event handler in code.

  1. Registrarse para el Loaded eventos del rectángulo.Register for the Loaded event of the rectangle.

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
    
    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded
    
  2. Declare el controlador de eventos.Declare the event handler. En el controlador de eventos, use el Begin método para aplicar el guión gráfico.In the event handler, use the Begin method to apply the storyboard.

    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 completoComplete Example

La continuación muestra cómo crear un rectángulo que desaparece en XAML.The following shows how to create a rectangle that fades in and out of view in 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.The following shows how to create a rectangle that fades in and out of view in code.

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ónAnimation Types

Dado que las animaciones generan valores de propiedad, existen distintos tipos de animaciones para los diversos tipos de propiedades.Because animations generate property values, different animation types exist for different property types. Para animar una propiedad que acepta un Double, como el Width propiedad de un elemento, use una animación que genera Double valores.To animate a property that takes a Double, such as the Width property of an element, use an animation that produces Double values. Para animar una propiedad que acepta un Point, usa una animación que genera Point valores y así sucesivamente.To animate a property that takes a Point, use an animation that produces Point values, and so on. Debido al número de distintos tipos de propiedades, hay varias clases de animación en el System.Windows.Media.Animation espacio de nombres.Because of the number of different property types, there are several animation classes in the System.Windows.Media.Animation namespace. Afortunadamente se rigen por una convención de nomenclatura estricta que hace que sea fácil diferenciarlas:Fortunately, they follow a strict naming convention that makes it easy to differentiate between them:

  • <Tipo> animación<Type>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.Known as a "From/To/By" or "basic" animation, these animate between a starting and destination value, or by adding an offset value to its starting value.

    • Para especificar un valor inicial, establezca la propiedad From de la animación.To specify a starting value, set the From property of the animation.

    • Para especificar un valor final, establezca la propiedad To de la animación.To specify an ending value, set the To property of the animation.

    • Para especificar un valor de desplazamiento, establezca la propiedad By de la animación.To specify an offset value, set the By property of the animation.

    En los ejemplos de este tema se incluyen estas animaciones porque son las más fáciles de usar.The examples in this overview use these animations, because they are the simplest to use. Animaciones From/To/By se describen en detalle en la información general sobre animaciones From.From/To/By animations are described in detail in the From/To/By Animations Overview.

  • <Type>AnimationUsingKeyFrames<Type>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.Key frame animations are more powerful than From/To/By animations because you can specify any number of target values and even control their interpolation method. Algunos tipos solo se pueden animar con animaciones de fotogramas clave.Some types can only be animated with key frame animations. Animaciones de fotogramas clave se describen en detalle en la información general sobre animaciones de fotogramas clave.Key frame animations are described in detail in the Key-Frame Animations Overview.

  • <Type>AnimationUsingPath<Type>AnimationUsingPath

    Las animaciones de trazado permiten usar un trazado geométrico para generar valores animados.Path animations enable you to use a geometric path in order to produce animated values.

  • <Tipo> AnimationBase<Type>AnimationBase

    Clase abstracta que, cuando se implementa, anima un < tipo> valor.Abstract class that, when you implement it, animates a <Type> value. Esta clase actúa como clase base para < tipo> animación y < tipo> AnimationUsingKeyFrames clases.This class serves as the base class for <Type>Animation and <Type>AnimationUsingKeyFrames classes. Tiene que tratar directamente con estas clases solo si desea crear sus propias animaciones personalizadas.You have to deal directly with these classes only if you want to create your own custom animations. En caso contrario, use un < tipo> Animation o KeyFrame<tipo> animación.Otherwise, use a <Type>Animation or KeyFrame<Type>Animation.

En la mayoría de los casos, desea utilizar el < tipo> clases de animación, como DoubleAnimation y ColorAnimation.In most cases, you will want to use the <Type>Animation classes, such as DoubleAnimation and ColorAnimation.

En la tabla siguiente se muestran varios tipos de animación comunes y algunas propiedades con las que se usan.The following table shows several common animation types and some properties with which they are used.

Tipo de propiedadProperty type Animación básica correspondiente (From/To/By)Corresponding basic (From/To/By) animation Animación de fotogramas clave correspondienteCorresponding key frame animation Animación de trazado correspondienteCorresponding Path Animation Ejemplo de usoUsage example
Color ColorAnimation ColorAnimationUsingKeyFrames NingunaNone Animar el Color de un SolidColorBrush o GradientStop.Animate the Color of a SolidColorBrush or a GradientStop.
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath Animar el Width de un DockPanel o Height de un Button.Animate the Width of a DockPanel or the Height of a Button.
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath Animar el Center posición de un EllipseGeometry.Animate the Center position of an EllipseGeometry.
String NingunaNone StringAnimationUsingKeyFrames NingunaNone Animar el Text de un TextBlock o Content de un Button.Animate the Text of a TextBlock or the Content of a Button.

Las animaciones son escalas de tiempoAnimations Are Timelines

Todos los tipos de animaciones heredan de la Timeline clase; por lo tanto, todas las animaciones son tipos especializados de escalas de tiempo.All the animation types inherit from the Timeline class; therefore, all animations are specialized types of timelines. Un Timeline define un segmento de tiempo.A Timeline defines a segment of time. Puede especificar el comportamientos de temporización de escala de tiempo: su Duration, cuántas veces se repite e incluso cómo rapidez pasa el tiempo para ella.You can specify the timing behaviors of a timeline: its Duration, how many times it is repeated, and even how fast time progresses for it.

Dado que una animación es un Timeline, también representa un segmento de tiempo.Because an animation is a Timeline, it also represents a segment of time. Una animación también calcula los valores de salida de medida que avanza por su segmento de tiempo especificado (o Duration).An animation also calculates output values as it progresses though its specified segment of time (or Duration). A medida que la animación avanza, o se "reproduce", actualiza la propiedad a la que está asociada.As the animation progresses, or "plays," it updates the property that it is associated with.

Tres propiedades de sincronización usados con frecuencia son Duration, AutoReverse, y RepeatBehavior.Three frequently used timing properties are Duration, AutoReverse, and RepeatBehavior.

Propiedad DurationThe Duration Property

Como se ha mencionado previamente, un objeto Timeline representa un segmento de tiempo.As previously mentioned, a timeline represents a segment of time. La longitud de ese segmento viene determinada por la Duration de la escala de tiempo, que normalmente se especifica mediante el uso de un TimeSpan valor.The length of that segment is determined by the Duration of the timeline, which is usually specified by using a TimeSpan value. Cuando una escala de tiempo llega al final de su duración, ha completado una iteración.When a timeline reaches the end of its duration, it has completed an iteration.

Una animación usa su Duration propiedad para determinar su valor actual.An animation uses its Duration property to determine its current value. Si no especifica un Duration valor para una animación, se usa 1 segundo, que es el valor predeterminado.If you do not specify a Duration value for an animation, it uses 1 second, which is the default.

La sintaxis siguiente muestra una versión simplificada de la Lenguaje XAML (Extensible Application Markup Language)Extensible Application Markup Language (XAML) atributo sintaxis para el Duration propiedad.The following syntax shows a simplified version of the Lenguaje XAML (Extensible Application Markup Language)Extensible Application Markup Language (XAML) attribute syntax for the Duration property.

horas : minutos : segundoshours : minutes : seconds

En la tabla siguiente se muestra varias Duration configuraciones y sus valores resultantes.The following table shows several Duration settings and their resulting values.

ParámetroSetting Valor resultanteResulting value
0:0:5.50:0:5.5 5,5 segundos.5.5 seconds.
0:30:5.50:30:5.5 30 minutos y 5,5 segundos.30 minutes and 5.5 seconds.
1:30:5.51:30:5.5 1 hora, 30 minutos y 5,5 segundos.1 hour, 30 minutes, and 5.5 seconds.

Una manera de especificar un Duration en código es usar el FromSeconds método para crear un TimeSpan, a continuación, declarar un nuevo Duration estructura está utilizando TimeSpan.One way to specify a Duration in code is to use the FromSeconds method to create a TimeSpan, then declare a new Duration structure using that TimeSpan.

Para obtener más información acerca de Duration valores y la completa Lenguaje XAML (Extensible Application Markup Language)Extensible Application Markup Language (XAML) sintaxis, vea el Duration estructura.For more information about Duration values and the complete Lenguaje XAML (Extensible Application Markup Language)Extensible Application Markup Language (XAML) syntax, see the Duration structure.

AutoReverseAutoReverse

El AutoReverse propiedad especifica si una escala de tiempo se reproduce con versiones anteriores una vez que llega al final de su Duration.The AutoReverse property specifies whether a timeline plays backward after it reaches the end of its Duration. Si establece esta propiedad de animación en true, la animación se invierte después de llegar al final de su Duration, reproduce desde su valor final a su valor inicial.If you set this animation property to true, an animation reverses after it reaches the end of its Duration, playing from its ending value back to its starting value. De forma predeterminada, esta propiedad es false.By default, this property is false.

RepeatBehaviorRepeatBehavior

El RepeatBehavior propiedad especifica cuántas veces se reproduce una escala de tiempo.The RepeatBehavior property specifies how many times a timeline plays. 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.By default, timelines have an iteration count of 1.0, which means they play one time and do not repeat at all.

Para obtener más información acerca de estas propiedades y otras, vea el información general sobre comportamientos de temporización.For more information about these properties and others, see the Timing Behaviors Overview.

Aplicar una animación a una propiedadApplying an Animation to a Property

En las secciones anteriores se han descrito los distintos tipos de animaciones y sus propiedades de control de tiempo.The previous sections describe the different types of animations and their timing properties. En esta sección se muestra cómo aplicar la animación a la propiedad que se desea animar.This section shows how to apply the animation to the property that you want to animate. Storyboard los objetos proporcionan una manera de aplicar animaciones a propiedades.Storyboard objects provide one way to apply animations to properties. Un Storyboard es un escala de tiempo contenedora que proporciona información de destino para las animaciones que contiene.A Storyboard is a container timeline that provides targeting information for the animations it contains.

Objetos y propiedades de destinoTargeting Objects and Properties

El Storyboard clase proporciona el TargetName y TargetProperty propiedades adjuntas.The Storyboard class provides the TargetName and TargetProperty attached properties. Al establecer estas propiedades en una animación, se indica a la animación qué debe animar.By setting these properties on an animation, you tell the animation what to animate. Sin embargo, para que una animación pueda tener un objeto como destino, normalmente se debe dar un nombre al objeto.However, before an animation can target an object, the object must usually be given a name.

Asignar un nombre a un FrameworkElement difiere de asignar un nombre a un Freezable objeto.Assigning a name to a FrameworkElement differs from assigning a name to a Freezable object. 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.Most controls and panels are framework elements; however, most purely graphical objects, such as brushes, transforms, and geometries, are freezable objects. Si no estás seguro de si un tipo es un FrameworkElement o un Freezable, hacen referencia a la jerarquía de herencia sección de su documentación de referencia.If you are not sure whether a type is a FrameworkElement or a Freezable, refer to the Inheritance Hierarchy section of its reference documentation.

  • Para realizar un FrameworkElement un destino de animación, darle un nombre estableciendo su Name propiedad.To make a FrameworkElement an animation target, you give it a name by setting its Name property. En el código, también debe usar el RegisterName método para registrar el nombre del elemento con la página a la que pertenece.In code, you must also use the RegisterName method to register the element name with the page to which it belongs.

  • Para realizar un Freezable objeto un destino de animación en XAMLXAML, usa el x: Name Directive para asignarle un nombre.To make a Freezable object an animation target in XAMLXAML, you use the x:Name Directive to assign it a name. En el código, use simplemente el RegisterName método para registrar el objeto con la página a la que pertenece.In code, you just use the RegisterName method to register the object with the page to which it belongs.

Las secciones siguientes proporcionan un ejemplo de cómo asignar un elemento en XAMLXAML y el código.The sections that follow provide an example of naming an element in XAMLXAML and code. Para obtener información más detallada sobre la nomenclatura y establecimiento de destinos, consulte el Storyboards Overview.For more detailed information about naming and targeting, see the Storyboards Overview.

Aplicar e iniciar guiones gráficosApplying and Starting Storyboards

Para iniciar un guión gráfico en XAMLXAML, asóciela con un EventTrigger.To start a storyboard in XAMLXAML, you associate it with an EventTrigger. Un EventTrigger es un objeto que describe qué acciones debe realizar cuando se produce un evento especificado.An EventTrigger is an object that describes what actions to take when a specified event occurs. Una de esas acciones puede ser un BeginStoryboard acción, que se utiliza para iniciar el guion gráfico.One of those actions can be a BeginStoryboard action, which you use to start your storyboard. 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.Event triggers are similar in concept to event handlers because they enable you to specify how your application responds to a particular event. A diferencia de los controladores de eventos, los desencadenadores de eventos se pueden describir totalmente en XAMLXAML; no se requiere ningún otro código.Unlike event handlers, event triggers can be fully described in XAMLXAML; no other code is required.

Para iniciar un Storyboard en código, puede usar un EventTrigger o usar el Begin método de la Storyboard clase.To start a Storyboard in code, you can use an EventTrigger or use the Begin method of the Storyboard class.

Control interactivo de guiones gráficosInteractively Control a Storyboard

El ejemplo anterior mostró cómo iniciar un Storyboard cuando se produce un evento.The previous example showed how to start a Storyboard when an event occurs. Puede controlar interactivamente un Storyboard después de iniciarse: puede pausar, reanudar, detener, hacer que avance hasta su período de relleno, buscar y quitar el Storyboard.You can also interactively control a Storyboard after it starts: you can pause, resume, stop, advance it to its fill period, seek, and remove the Storyboard. Para obtener más información y un ejemplo que muestra cómo controlar interactivamente un Storyboard, consulte el Storyboards Overview.For more information and an example that shows how to interactively control a Storyboard, see the Storyboards Overview.

Comportamiento tras la finalización de una animaciónWhat Happens After an Animation Ends?

El FillBehavior propiedad especifica cómo se comporta una escala de tiempo cuando finaliza.The FillBehavior property specifies how a timeline behaves when it ends. De forma predeterminada, se inicia una escala de tiempo Filling cuando termina.By default, a timeline starts Filling when it ends. Una animación que se Filling mantiene su valor de salida final.An animation that is Filling holds its final output value.

El DoubleAnimation en el ejemplo anterior no finaliza porque su RepeatBehavior propiedad está establecida en Forever.The DoubleAnimation in the previous example does not end because its RepeatBehavior property is set to Forever. En el ejemplo siguiente se anima un rectángulo mediante el uso de una animación similar.The following example animates a rectangle by using a similar animation. A diferencia del ejemplo anterior, el RepeatBehavior y AutoReverse las propiedades de esta animación se dejan en sus valores predeterminados.Unlike the previous example, the RepeatBehavior and AutoReverse properties of this animation are left at their default values. Por consiguiente, la animación progresa de 1 a 0 en cinco segundos y luego se detiene.Therefore, the animation progresses from 1 to 0 over five seconds and then stops.

<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 ha cambiado respecto a su valor predeterminado, que es HoldEnd, la animación retiene el valor final, 0, cuando finaliza.Because its FillBehavior was not changed from its default value, which is HoldEnd, the animation holds it final value, 0, when it ends. Por lo tanto, el Opacity de la permanece rectángulo en 0 después de la animación finaliza.Therefore, the Opacity of the rectangle remains at 0 after the animation ends. Si establece la Opacity del rectángulo en otro valor, el código parece que no tienen ningún efecto, porque la animación todavía influye la Opacity propiedad.If you set the Opacity of the rectangle to another value, your code appears to have no effect, because the animation is still affecting the Opacity property.

Una manera de recobrar el control de una propiedad animada en el código es usar el BeginAnimation método y especifique null para el AnimationTimeline parámetro.One way to regain control of an animated property in code is to use the BeginAnimation method and specify null for the AnimationTimeline parameter. Para obtener más información y un ejemplo, vea establecer una propiedad después de animarla con un guión gráfico.For more information and an example, see Set a Property After Animating It with a Storyboard.

Tenga en cuenta que, aunque se establece un valor de propiedad que tiene un Active o Filling animación parece no tener ningún efecto, cambie el valor de propiedad.Note that, although setting a property value that has an Active or Filling animation appears to have no effect, the property value does change. Para obtener más información, consulte el Animation and Timing System Overview.For more information, see the Animation and Timing System Overview.

Animaciones con enlace de datos y animaciones animadasData Binding and Animating Animations

La mayoría de las propiedades de animación pueden ser datos enlazados o animadas; Por ejemplo, puede animar el Duration propiedad de un DoubleAnimation.Most animation properties can be data bound or animated; for example, you can animate the Duration property of a 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.However, because of the way the timing system works, data bound or animated animations do not behave like other data bound or animated objects. Para entender su comportamiento, le será útil comprender el significado de aplicar una animación a una propiedad.To understand their behavior, it helps to understand what it means to apply an animation to a property.

Consulte el ejemplo en la sección anterior que mostraba cómo animar el Opacity de un rectángulo.Refer to the example in the previous section that showed how to animate the Opacity of a rectangle. Cuando se carga el rectángulo en el ejemplo anterior, su desencadenador de eventos se aplica el Storyboard.When the rectangle in the previous example is loaded, its event trigger applies the Storyboard. El sistema de temporización crea una copia de la Storyboard y su animación.The timing system creates a copy of the Storyboard and its animation. Estas copias se inmovilizan (sólo lectura) y Clock se crean objetos de ellos.These copies are frozen (made read-only) and Clock objects are created from them. Estos relojes son los que realmente se encargan de animar las propiedades de destino.These clocks do the actual work of animating the targeted properties.

El sistema de temporización crea un reloj para la DoubleAnimation y lo aplica al objeto y propiedad que se especifica mediante el TargetName y TargetProperty de la DoubleAnimation.The timing system creates a clock for the DoubleAnimation and applies it to the object and property that is specified by the TargetName and TargetProperty of the DoubleAnimation. En este caso, el sistema de control de tiempo aplica el reloj para la Opacity propiedad del objeto denominado "MyRectangle".In this case, the timing system applies the clock to the Opacity property of the object that is named "MyRectangle."

Aunque también se crea un reloj para la Storyboard, el reloj no se aplica a todas las propiedades.Although a clock is also created for the Storyboard, the clock is not applied to any properties. Su propósito es controlar su reloj secundario, el reloj que se crea para el DoubleAnimation.Its purpose is to control its child clock, the clock that is created for the DoubleAnimation.

Para que una animación refleje cambios de enlace de datos o de animación, su reloj se debe regenerar.For an animation to reflect data binding or animation changes, its clock must be regenerated. Los relojes no se regeneran automáticamente.Clocks are not regenerated for you automatically. Para que una animación refleje los cambios, vuelva a aplicar su guion gráfico mediante el uso de un BeginStoryboard o Begin método.To make an animation reflect changes, reapply its storyboard by using a BeginStoryboard or the Begin method. Al usar cualquiera de estos métodos, la animación se reinicia.When you use either of these methods, the animation restarts. En el código, puede usar el Seek hacer una copia de método para el guion gráfico a su posición anterior.In code, you can use the Seek method to shift the storyboard back to its previous position.

Para un ejemplo de datos de una animación enlazada, consulte ejemplo Key Spline Animation.For an example of a data bound animation, see Key Spline Animation Sample. Para obtener más información acerca de cómo funciona el sistema de animación y temporización, vea Animation and Timing System Overview.For more information about how the animation and timing system works, see Animation and Timing System Overview.

Otras maneras de crear animacionesOther Ways to Animate

Los ejemplos de este tema muestran cómo aplicar animaciones mediante guiones gráficos.The examples in this overview show how to animate by using storyboards. En el código se pueden aplicar animaciones de otras maneras.When you use code, you can animate in several other ways. Para obtener más información, consulte el técnicas de animación de información general sobre propiedades.For more information, see the Property Animation Techniques Overview.

Ejemplos de animacionesAnimation Samples

Los ejemplos siguientes pueden ayudarle a familiarizarse con la forma de agregar animaciones a sus aplicaciones.The following samples can help you start adding animation to your applications.

TítuloTitle DescripciónDescription
Información general sobre sistemas de control de tiempo y animación Animation and Timing System Overview Describe cómo se utiliza el sistema de temporización el Timeline y Clock clases, que le permiten crear animaciones.Describes how the timing system uses the Timeline and Clock classes, which allow you to create animations.
Sugerencias y trucos para animacionesAnimation Tips and Tricks Enumera las sugerencias útiles para solucionar problemas con animaciones, como el rendimiento.Lists helpful tips for solving issues with animations, such as performance.
Información general sobre animaciones personalizadas Custom Animations Overview Describe cómo extender el sistema de animación con fotogramas clave, clases de animación o devoluciones de llamada por fotograma.Describes how to extend the animation system with key frames, animation classes, or per-frame callbacks.
Información general sobre animaciones From/To/ByFrom/To/By Animations Overview Describe cómo crear una animación que realiza la transición entre dos valores.Describes how to create an animation that transitions between two values.
Información general sobre animaciones de fotogramas claveKey-Frame Animations Overview Describe cómo crear una animación con varios valores de destino, incluida la capacidad de controlar el método de interpolación.Describes how to create an animation with multiple target values, including the ability to control the interpolation method.
Funciones de aceleración Easing Functions Explica cómo aplicar fórmulas matemáticas a las animaciones para obtener un comportamiento realista, como el rebote.Explains how to apply mathematical formulas to your animations to get realistic behavior, such as bouncing.
Información general sobre animaciones en trazados Path Animations Overview Describe cómo mover o girar un objeto a lo largo de un trazado complejo.Describes how to move or rotate an object along a complex path.
Información general sobre técnicas de animación de propiedadesProperty Animation Techniques Overview Describe las animaciones de propiedades mediante guiones gráficos, animaciones locales, relojes y animaciones por fotograma.Describes property animations using storyboards, local animations, clocks, and per-frame animations.
Información general sobre objetos Storyboard Storyboards Overview Describe cómo utilizar guiones gráficos con varias escalas de tiempo para crear animaciones complejas.Describes how to use storyboards with multiple timelines to create complex animations.
Información general sobre comportamientos de control de tiempoTiming Behaviors Overview Describe el Timeline tipos y propiedades que se usan en animaciones.Describes the Timeline types and properties used in animations.
Información general sobre eventos de control de tiempoTiming Events Overview Describe los eventos disponibles en el Timeline y Clock objetos para ejecutar código en los puntos de la escala de tiempo, como iniciar, pausar, reanudar, omitir o detener.Describes the events available on the Timeline and Clock objects for executing code at points in the timeline, such as begin, pause, resume, skip, or stop.
Temas "Cómo..."How-to Topics Contiene ejemplos de código para usar animaciones y escalas de tiempo en una aplicación.Contains code examples for using animations and timelines in your application.
Temas de procedimientos de relojesClocks How-to Topics Contiene ejemplos de código para usar la Clock objeto en la aplicación.Contains code examples for using the Clock object in your application.
Temas de procedimientos de fotogramas claveKey-Frame How-to Topics Contiene ejemplos de código para usar animaciones de fotogramas clave en una aplicación.Contains code examples for using key-frame animations in your application.
Temas de procedimientos de animación de trazadoPath Animation How-to Topics Contiene ejemplos de código para usar animaciones de trazado en una aplicación.Contains code examples for using path animations in your application.

ReferenciaReference

Timeline

Storyboard

BeginStoryboard

Clock