Compartir a través de

Información general sobre animaciones

Windows Presentation Foundation (WPF) proporciona un conjunto eficaz de características de diseño y gráficos que permiten crear interfaces de usuario atractivas y documentos atractivos. La animación puede hacer que una interfaz de usuario atractiva sea aún más espectacular y utilizable. Al animar un color de fondo o aplicar una animación Transform, puede crear transiciones de pantalla dramáticas o proporcionar indicaciones visuales útiles.

Esta visión general proporciona una introducción al sistema de animación y tiempo de WPF. Se centra en la animación de objetos WPF mediante guiones gráficos.

Presentación de animaciones

La animación es una ilusión que se crea al recorrer rápidamente una serie de imágenes, cada una ligeramente diferente de la última. El cerebro percibe el grupo de imágenes como una sola escena cambiante. En la película, esta ilusión se crea mediante cámaras que graban muchas fotografías, o fotogramas, cada segundo. Cuando un proyector reproduce los fotogramas, el público ve una imagen en movimiento.

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

  • El programa crea un temporizador.

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

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

  • A continuación, el programa actualiza el rectángulo con el nuevo valor y lo vuelve a dibujar.

Antes de WPF, los desarrolladores de Microsoft Windows tenían que crear y administrar sus propios sistemas de control de tiempo o usar bibliotecas personalizadas especiales. WPF incluye un sistema de control de tiempo eficaz que se expone a través de código administrado y XAML y que está profundamente integrado en el marco wpF. La animación de WPF facilita la animación de controles y otros objetos gráficos.

WPF controla todo el trabajo en segundo plano de administrar un sistema de control de tiempo y volver a dibujar la pantalla de forma eficaz. Proporciona clases de temporización que le permiten centrarse en los efectos que desea crear, en lugar de la mecánica para lograrlos. WPF también facilita la creación de animaciones propias mediante la exposición de clases base de animación desde las que las clases pueden heredar, para generar animaciones personalizadas. Estas animaciones personalizadas obtienen muchas 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 sobre el sistema de control de tiempo, las animaciones de WPF pueden ser más fáciles de usar. Lo más importante es que, en WPF, anima objetos aplicando animación a sus propiedades individuales. Por ejemplo, para hacer crecer un elemento de marco, anima sus propiedades Width y Height. Para que un objeto se desvanezca desde la vista, anima su Opacity propiedad.

Para que una propiedad tenga funcionalidades de animación, debe cumplir los tres requisitos siguientes:

WPF contiene muchos objetos que tienen IAnimatable propiedades. Los controles como Button y TabControl, y también Panel y Shape los objetos heredan de DependencyObject. La mayoría de sus propiedades son propiedades de dependencia.

Puede usar animaciones casi en cualquier lugar, lo que incluye en estilos y plantillas de control. Las animaciones no tienen que ser visuales; Puede animar objetos que no forman parte de la interfaz de usuario si cumplen los criterios descritos en esta sección.

Ejemplo: Hacer que un elemento se desvanezca y salga de la vista

En este ejemplo se muestra cómo usar una animación WPF para animar el valor de una propiedad de dependencia. Usa un DoubleAnimation, que es un tipo de animación que genera valores de Double, para animar la propiedad Opacity de un Rectangle. Como resultado, la Rectangle aparece y desaparece del campo de visión.

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

A continuación se muestra cómo crear un Rectangle elemento en un StackPanel elemento 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 dentro de un 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 hacer que un elemento se desvanezca y salga de la vista es animar su Opacity propiedad. Dado que la Opacity propiedad es de tipo Double, necesita una animación que genere valores dobles. Una DoubleAnimation es una animación de este tipo. Un DoubleAnimation crea una transición entre dos valores dobles. Para especificar su valor inicial, establezca su From propiedad . Para especificar su valor final, establezca la 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 realizar la transición de animación de 1.0 a 0.0, configure su propiedad From en 1.0 y su propiedad To en 0.0. A continuación se muestra cómo crear un DoubleAnimation en XAML.

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

    A continuación se muestra cómo crear un DoubleAnimation elemento en el 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 Duration. El Duration de una animación especifica cuánto tiempo tarda en pasar de su valor inicial a su valor de destino. A continuación se muestra cómo establecer el valor de 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 el Duration a cinco segundos en el código.

    myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));

    myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))

  3. El código anterior mostró una animación que pasa de 1.0 a 0.0, lo que hace que el elemento de destino se desvanezca de completamente opaco a completamente invisible. Para que el elemento vuelva a aparecer a la vista después de desaparecer, establezca la propiedad AutoReverse de la animación en true. Para que la animación se repita indefinidamente, asigne su propiedad RepeatBehavior a Forever. A continuación se muestra cómo establecer las AutoReverse propiedades 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 AutoReverse propiedades y RepeatBehavior en el código.

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

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

Parte 2: Crear un guión gráfico

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

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

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

    Para crear el 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 aplicar la animación. Utilice la Storyboard.TargetName propiedad adjunta para especificar el objeto que se va a animar. A continuación se muestra cómo establecer el nombre objetivo de DoubleAnimation a 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 del DoubleAnimation al MyRectangle en el código.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)

  3. Utilice la TargetProperty propiedad adjunta para especificar la propiedad que se va a animar. A continuación se muestra cómo se configura la animación para establecer como destino la Opacity propiedad 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 apunte a la propiedad Opacity del Rectangle en el código.

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

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

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

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

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

  1. Cree un BeginStoryboard objeto y asocie el guión gráfico con él. Un BeginStoryboard es un tipo de TriggerAction que se 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 un EventTrigger y agregue el BeginStoryboard a su colección Actions. Establezca la propiedad RoutedEvent de EventTrigger al evento enrutado que desea iniciar 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 guión gráfico a un controlador de eventos

La manera más fácil de aplicar e iniciar un elemento Storyboard en el código es usar un controlador de eventos. En esta sección se muestra cómo asociar el controlador de eventos Storyboard en el código.

  1. Regístrese para el Loaded evento 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 Begin método para aplicar el guión 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 desvanezca dentro y fuera de la vista 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 desvanezca dentro y fuera de la vista 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 diferentes tipos de animación para diferentes tipos de propiedad. Para animar una propiedad que toma Double, como la propiedad Width de un elemento, use una animación que produzca valores Double. Para animar una propiedad que requiere un Point, utilice una animación que genere valores Point, y así sucesivamente. Debido a la variedad de tipos de propiedades, existen múltiples clases de animación en el espacio de nombres System.Windows.Media.Animation. Afortunadamente, siguen una convención de nomenclatura estricta que facilita la diferenciación entre ellas:

  • < Tipo>Animación

    Conocidas como animaciones "From/To/By" o "básicas", estas animaciones se realizan entre un valor inicial y uno de destino, o mediante la adición de un valor de desplazamiento a su 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 esta introducción se usan estas animaciones, ya que son las más sencillas de usar. Las animaciones from/To/By se describen en detalle en la información general de animaciones de from/to/by.

  • < Tipo>AnimationUsingKeyFrames

    Las animaciones de fotograma clave son más eficaces que las animaciones From/To/By, ya que puedes 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 fotograma clave. Las animaciones de fotograma clave se describen en detalle en el Key-Frame Resumen de Animaciones.

  • < Tipo>AnimaciónUsandoRuta

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

  • < Tipo>AnimationBase

    Clase abstracta que, al implementarla, anima un valor <. Esta clase sirve como clase base para las clases <Type>Animation y <Type>AnimationUsingKeyFrames. Solo tienes que tratar directamente con estas clases si quieres crear tus propias animaciones personalizadas. De lo contrario, use una <animación de tipo> o una <animación de fotograma clave>.

En la mayoría de los casos, querrá usar las <clases de animación de tipo>, 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 (de/a/por) Animación de fotograma clave correspondiente Animación de ruta correspondiente Ejemplo de uso
Color ColorAnimation ColorAnimationUsingKeyFrames Ninguno Animar el Color de un SolidColorBrush o un GradientStop.
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath Anima el Width de un DockPanel o el Height de un Button.
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath Animar la Center posición de un EllipseGeometry.
String Ninguno StringAnimationUsingKeyFrames Ninguno Anima el Text de un TextBlock o el Content de un Button.

Las animaciones son líneas de tiempo

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

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

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

La propiedad Duración

Como se mencionó anteriormente, una escala de tiempo representa un segmento de tiempo. La longitud de ese segmento viene determinada por la Duration de la escala de tiempo, que normalmente se especifica mediante un TimeSpan valor . Cuando una escala de tiempo alcanza el final de su duración, ha completado una iteración.

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

La sintaxis siguiente muestra una versión simplificada de la sintaxis del atributo Extensible Application Markup Language (XAML) para la Duration propiedad.

horas:minutos:segundos

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

Para obtener más información sobre los valores Duration y la sintaxis completa del lenguaje de marcado de aplicaciones extensibles (XAML), consulta la estructura Duration.

AutoReverse

La AutoReverse propiedad especifica si una línea de tiempo se reproduce hacia atrás una vez que alcanza el final de su Duration. Si establece esta propiedad de animación en true, una animación se invierte después de que llegue al final de su Duration, reproduciéndose desde su valor final al inicial. De forma predeterminada, esta propiedad es false.

ComportamientoRepetido

La RepeatBehavior propiedad especifica cuántas veces se reproduce una línea de tiempo. Por defecto, las líneas de tiempo tienen un recuento de iteración de 1.0, lo que significa que se reproducen una vez y no se repiten.

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

Aplicar una animación a una propiedad

En las secciones anteriores se describen los diferentes tipos de animaciones y sus propiedades de tiempo. En esta sección se muestra cómo aplicar la animación a la propiedad que desea animar. Storyboard los objetos proporcionan una manera de aplicar animaciones a las propiedades. Es Storyboard 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é animar. Sin embargo, antes de que una animación pueda tener como destino un objeto, el objeto normalmente debe tener un nombre.

Asignar un nombre a un FrameworkElement elemento difiere de asignar un nombre a un Freezable objeto . La mayoría de los controles y paneles son elementos del marco; sin embargo, la mayoría de los objetos puramente gráficos, como pinceles, transformaciones y geometrías, son objetos congelables. Si no está seguro de si un tipo es un FrameworkElement o un Freezable, consulte la sección Jerarquía de Herencia de su documentación de referencia.

  • Para crear un FrameworkElement destino de animación, asígnele un nombre estableciendo su Name propiedad. En el 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 convertir un objeto en Freezable un destino de animación en XAML, usas la directiva x:Name para asignarle un nombre. En el código, solo tiene que usar el RegisterName método para registrar el objeto con la página a la que pertenece.

Las secciones siguientes proporcionan un ejemplo de nomenclatura de un elemento en XAML y código. Para obtener información más detallada sobre los nombres y el direccionamiento, consulte la Información General sobre Storyboards.

Implementar y comenzar guiones visuales

Para iniciar un guión gráfico en XAML, lo asocias a un EventTrigger. Es EventTrigger un objeto que describe las acciones que se deben realizar cuando se produce un evento especificado. Una de esas acciones puede ser una BeginStoryboard acción, que se usa para iniciar el guión gráfico. Los desencadenadores de eventos son similares en concepto a los controladores de eventos, ya que permiten especificar cómo responde la aplicación a un evento determinado. A diferencia de los controladores de eventos, los desencadenadores de eventos se pueden describir completamente en XAML; no se requiere ningún otro código.

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

Controlar interactivamente un guión gráfico

En el ejemplo anterior se mostró cómo iniciar un Storyboard cuando se produce un evento. También puede controlar interactivamente una Storyboard una vez que se inicia: puede pausar, reanudar, detener, avanzar hasta su período de relleno, buscar y quitar el Storyboard. Para obtener más información y un ejemplo en el que se muestra cómo controlar interactivamente un Storyboard, vea la Descripción general de los guiones gráficos.

¿Qué ocurre después de que finalice una animación?

La FillBehavior propiedad especifica el comportamiento de una línea de tiempo al finalizar. De forma predeterminada, una línea de tiempo comienza Filling cuando termina. Animación que Filling mantiene su valor de salida final.

El DoubleAnimation en el ejemplo anterior no finaliza porque su propiedad RepeatBehavior está establecida en Forever. En el ejemplo siguiente se anima un rectángulo mediante una animación similar. A diferencia del ejemplo anterior, las RepeatBehavior propiedades y AutoReverse de esta animación se dejan en sus valores predeterminados. Por lo tanto, la animación avanza de 1 a 0 durante 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));

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

Como su valor no se modificó desde el valor predeterminado, que es FillBehavior, la animación mantiene su valor final, 0, cuando termina. Por lo tanto, el Opacity del rectángulo permanece en 0 después de que finalice la animación. Si establece el Opacity del rectángulo en otro valor, el código parece no tener ningún efecto, ya que la animación sigue afectando a la propiedad Opacity.

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

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

Enlaces de datos y animación de animaciones

La mayoría de las propiedades de animación pueden ser enlazadas a datos o animadas; por ejemplo, puede animar la propiedad Duration de un DoubleAnimation. Sin embargo, debido a la forma en que funciona el sistema de temporización, las animaciones vinculadas a datos o animadas no se comportan como otros objetos vinculados o animados. Para comprender su comportamiento, ayuda a comprender lo que significa aplicar una animación a una propiedad.

Consulte el ejemplo de la sección anterior que mostró cómo animar el Opacity de un rectángulo. Cuando se carga el rectángulo del ejemplo anterior, su desencadenador de eventos aplica el Storyboard. El sistema de control de tiempo crea una copia del Storyboard y su animación. Estas copias se congelan (se convierten en solo lectura) y los objetos Clock se crean a partir de ellas. Estos relojes realizan el trabajo real de animar las propiedades de destino.

El sistema de temporización crea un reloj para DoubleAnimation y lo aplica al objeto y la propiedad especificados por el TargetName y TargetProperty de DoubleAnimation. En este caso, el sistema de control de tiempo aplica el reloj a la Opacity propiedad del objeto denominado "MyRectangle".

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

Para que una animación refleje el enlace de datos o los cambios de animación, su temporizador debe regenerarse. Los relojes no se regeneran automáticamente. Para hacer que una animación refleje los cambios, vuelva a aplicar su guión gráfico usando BeginStoryboard o el método Begin. Cuando se usa cualquiera de estos métodos, la animación se reinicia. En el código, puede usar el Seek método para volver a desplazar el guión gráfico a su posición anterior.

Para obtener un ejemplo de una animación enlazada a datos, vea Ejemplo de animación de spline clave. Para obtener más información sobre cómo funciona el sistema de animación y control de tiempo, consulta Animation and Timing System Overview.

Otras formas de animar

Los ejemplos de esta introducción muestran cómo animar mediante guiones gráficos. Al usar código, puede animar de varias maneras diferentes. Para obtener más información, vea Información general sobre las técnicas de animación de propiedades.

Ejemplos de animación

Los ejemplos siguientes pueden ayudarle a empezar a agregar animación a las aplicaciones.

Título Descripción
Información general del sistema de animación y control de tiempo Describe cómo el sistema de control de tiempo usa las Timeline clases y Clock , que permiten crear animaciones.
Sugerencias y trucos de animación Muestra sugerencias útiles para resolver problemas con animaciones, como el rendimiento.
Información general sobre animaciones personalizadas Se describe cómo ampliar el sistema de animación utilizando fotogramas clave, clases de animación o llamadas a funciones por fotograma.
Visión general de las animaciones Del/Hacia/Por Describe cómo crear una animación que transpase entre dos valores.
Información general sobre animaciones deKey-Frame 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 suavizado Explica cómo aplicar fórmulas matemáticas a tus animaciones para obtener un comportamiento realista, como el rebote.
Resumen de animaciones de trayectoria Describe cómo mover o girar un objeto a lo largo de una trayectoria compleja.
Introducción a las técnicas de animación de propiedades Describe animaciones de propiedades mediante guiones gráficos, animaciones locales, relojes y animaciones por fotograma.
Información general sobre guiones gráficos Describe cómo usar guiones gráficos con varias escalas de tiempo para crear animaciones complejas.
Información general sobre los comportamientos de control de tiempo Describe los Timeline tipos y propiedades usados en animaciones.
Descripción general de eventos temporales Describe los eventos disponibles en los objetos Timeline y Clock para ejecutar código en puntos de la línea de tiempo, como comenzar, pausar, reanudar, omitir o detener.
Temas de procedimiento Contiene ejemplos de código para usar animaciones y escalas de tiempo en la aplicación.
Temas de cómo hacer relojes Contiene ejemplos de código para utilizar el objeto Clock en tu aplicación.
Key-Frame Temas de cómo hacer Contiene ejemplos de código para usar animaciones con fotogramas clave en tu aplicación.
Temas de guía sobre animación de trayectorias Contiene ejemplos de código para usar animaciones de ruta de acceso en la aplicación.

Referencia