Vue d'ensemble des techniques d'animation de propriétés
Cette rubrique décrit les différentes approches en matière des propriétés d'animation : tables de montage séquentiel, animations locales, horloges et animations image par image.
Composants requis
Pour comprendre cette rubrique, vous devez être familiarisé avec les fonctionnalités des animations de base décrites dans la Vue d'ensemble de l'animation.
Différentes façons d'animer
Dans la mesure où il existe différent scénarios d'animer les propriétés, WPF fournit plusieurs approches pour l'animation des propriétés.
Pour chaque approche, le tableau suivant indique si elle peut être utilisée par instance, dans les styles, les modèles des contrôles ou dans les modèles des données ; si elle peut être utilisée en XAML ; et si l'approche vous permet de contrôler l'animation de manière interactive. « Par instance » fait référence à la technique d'application d'une animation ou d'un storyboard directement aux instances d'un objet, plutôt que dans un style, un modèle de contrôle ou un modèle de données.
Technique d'animation |
Scénarios |
Prend en charge XAML |
Pilotable de manière interactive |
|---|---|---|---|
Animation de la table de montage séquentiel |
Par instance, Style, ControlTemplate, DataTemplate |
Oui |
Oui |
Animation locale |
Par instance |
Non |
Non |
Animation horloge |
Par instance |
Non |
Oui |
Animation image par image |
Par instance |
Non |
N/A |
Animations de la table de montage séquentiel
Utilisez un Storyboard quand vous voulez définir et appliquer vos animations en XAML, contrôler de manière interactive vos animations après leur démarrage, créer une arborescence complexe d'animations ou effectuer une animation dans Style, ControlTemplate ou DataTemplate. Pour animer un objet par le biais d'un Storyboard, il doit s'agir d'un FrameworkElement ou d'un FrameworkContentElement, ou il doit être utilisé pour définir un FrameworkElement ou un FrameworkContentElement. Pour plus d'informations, consultez la Vue d'ensemble des storyboards.
A Storyboard est un conteneur de type spécial Timeline qui fournit des informations de ciblage pour les animations qu'il contient. Pour animer avec un Storyboard, vous devez effectuer les trois étapes suivantes.
Déclarez un Storyboard et une ou plusieurs animations.
Utilisez les propriétés attachéesTargetName et TargetProperty pour spécifier l'objet cible et la propriété de chaque animation.
(Code uniquement) Définissez un NameScope pour un FrameworkElement ou FrameworkContentElement. Inscrivez les noms des objets à animer avec FrameworkElement ou FrameworkContentElement.
Lancez le Storyboard.
Le lancement de Storyboard applique des animations aux propriétés qu'elles animent et les démarre. Il existe deux façon de lancer un Storyboard : vous pouvez utiliser la méthode Begin fournie par la classe Storyboard, ou vous pouvez utiliser une action BeginStoryboard. La seule façon d'effectuer une animation dans XAML consiste à utiliser une action BeginStoryboard. Une action BeginStoryboard peut être utilisée dans un EventTrigger, une propriété Trigger ou un DataTrigger.
Le tableau suivant indique les différents endroits où chaque technique de démarrage de Storyboard est prise en charge : par instance, style, modèle de contrôle et modèle de données.
La table de montage séquentiel commence à être utilisée… |
Par instance |
Style |
Modèle de contrôle |
Modèle de données |
Exemple |
|---|---|---|---|---|---|
BeginStoryboard et un EventTrigger |
Oui |
Oui |
Oui |
Oui |
|
BeginStoryboard et une propriété Trigger |
Non |
Oui |
Oui |
Oui |
Comment : déclencher une animation en cas de modification d'une valeur de propriété |
BeginStoryboard et un DataTrigger |
Non |
Oui |
Oui |
Oui |
Comment : déclencher une animation en cas de modification de données |
Méthode Begin |
Oui |
Non |
Non |
Non |
Pour plus d'informations sur les objets Storyboard, consultez Vue d'ensemble des storyboards.
Animations locales
Les animations locales offrent un moyen pratique pour animer une propriété de dépendance de n'importe quel objet Animatable. Utilisez les animations locales lorsque vous voulez appliquer une animation unique à une propriété et que vous n'avez pas besoin de contrôler l'animation de manière interactive une fois qu'elle a démarré. À la différence d'une animation Storyboard, une animation locale peut animer un objet qui n'est pas associé à un FrameworkElement ou un FrameworkContentElement. Vous n'avez pas non à définir un NameScope pour ce type d'animation.
Les animations locales peuvent uniquement être utilisées dans le code, et ne peuvent pas être définies dans les styles, les modèles de contrôle ou les modèles de données. Une animation locale ne peut pas être contrôlée de manière interactive une fois qu'elle a démarré.
Pour effectuer une animation à l'aide d'une animation locale, exécutez les étapes suivantes.
Créez un objet AnimationTimeline.
Utilisez la méthode BeginAnimation de l'objet que vous voulez animer pour appliquer le AnimationTimeline à la propriété que vous spécifiez.
L'exemple suivant montre comment animer la largeur et la couleur d'arrière-plan d'un 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;
};
};
}
}
}
}
Animations Clock
Utilisez des objets Clock lorsque vous voulez animer sans utiliser un Storyboard et que vous voulez créer des arborescences de minutage complexes ou contrôler interactivement des animations après leur démarrage. Vous pouvez utiliser des objets Clock pour animer une propriété de dépendance de n'importe quel objet Animatable.
Vous ne pouvez pas utiliser des objets Clock directement pour effectuer des animations dans les styles, les modèles de contrôle ou les modèles de données. (Le système d'animation et de minutage utilise en fait des objets Clock pour effectuer des animations dans les styles, les modèles de contrôle et les modèles de données, mais il doit créer les objets Clock pour vous à partir d'un Storyboard. Pour plus d'informations sur les relations entre les objets Storyboard et les objets Clock, consultez Vue d'ensemble de l'animation et du système de minutage.)
Pour appliquer un Clock unique à une propriété, exécutez les étapes suivantes.
Créez un objet AnimationTimeline.
Utilisez la méthode CreateClock de AnimationTimeline pour créer un AnimationClock.
Utilisez la méthode ApplyAnimationClock de l'objet que vous voulez animer pour appliquer le AnimationClock à la propriété que vous spécifiez.
L'exemple suivant montre comment créer un AnimationClock et l'appliquer à deux propriétés similaires.
'
' 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);
}
}
}
Pour créer une arborescence et l'utiliser afin d'animer des propriétés, exécutez les étapes suivantes.
Utilisez les objets ParallelTimeline et AnimationTimeline pour créer l'arborescence de minutage.
Utilisez CreateClock de la racine ParallelTimeline pour créer un ClockGroup.
Itérez au sein de Children de ClockGroup et appliquez ses objets enfants Clock. Pour chaque enfant AnimationClock, utilisez la méthode ApplyAnimationClock de l'objet que vous voulez animer pour appliquer le AnimationClock à la propriété que vous spécifiez.
Pour plus d'informations sur les objets Clock, consultez Vue d'ensemble de l'animation et du système de minutage.
Animation image par image : ignorer le système d'animation et de minutage
Utilisez cette approche si vous devez ignorer entièrement le système d'animation WPF. Cette approche est utilisée pour les scénarios d'animations physiques dans lesquels chaque étape de l'animation nécessite que les objets animés soient recalculés en fonction du dernier jeu d'interactions d'objets.
Les animations image par image ne peuvent pas être définies dans les styles, les modèles de contrôle ou les modèles de données.
Pour effectuer une animation image par image, vous vous inscrivez à l'événement Rendering de l'objet qui contient les objets à animer. Cette méthode du gestionnaire d'événements est appelée une fois par trame. À chaque fois que WPF marshale les données de rendu persistantes dans l'arborescence visuelle sur l'arborescence de composition, la méthode du gestionnaire d'événements est appelée.
Dans le gestionnaire d'événements, effectuez les calculs nécessaires à l'effet de votre animation et définissez les propriétés des objets à animer avec ces valeurs.
Pour obtenir l'heure de la présentation de l'image actuelle, le EventArgs associé à cet événement peut être casté en RenderingEventArgs, qui fournit une propriété RenderingTime pouvant être utilisée pour obtenir l'heure de rendu de l'image actuelle.
Pour plus d'informations, consultez la page Rendering.
Voir aussi
Concepts
Vue d'ensemble des storyboards