Información general sobre técnicas de animación de propiedades
En este tema se describen los enfoques diferentes para animar propiedades: guiones gráficos, animaciones locales, relojes y animaciones por fotograma.
Requisitos previos
Para entender este tema, debe estar familiarizado con las características de animación básicas descritas en Información general sobre animaciones.
Distintas maneras de animar
Dado que hay muchos escenarios diferentes para animar propiedades, WPF proporciona varios enfoques para ello.
Para cada enfoque, en la tabla siguiente se indica si se puede utilizar por instancia, en estilos, en plantillas de control o en plantillas de datos; si se puede utilizar en XAML; y si el enfoque permite controlar interactivamente la animación. "Por instancia" se refiere a la técnica de aplicar directamente una animación o guión gráfico a las instancias de un objeto, en lugar de en un estilo, una plantilla de control o una plantilla de datos.
Técnica de animación |
Escenarios |
Admite XAML |
Control interactivo |
|---|---|---|---|
Animación de guión gráfico |
Por instancia, Style, ControlTemplate, DataTemplate |
Sí |
Sí |
Animación local |
Por instancia |
No |
No |
Animación de reloj |
Por instancia |
No |
Sí |
Animación por fotograma |
Por instancia |
No |
N/D |
Animaciones de guión gráfico
Un Storyboard se utiliza cuando se desea definir y aplicar animaciones en XAML, controlarlas interactivamente después de comenzar, crear un árbol complejo de animaciones o animar en un Style, una ControlTemplate o una DataTemplate. Para animar un objeto mediante Storyboard, debe ser un elemento FrameworkElement o FrameworkContentElement, o bien utilizarse para establecer un elemento FrameworkElement o FrameworkContentElement. Para obtener más detalles, consulte Información general sobre objetos Storyboard.
Un guión gráfico, o Storyboard, es un tipo de escala de tiempo (Timeline) contenedora que proporciona información de destino para las animaciones que contiene. Para animar con Storyboard, debe completar los tres pasos siguientes.
Declare un Storyboard y una o más animaciones.
Utilice las propiedades adjuntas TargetName y TargetProperty para especificar el objeto y la propiedad de destino de cada animación.
(Sólo mediante código) Defina un objeto NameScope para un elemento FrameworkElement o FrameworkContentElement. Registre los nombres de los objetos que va a animar con ese elemento FrameworkElement o FrameworkContentElement.
Comience el Storyboard.
Al comenzar un Storyboard, se aplican animaciones a las propiedades que se animan, y se inician. Hay dos maneras de comenzar un Storyboard: puede utilizar el método Begin proporcionado por la clase Storyboard, o bien puede utilizar una acción BeginStoryboard. La única forma de animar en XAML es utilizar una acción BeginStoryboard. Una acción BeginStoryboard se puede utilizar en un EventTrigger, Trigger de propiedad o DataTrigger.
En la tabla siguiente se muestran los distintos espacios en que se admite cada técnica de comienzo de Storyboard: por instancia, estilo, plantilla de control y plantilla de datos.
El guión gráfico se comienza utilizando… |
Por instancia |
Estilo |
Plantilla de control |
Plantilla de datos |
Ejemplo |
|---|---|---|---|---|---|
Sí |
Sí |
Sí |
Sí |
||
BeginStoryboard y un Trigger de propiedad |
No |
Sí |
Sí |
Sí |
Cómo: Activar una animación al cambiar el valor de una propiedad |
No |
Sí |
Sí |
Sí |
||
Método Begin |
Sí |
No |
No |
No |
Para obtener más información acerca de los objetos Storyboard, vea Información general sobre objetos Storyboard.
Animaciones locales
Las animaciones locales proporcionan una manera cómoda de animar una propiedad de dependencia de cualquier objeto Animatable. Las animaciones locales se utilizan cuando se desea aplicar una sola animación a una propiedad y no se necesita controlar interactivamente la animación después de iniciarse. A diferencia de una animación de Storyboard, una animación local puede animar un objeto que no está asociado a un elemento FrameworkElement ni un elemento FrameworkContentElement. Tampoco es preciso definir NameScope para este tipo de animación.
Las animaciones locales únicamente se pueden utilizar mediante código y no se pueden definir en estilos, plantillas de control ni plantillas de datos. Una animación local no se puede controlar interactivamente una vez iniciada.
Para animar mediante una animación local, complete los pasos siguientes.
Cree un objeto AnimationTimeline.
Utilice el método BeginAnimation del objeto que desea animar para aplicar AnimationTimeline a la propiedad que especifica.
En el ejemplo siguiente se muestra cómo animar el ancho y el color de fondo de un objeto Button.
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
'''This sample demonstrates how to apply non-storyboard animations to a property.
'''To animate in markup, you must use storyboards.
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
Imports System
Imports System.Windows
Imports System.Windows.Navigation
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Imports System.Windows.Controls
Namespace Microsoft.Samples.Animation.LocalAnimations
' Create the demonstration.
Public Class LocalAnimationExample
Inherits Page
Public Sub New()
WindowTitle = "Animate Property Example"
Dim myStackPanel As New StackPanel()
myStackPanel.Margin = New Thickness(20)
' Create and set the Button.
Dim aButton As New Button()
aButton.Content = "A Button"
' Animate the Button's Width.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 75
myDoubleAnimation.To = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
myDoubleAnimation.AutoReverse = True
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever
' Apply the animation to the button's Width property.
aButton.BeginAnimation(Button.WidthProperty, myDoubleAnimation)
' Create and animate a Brush to set the button's Background.
Dim myBrush As New SolidColorBrush()
myBrush.Color = Colors.Blue
Dim myColorAnimation As New ColorAnimation()
myColorAnimation.From = Colors.Blue
myColorAnimation.To = Colors.Red
myColorAnimation.Duration = New Duration(TimeSpan.FromMilliseconds(7000))
myColorAnimation.AutoReverse = True
myColorAnimation.RepeatBehavior = RepeatBehavior.Forever
' Apply the animation to the brush's Color property.
myBrush.BeginAnimation(SolidColorBrush.ColorProperty, myColorAnimation)
aButton.Background = myBrush
' Add the Button to the panel.
myStackPanel.Children.Add(aButton)
Me.Content = myStackPanel
End Sub
End Class
End Namespace
/*
This sample demonstrates how to apply non-storyboard animations to a property.
To animate in markup, you must use storyboards.
*/
using System;
using System.Windows;
using System.Windows.Navigation;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Controls;
namespace Microsoft.Samples.Animation.LocalAnimations
{
// Create the demonstration.
public class LocalAnimationExample : Page
{
public LocalAnimationExample()
{
WindowTitle = "Local Animation Example";
StackPanel myStackPanel = new StackPanel();
myStackPanel.Margin = new Thickness(20);
// Create and set the Button.
Button aButton = new Button();
aButton.Content = "A Button";
// Animate the Button's Width.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 75;
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
myDoubleAnimation.AutoReverse = true;
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
// Apply the animation to the button's Width property.
aButton.BeginAnimation(Button.WidthProperty, myDoubleAnimation);
// Create and animate a Brush to set the button's Background.
SolidColorBrush myBrush = new SolidColorBrush();
myBrush.Color = Colors.Blue;
ColorAnimation myColorAnimation = new ColorAnimation();
myColorAnimation.From = Colors.Blue;
myColorAnimation.To = Colors.Red;
myColorAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(7000));
myColorAnimation.AutoReverse = true;
myColorAnimation.RepeatBehavior = RepeatBehavior.Forever;
// Apply the animation to the brush's Color property.
myBrush.BeginAnimation(SolidColorBrush.ColorProperty, myColorAnimation);
aButton.Background = myBrush;
// Add the Button to the panel.
myStackPanel.Children.Add(aButton);
this.Content = myStackPanel;
}
}
}
/*
This sample demonstrates how to apply non-storyboard animations to a property.
To animate in markup, you must use storyboards.
*/
using namespace System;
using namespace System::Windows;
using namespace System::Windows::Navigation;
using namespace System::Windows::Media;
using namespace System::Windows::Media::Animation;
using namespace System::Windows::Shapes;
using namespace System::Windows::Controls;
namespace Microsoft {
namespace Samples {
namespace Animation {
namespace LocalAnimations {
// Create the demonstration.
public ref class LocalAnimationExample : Page {
public:
LocalAnimationExample ()
{
WindowTitle = "Local Animation Example";
StackPanel^ myStackPanel = gcnew StackPanel();
myStackPanel->Margin = Thickness(20);
// Create and set the Button.
Button^ aButton = gcnew Button();
aButton->Content = "A Button";
// Animate the Button's Width.
DoubleAnimation^ myDoubleAnimation = gcnew DoubleAnimation();
myDoubleAnimation->From = 75;
myDoubleAnimation->To = 300;
myDoubleAnimation->Duration = Duration(TimeSpan::FromSeconds(5));
myDoubleAnimation->AutoReverse = true;
myDoubleAnimation->RepeatBehavior = RepeatBehavior::Forever;
// Apply the animation to the button's Width property.
aButton->BeginAnimation(Button::WidthProperty, myDoubleAnimation);
// Create and animate a Brush to set the button's Background.
SolidColorBrush^ myBrush = gcnew SolidColorBrush();
myBrush->Color = Colors::Blue;
ColorAnimation^ myColorAnimation = gcnew ColorAnimation();
myColorAnimation->From = Colors::Blue;
myColorAnimation->To = Colors::Red;
myColorAnimation->Duration = Duration(TimeSpan::FromMilliseconds(7000));
myColorAnimation->AutoReverse = true;
myColorAnimation->RepeatBehavior = RepeatBehavior::Forever;
// Apply the animation to the brush's Color property.
myBrush->BeginAnimation(SolidColorBrush::ColorProperty, myColorAnimation);
aButton->Background = myBrush;
// Add the Button to the panel.
myStackPanel->Children->Add(aButton);
this->Content = myStackPanel;
};
};
}
}
}
}
Animaciones de reloj
Los objetos Clock se utilizan cuando se desea animar sin utilizar Storyboard y se desea crear árboles de control de tiempo complejos o controlar interactivamente las animaciones después de iniciarse. Puede utilizar objetos de reloj para animar una propiedad de dependencia de cualquier objeto Animatable.
Los objetos Clock no se pueden utilizar directamente para animar en estilos, plantillas de control ni plantillas de datos. (En realidad, el sistema de animación y control de tiempo sí utiliza objetos Clock para animar en estilos, plantillas de control y plantillas de datos, pero debe crear esos objetos Clock a partir de un objeto Storyboard. Para obtener más información sobre la relación entre los objetos Storyboard y los objetos Clock, consulte Información general sobre sistemas de temporización y animación.)
Para aplicar un objeto Clock único a una propiedad, complete los pasos siguientes.
Cree un objeto AnimationTimeline.
Utilice el método CreateClock de AnimationTimeline para crear un objeto AnimationClock.
Utilice el método ApplyAnimationClock del objeto que desea animar para aplicar AnimationClock a la propiedad que especifica.
En el ejemplo siguiente se muestra cómo crear un objeto AnimationClock y aplicarlo a dos propiedades similares.
'
' This example shows how to create and apply
' an AnimationClock.
'
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Shapes
Imports System.Windows.Media.Animation
Namespace Microsoft.Samples.Animation.TimingBehaviors
Public Class AnimationClockExample
Inherits Page
Private myScaleTransform As ScaleTransform
Public Sub New()
Me.WindowTitle = "Opacity Animation Example"
Me.Background = Brushes.White
Dim myStackPanel As New StackPanel()
myStackPanel.Margin = New Thickness(20)
' Create a button that with a ScaleTransform.
' The ScaleTransform will animate when the
' button is clicked.
Dim myButton As New Button()
myButton.Margin = New Thickness(50)
myButton.HorizontalAlignment = HorizontalAlignment.Left
myButton.Content = "Click Me"
myScaleTransform = New ScaleTransform(1,1)
myButton.RenderTransform = myScaleTransform
' Associate an event handler with the
' button's Click event.
AddHandler myButton.Click, AddressOf myButton_Clicked
myStackPanel.Children.Add(myButton)
Me.Content = myStackPanel
End Sub
' Create and apply and animation when the button is clicked.
Private Sub myButton_Clicked(ByVal sender As Object, ByVal e As RoutedEventArgs)
' Create a DoubleAnimation to animate the
' ScaleTransform.
Dim myAnimation As New DoubleAnimation(1, 5, New Duration(TimeSpan.FromSeconds(5))) ' "To" value - "From" value
myAnimation.AutoReverse = True
' Create a clock the for the animation.
Dim myClock As AnimationClock = myAnimation.CreateClock()
' Associate the clock the ScaleX and
' ScaleY properties of the button's
' ScaleTransform.
myScaleTransform.ApplyAnimationClock(ScaleTransform.ScaleXProperty, myClock)
myScaleTransform.ApplyAnimationClock(ScaleTransform.ScaleYProperty, myClock)
End Sub
End Class
End Namespace
/*
This example shows how to create and apply
an AnimationClock.
*/
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
namespace Microsoft.Samples.Animation.TimingBehaviors
{
public class AnimationClockExample : Page
{
ScaleTransform myScaleTransform;
public AnimationClockExample()
{
this.WindowTitle = "Opacity Animation Example";
this.Background = Brushes.White;
StackPanel myStackPanel = new StackPanel();
myStackPanel.Margin = new Thickness(20);
// Create a button that with a ScaleTransform.
// The ScaleTransform will animate when the
// button is clicked.
Button myButton = new Button();
myButton.Margin = new Thickness(50);
myButton.HorizontalAlignment = HorizontalAlignment.Left;
myButton.Content = "Click Me";
myScaleTransform = new ScaleTransform(1,1);
myButton.RenderTransform = myScaleTransform;
// Associate an event handler with the
// button's Click event.
myButton.Click += new RoutedEventHandler(myButton_Clicked);
myStackPanel.Children.Add(myButton);
this.Content = myStackPanel;
}
// Create and apply and animation when the button is clicked.
private void myButton_Clicked(object sender, RoutedEventArgs e)
{
// Create a DoubleAnimation to animate the
// ScaleTransform.
DoubleAnimation myAnimation =
new DoubleAnimation(
1, // "From" value
5, // "To" value
new Duration(TimeSpan.FromSeconds(5))
);
myAnimation.AutoReverse = true;
// Create a clock the for the animation.
AnimationClock myClock = myAnimation.CreateClock();
// Associate the clock the ScaleX and
// ScaleY properties of the button's
// ScaleTransform.
myScaleTransform.ApplyAnimationClock(
ScaleTransform.ScaleXProperty, myClock);
myScaleTransform.ApplyAnimationClock(
ScaleTransform.ScaleYProperty, myClock);
}
}
}
Para crear un árbol de control de tiempo y utilizarlo para animar propiedades, complete los pasos siguientes.
Utilice los objetos ParallelTimeline y AnimationTimeline para crear el árbol de control de tiempo.
Utilice el método CreateClock del objeto ParallelTimeline raíz para crear ClockGroup.
Recorra en iteración las propiedades Children de ClockGroup y aplique sus objetos Clock secundarios. Para cada elemento secundario AnimationClock, utilice el método ApplyAnimationClock del objeto que desea animar a fin de aplicar AnimationClock a la propiedad que especifique.
Para obtener más información acerca de los objetos de reloj, consulte Información general sobre sistemas de temporización y animación.
Animación por fotograma: omitir el sistema de animación y control de tiempo
Utilice este enfoque cuando necesite omitir completamente el sistema de animación de WPF. Un escenario para este enfoque lo constituyen las animaciones físicas, donde a cada paso de la animación es preciso volver a calcular los objetos basándose en el último conjunto de interacciones de objeto.
Las animaciones por fotograma no se pueden definir dentro de estilos, plantillas de control ni plantillas de datos.
Para animar fotograma a fotograma, se efectúa el registro para el evento Rendering del objeto que contiene los objetos que se desea animar. Se llama a este método de control de eventos una vez por cada fotograma. Cada vez que WPF calcula las referencias de los datos de representación conservados en el árbol visual hasta el árbol de composición, se llama a este método de control de eventos.
En el controlador de eventos, realice los cálculos necesarios para el efecto de animación y establezca las propiedades de los objetos que desea animar con estos valores.
Para obtener el tiempo de presentación del fotograma actual, puede convertir el EventArgs asociado a este evento como RenderingEventArgs, que proporciona una propiedad RenderingTime que puede utilizar para obtener el tiempo de representación del fotograma actual.
Para obtener más información, vea la página Rendering.
Vea también
Conceptos
Información general sobre animaciones
Información general sobre objetos Storyboard
Información general sobre sistemas de temporización y animación