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.

  1. Déclarez un Storyboard et une ou plusieurs animations.

  2. Utilisez les propriétés attachéesTargetName et TargetProperty  pour spécifier l'objet cible et la propriété de chaque animation.

  3. (Code uniquement) Définissez un NameScope pour un FrameworkElement ou FrameworkContentElement. Inscrivez les noms des objets à animer avec FrameworkElement ou FrameworkContentElement.

  4. 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

Comment : animer une propriété à l'aide d'un storyboard

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

Comment : animer une propriété à l'aide d'un storyboard

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.

  1. Créez un objet AnimationTimeline.

  2. 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.

  1. Créez un objet AnimationTimeline.

  2. Utilisez la méthode CreateClock de AnimationTimeline pour créer un AnimationClock.

  3. 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.

  1. Utilisez les objets ParallelTimeline et AnimationTimeline pour créer l'arborescence de minutage.

  2. Utilisez CreateClock de la racine ParallelTimeline pour créer un ClockGroup.

  3. 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 de l'animation

Vue d'ensemble des storyboards

Vue d'ensemble de l'animation et du système de minutage

Vue d'ensemble des propriétés de dépendance