Vue d’ensemble de l’animation

Windows Presentation Foundation (WPF) fournit un ensemble puissant de fonctionnalités graphiques et de disposition qui vous permettent de créer des interfaces utilisateur attrayantes et des documents attrayants. L’animation peut rendre une interface utilisateur attrayante encore plus spectaculaire et utilisable. En animant simplement une couleur d’arrière-plan ou en appliquant une animation Transform, vous pouvez créer des transitions d’écran spectaculaires ou fournir des repères visuels utiles.

Cette vue d’ensemble fournit une introduction au système d’animation et de minutage WPF. Il se concentre sur l’animation d’objets WPF à l’aide de storyboards.

Présentation des animations

L’animation est une illusion qui est créée rapidement à travers une série d’images, chacune légèrement différente de la dernière. Le cerveau perçoit le groupe d’images comme une scène à changement unique. Dans le film, cette illusion est créée à l’aide de caméras qui enregistrent de nombreuses photographies, ou cadres, chaque seconde. Lorsque les images sont lues par un projecteur, le public voit un film en mouvement.

L’animation sur un ordinateur est similaire. Par exemple, un programme qui fait disparaître progressivement de la vue un dessin de rectangle peut fonctionner comme suit.

• Le programme crée un minuteur.

• Le programme vérifie le minuteur à intervalles définis pour voir combien de temps s’est écoulé.

• Chaque fois que le programme vérifie le minuteur, il calcule la valeur d’opacité actuelle pour le rectangle en fonction du temps écoulé.

• Le programme met ensuite à jour le rectangle avec la nouvelle valeur et le redessine.

Avant WPF, les développeurs Microsoft Windows ont dû créer et gérer leurs propres systèmes de minutage ou utiliser des bibliothèques personnalisées spéciales. WPF inclut un système de minutage efficace qui est exposé via du code managé et XAML et qui est profondément intégré dans l’infrastructure WPF. L’animation WPF facilite l’animation des contrôles et d’autres objets graphiques.

WPF gère tous les travaux en arrière-plan de la gestion d’un système de minutage et redessine efficacement l’écran. Il fournit des classes de synchronisation qui vous permettent de vous concentrer sur les effets que vous souhaitez créer, plutôt que sur les mécanismes pour les réaliser. WPF facilite également la création de vos propres animations en exposant des classes de base d’animations à partir desquelles vos classes peuvent hériter, pour produire des animations personnalisées. Ces animations personnalisées bénéficient de nombreux avantages en matière de performances des classes d’animation standard.

Système d’animation de propriétés WPF

Si vous comprenez quelques concepts importants sur le système de minutage, les animations WPF peuvent être plus faciles à utiliser. Le plus important est que, dans WPF, vous animez des objets en appliquant une animation à leurs propriétés individuelles. Par exemple, pour faire croître un élément de framework, vous animez ses propriétés Width et Height. Pour faire disparaître un objet de la vue, vous animez sa Opacity propriété.

Pour qu’une propriété dispose de fonctionnalités d’animation, elle doit répondre aux trois exigences suivantes :

• Il doit s’agir d’une propriété de dépendance.

• Il doit appartenir à une classe qui hérite de DependencyObject et implémente l'interface IAnimatable.

• Un type d’animation compatible doit être disponible. (Si WPF n’en fournit pas, vous pouvez en créer votre propre. Consultez la vue d’ensemble des animations personnalisées.)

WPF contient de nombreux objets qui ont IAnimatable des propriétés. Les contrôles tels que Button et TabControl, et également Panel et les objets Shape héritent de DependencyObject. La plupart de leurs propriétés sont des propriétés de dépendance.

Vous pouvez utiliser des animations presque n’importe où, notamment dans les styles et les modèles de contrôle. Les animations n’ont pas besoin d’être visuelles ; vous pouvez animer des objets qui ne font pas partie de l’interface utilisateur s’ils répondent aux critères décrits dans cette section.

Exemple : Faire apparaître et disparaître progressivement un élément de la vue

Cet exemple montre comment utiliser une animation WPF pour animer la valeur d’une propriété de dépendance. Il utilise un DoubleAnimationtype d’animation qui génère des Double valeurs, pour animer la Opacity propriété d’un Rectangle. Par conséquent, le Rectangle apparaît et disparaît à vue.

La première partie de l’exemple crée un Rectangle élément. Les étapes suivantes montrent comment créer une animation et l’appliquer à la propriété du Opacity rectangle.

L’exemple suivant montre comment créer un Rectangle élément dans un StackPanel code XAML.

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

L’exemple suivant montre comment créer un Rectangle élément dans un StackPanel code.

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

Partie 1 : Créer une doubleanimation

Une façon de faire apparaître et disparaître un élément est d’animer sa Opacity propriété. Étant donné que la Opacity propriété est de type Double, vous avez besoin d’une animation qui produit des valeurs doubles. Un DoubleAnimation est une telle animation. Une DoubleAnimation crée une transition entre deux valeurs doubles. Pour spécifier sa valeur de départ, vous définissez sa From propriété. Pour spécifier sa valeur de fin, vous définissez sa To propriété.

1. Une valeur d’opacité de 1.0 rend l’objet complètement opaque, tandis qu’une valeur d’opacité de 0.0 le rend complètement invisible. Pour effectuer la transition d’animation de 1.0 vers 0.0, vous définissez sa propriété From sur 1.0 et sa propriété To sur 0.0. L’exemple suivant montre comment créer un DoubleAnimation code XAML.

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

   L’exemple suivant montre comment créer un DoubleAnimation dans le code.

   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. Ensuite, vous devez spécifier un Duration. L’animation Duration spécifie le temps nécessaire pour passer de sa valeur de départ à sa valeur de destination. L'exemple suivant montre comment définir la valeur de Duration à cinq secondes en XAML.

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

   L’exemple suivant montre comment configurer le Duration à cinq secondes dans le code.

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

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

3. Le code précédent a montré une animation qui passe de 1.0 à 0.0, ce qui provoque le fondu de l'élément cible du complètement opaque à l'invisible. Pour faire réapparaître l'élément progressivement après qu’il ait disparu, définissez la propriété AutoReverse de l’animation à true. Pour que l’animation se répète indéfiniment, définissez sa RepeatBehavior propriété Foreversur . L’exemple suivant montre comment définir les propriétés AutoReverse et RepeatBehavior en XAML.

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

   L’exemple suivant montre comment définir les propriétés AutoReverse et RepeatBehavior dans le code.

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

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

Partie 2 : Créer un storyboard

Pour appliquer une animation à un objet, vous créez un Storyboard et utilisez les propriétés jointes TargetName et TargetProperty pour spécifier l'objet et la propriété à animer.

1. Créez le Storyboard et ajoutez l'animation en tant qu'enfant. L’exemple suivant montre comment créer le Storyboard code XAML.

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

   Pour créer le Storyboard dans le code, déclarez une variable Storyboard au niveau de la classe.

   public partial class MainWindow : Window
   {
       private Storyboard myStoryboard;
   

   Class MainWindow
   
       Private myStoryboard As Storyboard
   

   Initialisez ensuite l’objet Storyboard et ajoutez l’animation en tant qu’enfant de celui-ci.

   myStoryboard = new Storyboard();
   myStoryboard.Children.Add(myDoubleAnimation);
   

   myStoryboard = New Storyboard()
   myStoryboard.Children.Add(myDoubleAnimation)
   

2. Storyboard doit savoir où appliquer l’animation. Utilisez la Storyboard.TargetName propriété jointe pour spécifier l’objet à animer. L’exemple suivant montre comment définir le nom cible de DoubleAnimation vers MyRectangle en XAML.

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

   L’exemple suivant montre comment définir le nom cible de DoubleAnimation à MyRectangle dans le code.

   Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
   

   Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
   

3. Utilisez la TargetProperty propriété associée afin de spécifier la propriété à animer. L’exemple suivant montre comment l’animation est configurée pour cibler la Opacity propriété du Rectangle code XAML.

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

   Le texte suivant montre comment l’animation est configurée pour cibler la propriété Opacity du Rectangle dans le code.

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

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

Pour plus d’informations sur TargetProperty la syntaxe et pour obtenir des exemples supplémentaires, consultez la vue d’ensemble des storyboards.

Partie 3 (XAML) : associer le storyboard à un déclencheur

Le moyen le plus simple d’appliquer et de démarrer un Storyboard élément XAML consiste à utiliser un déclencheur d’événement. Cette section montre comment associer le Storyboard à un déclencheur en XAML.

1. Créez un BeginStoryboard objet et associez votre storyboard à celui-ci. Un BeginStoryboard est un type de TriggerAction qui s'applique et démarre 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. Créez un EventTrigger et ajoutez le BeginStoryboard à sa collection Actions. Définissez la propriété RoutedEvent de EventTrigger à l’événement routé que vous souhaitez démarrer avec Storyboard. (Pour plus d’informations sur les événements routés, consultez la vue d’ensemble des événements routés.)

   <!-- 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. Ajoutez EventTrigger à la collection Triggers du 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>
   

Partie 3 (code) : associer le storyboard à un gestionnaire d’événements

Le moyen le plus simple d’appliquer et de démarrer un Storyboard code consiste à utiliser un gestionnaire d’événements. Cette section montre comment associer le Storyboard à un gestionnaire d’événements dans le code.

1. Inscrivez-vous à l’événement Loaded du rectangle.

   myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
   

   AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded
   

2. Déclarez le gestionnaire d’événements. Dans le gestionnaire d’événements, utilisez la Begin méthode pour appliquer le 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
   

Exemple complet

L’exemple ci-dessous montre comment créer un rectangle qui apparaît et disparaît dans 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>

L’exemple suivant montre comment créer un rectangle qui apparaît et disparaît dans le 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

Types d’animations

Étant donné que les animations génèrent des valeurs de propriété, différents types d’animation existent pour différents types de propriétés. Pour animer une propriété qui accepte une Doublepropriété, telle que la Width propriété d’un élément, utilisez une animation qui produit des Double valeurs. Pour animer une propriété qui prend un Point, utilisez une animation qui produit des Point valeurs, et ainsi de suite. En raison du nombre de types différents de propriétés, plusieurs classes d'animation existent dans le namespace System.Windows.Media.Animation. Heureusement, ils suivent une convention d’affectation de noms stricte qui facilite la distinction entre elles :

• < Type>Animation

  Appelée animation « From/To/By » ou « basic », ces animations s’animent entre une valeur de départ et de destination, ou en ajoutant une valeur offset à sa valeur de départ.

  • Pour spécifier une valeur de départ, définissez la propriété From de l’animation.

  • Pour spécifier une valeur de fin, définissez la propriété To de l’animation.

  • Pour spécifier une valeur de décalage, définissez la propriété By de l’animation.

  Les exemples de cette vue d’ensemble utilisent ces animations, car elles sont les plus simples à utiliser. Les animations From/To/By sont décrites en détail dans la vue d’ensemble de From/To/By Animations.

• < Type>AnimationUsingKeyFrames

  Les animations d’images clés sont plus puissantes que les animations From/To/By, car vous pouvez spécifier n’importe quel nombre de valeurs cibles et même contrôler leur méthode d’interpolation. Certains types ne peuvent être animés que par des animations par images clés. Les animations d’images clés sont décrites en détail dans la vue d’ensemble des animationsKey-Frame.

• < Type>AnimationUsingPath

  Les animations de chemin vous permettent d’utiliser un chemin géométrique afin de produire des valeurs animées.

• < Type>AnimationBase

  Classe abstraite qui, lorsque vous l'implémentez, anime une valeur de type <. Cette classe sert de classe de base pour <Type>Animation et <Type>AnimationUsingKeyFrames. Vous devez gérer directement ces classes uniquement si vous souhaitez créer vos propres animations personnalisées. Sinon, utilisez une < animation de type>ou une animation<keyframe>.

Dans la plupart des cas, vous souhaiterez utiliser les < classes d’animation de type>, telles que DoubleAnimation et ColorAnimation.

Le tableau suivant présente plusieurs types d’animation courants et certaines propriétés avec lesquelles elles sont utilisées.

Les animations sont des chronologies

Tous les types d’animation héritent de la Timeline classe ; par conséquent, toutes les animations sont des types spécialisés de chronologies. Timeline définit un segment de temps. Vous pouvez spécifier les comportements de minutage d’une chronologie : son Duration, le nombre de fois qu’il est répété, et même la vitesse de progression pour celle-ci.

Étant donné qu’une animation est un Timeline, elle représente également un segment de temps. Une animation calcule également les valeurs de sortie au fur et à mesure qu’elle progresse dans son segment de temps spécifié (ou Duration). À mesure que l’animation progresse, ou « joue », elle met à jour la propriété à laquelle elle est associée.

Trois propriétés de minutage fréquemment utilisées sont Duration, AutoReverseet RepeatBehavior.

La propriété Duration

Comme mentionné précédemment, une chronologie représente un segment de temps. La longueur de ce segment est déterminée par la Duration chronologie, qui est généralement spécifiée à l’aide d’une TimeSpan valeur. Lorsqu’une chronologie atteint la fin de sa durée, elle a terminé une itération.

Une animation utilise sa Duration propriété pour déterminer sa valeur actuelle. Si vous ne spécifiez pas de Duration valeur pour une animation, elle utilise 1 seconde, qui est la valeur par défaut.

La syntaxe suivante montre une version simplifiée de la syntaxe d’attribut XAML (Extensible Application Markup Language) pour la Duration propriété.

Heures:Minutes:Secondes

Le tableau suivant présente plusieurs Duration paramètres et leurs valeurs résultantes.

Une façon de spécifier un Duration dans le code est d’utiliser la FromSeconds méthode pour créer un TimeSpan, puis déclarer une nouvelle Duration structure à l’aide de ce TimeSpan.

Pour plus d’informations sur les valeurs Duration et la syntaxe complète du langage de balisage d'application extensible (XAML), consultez la structure Duration.

Inversion automatique

La AutoReverse propriété spécifie si une chronologie est lue vers l’arrière une fois qu’elle atteint la fin de son Duration. Si vous définissez cette propriété d'animation sur true, une animation s'inverse après avoir atteint la fin de son Duration, en passant de sa valeur finale à sa valeur de départ. Par défaut, cette propriété est false.

RepeatBehavior

La propriété RepeatBehavior spécifie combien de fois une ligne de temps joue. Par défaut, les chronologies ont un nombre d’itérations de 1.0, ce qui signifie qu’elles jouent une seule fois et ne se répètent pas du tout.

Pour plus d’informations sur ces propriétés et d’autres, consultez la vue d’ensemble des comportements de minutage.

Application d’une animation à une propriété

Les sections précédentes décrivent les différents types d’animations et leurs propriétés de minutage. Cette section montre comment appliquer l’animation à la propriété que vous souhaitez animer. Storyboard les objets fournissent un moyen d’appliquer des animations aux propriétés. Un Storyboard est une chronologie de conteneur qui fournit des informations de ciblage pour les animations qu'elle contient.

Ciblage d’objets et de propriétés

La Storyboard classe fournit les propriétés TargetName jointes et TargetProperty. En définissant ces propriétés sur une animation, vous indiquez à l’animation ce qu’il faut animer. Toutefois, avant qu’une animation puisse cibler un objet, l’objet doit généralement avoir un nom.

L’affectation d’un nom à un FrameworkElement autre diffère de l’affectation d’un nom à un Freezable objet. La plupart des contrôles et panneaux sont des éléments de cadre ; toutefois, la plupart des objets purement graphiques, tels que les pinceaux, les transformations et les géométries, sont des objets gelables. Si vous ne savez pas si un type est un FrameworkElement ou un Freezable, reportez-vous à la section Hiérarchie d’héritage de sa documentation de référence.

• Pour créer une FrameworkElement cible d’animation, vous lui attribuez un nom en définissant sa Name propriété. Dans le code, vous devez également utiliser la RegisterName méthode pour inscrire le nom de l’élément auprès de la page à laquelle il appartient.

• Pour faire d’un objet une Freezable cible d’animation en XAML, vous utilisez la directive x :Name pour lui attribuer un nom. Dans le code, vous utilisez simplement la RegisterName méthode pour inscrire l’objet auprès de la page à laquelle elle appartient.

Les sections suivantes fournissent un exemple de nommage d’un élément en XAML et en code. Pour plus d’informations sur l’affectation de noms et le ciblage, consultez la vue d’ensemble des storyboards.

Application et démarrage de storyboards

Pour démarrer un storyboard en XAML, vous l’associez à un EventTrigger. EventTrigger est un objet qui décrit quelles actions entreprendre lorsqu’un événement spécifié se produit. L’une de ces actions peut être une BeginStoryboard action que vous utilisez pour démarrer votre storyboard. Les déclencheurs d’événements sont similaires au concept des gestionnaires d’événements, car ils vous permettent de spécifier la façon dont votre application répond à un événement particulier. Contrairement aux gestionnaires d’événements, les déclencheurs d’événements peuvent être entièrement décrits en XAML ; aucun autre code n’est requis.

Pour démarrer un Storyboard dans le code, vous pouvez utiliser une méthode EventTrigger ou la méthode Begin de la classe Storyboard.

Contrôler de manière interactive un storyboard

L’exemple précédent a montré comment démarrer un Storyboard événement lorsqu’un événement se produit. Vous pouvez également contrôler de manière interactive une Storyboard fois qu’elle a commencé : vous pouvez suspendre, reprendre, arrêter, avancer jusqu’à sa période de remplissage, rechercher et supprimer le Storyboard. Pour plus d’informations et un exemple qui montre comment contrôler de manière interactive un Storyboard, consultez la vue d’ensemble des storyboards.

Que se passe-t-il après la fin d’une animation ?

La FillBehavior propriété spécifie le comportement d’une chronologie lorsqu’elle se termine. Par défaut, une chronologie se termine Filling quand elle démarre. Une animation qui est Filling maintient sa valeur de sortie finale.

L’exemple DoubleAnimation précédent ne se termine pas, car sa RepeatBehavior propriété est définie sur Forever. L’exemple suivant anime un rectangle à l’aide d’une animation similaire. Contrairement à l'exemple précédent, les propriétés RepeatBehavior et AutoReverse de cette animation sont laissées à leurs valeurs par défaut. Par conséquent, l’animation passe de 1 à 0 sur cinq secondes, puis s’arrête.

<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))

Étant donné que sa FillBehavior valeur par défaut n’a pas été modifiée, c’est-à-dire HoldEndque l’animation contient sa valeur finale, 0, lorsqu’elle se termine. Par conséquent, le Opacity rectangle reste à 0 une fois l’animation terminée. Si vous définissez le Opacity rectangle sur une autre valeur, votre code semble n’avoir aucun effet, car l’animation affecte toujours la Opacity propriété.

Une façon de récupérer le contrôle d’une propriété animée dans le code consiste à utiliser la BeginAnimation méthode et à spécifier null pour le AnimationTimeline paramètre. Pour plus d’informations et un exemple, consultez Définir une propriété après l'avoir animée avec un Storyboard.

Notez que, bien que la définition d’une valeur de propriété ayant une animation Active ou Filling n’ait aucun effet apparent, la valeur de la propriété change. Pour plus d’informations, consultez la vue d’ensemble du système d’animation et de minutage.

Liaison de données et animation d’animations

La plupart des propriétés d’animation peuvent être liées aux données ou animées ; par exemple, vous pouvez animer la Duration propriété d’un DoubleAnimation. Toutefois, en raison du fonctionnement du système de minutage, les animations liées aux données ou animées ne se comportent pas comme d’autres objets liés aux données ou animés. Pour comprendre leur comportement, il est utile de comprendre ce que cela signifie d'appliquer une animation à une propriété.

Reportez-vous à l’exemple de la section précédente qui a montré comment animer le Opacity rectangle. Lorsque le rectangle de l’exemple précédent est chargé, son déclencheur d’événement applique le Storyboard. Le système de minutage crée une copie de Storyboard et de son animation. Ces copies sont figées (en lecture seule) et des objets Clock sont créés à partir de celles-ci. Ces horloges effectuent le travail réel d’animation des propriétés ciblées.

Le système de minutage crée une horloge pour le DoubleAnimation, et l'applique à l'objet et à la propriété spécifiés par le TargetName et le TargetProperty du DoubleAnimation. Dans ce cas, le système de minutage applique l’horloge à la Opacity propriété de l’objet nommé « MyRectangle ».

Bien qu'une horloge soit également créée pour le Storyboard, elle n'est appliquée à aucun paramètre ou attribut. Son objectif est de contrôler son horloge enfant, l’horloge créée pour le DoubleAnimation.

Pour qu’une animation reflète les modifications de liaison de données ou d’animation, son horloge doit être régénérée. Les horloges ne sont pas régénérées automatiquement. Pour faire en sorte qu’une animation reflète les modifications, réappliquez son storyboard à l’aide d’une BeginStoryboard ou de la Begin méthode. Lorsque vous utilisez l’une de ces méthodes, l’animation redémarre. Dans le code, vous pouvez utiliser la Seek méthode pour rebasculer le storyboard vers sa position précédente.

Pour un exemple d’une animation liée aux données, consultez l’exemple d’animation Key Spline. Pour plus d’informations sur le fonctionnement du système d’animation et de minutage, consultez Animation et Vue d’ensemble du système de minutage.

Autres façons d’animer

Les exemples de cette vue d’ensemble montrent comment animer à l’aide de storyboards. Lorsque vous utilisez du code, vous pouvez animer de plusieurs autres façons. Pour plus d’informations, consultez la vue d’ensemble des techniques d’animation des propriétés.

Exemples d’animation

Les exemples suivants peuvent vous aider à commencer à ajouter une animation à vos applications.

• Exemple de valeurs cibles d’animation de, à et par

  Illustre les différents paramètres From/To/By.

• Exemple de comportement de minutage d’animation

  Montre les différentes façons dont vous pouvez contrôler le comportement de minutage d’une animation. Cet exemple illustre également comment établir une liaison de données avec la valeur de destination d’une animation.

Rubriques connexes

Référence

• Timeline

• Storyboard

• BeginStoryboard

• Clock