Vue d'ensemble de l'animation

Article
08/22/2008

Mise à jour : novembre 2007

Windows Presentation Foundation (WPF) fournit un jeu de graphiques important et des fonctionnalités de disposition qui vous permettent de créer des interfaces utilisateur attrayantes et des documents plus esthétiques. L'animation peut rendre une interface utilisateur attrayante encore plus spectaculaire et conviviale. En animant simplement la couleur d'arrière-plan ou en appliquant un Transform animé, vous pouvez créer des transitions d'écran impressionnantes ou fournir des aides visuelles utiles.

Cette vue d'ensemble fournit une introduction à l'animation WPF et au système de minuterie. Elle se concentre sur l'animation des objets WPF en utilisant des tables de montage séquentiel.

Cette rubrique comprend les sections suivantes.

Présentation des animations
Système d'animation de propriété WPF
Exemple : créer un fondu avec un élément
Types d'animations
Application d'une animation à une propriété
Contrôle interactif d'une table de montage séquentiel
Que se passe t-il à la fin d'une animation ?
Liaison de données et animation
Autres méthodes d'animation
Exemples d'animation
Rubriques connexes

Présentation des animations

Une animation est une illusion créée par la répétition rapide d'une série d'images, chacune légèrement différente de la précédente. Le cerveau perçoit le groupe d'images comme une seule scène qui change. Dans un film, cette illusion est créée par des caméras qui enregistrent de nombreuses photographies ou trames par seconde. Lorsque les trames sont rejouées par un projecteur, les spectateurs voient une image en mouvement.

Le principe est le même pour une animation sur un ordinateur. Par exemple, voici comment fonctionne un programme qui dessine un rectangle disparaissant en fondu.

Le programme crée une minuterie.
Le programme vérifie la minuterie à intervalles réguliers pour connaître le temps qui s'est écoulé.
Chaque fois que le programme vérifie la minuterie, il calcule la valeur d'opacité courante du rectangle selon le temps qui s'est écoulé.
Le programme met ensuite à jour le rectangle avec la nouvelle valeur et le redessine.

Avant WPF, les développeurs de Microsoft Windows devaient créer et gérer leurs propres systèmes de minuterie ou utiliser des bibliothèques personnalisées spéciales. WPF inclut un système de minuterie efficace exposé via un code managé et XAML (Extensible Application Markup Language) et profondément intégré à l'infrastructure WPF. WPF facilite l'animation des contrôles et autres objets graphiques.

WPF s'occupe de tout le travail sous-jacent nécessaire pour gérer un système de minuterie et pour redessiner efficacement l'écran. Il fournit des classes de minuterie qui vous permettent de vous concentrer sur les effets que vous souhaitez créer plutôt que sur la mécanique de réalisation de ces effets. WPF facilite également la création de vos propres animations en exposant des classes d'animation de base dont vous pouvez vous servir pour produire des animations personnalisées. Ces animations personnalisées récupèrent les avantages de performance des classes d'animation standard.

Système d'animation de propriété WPF

Si vous comprenez certains des principaux concepts concernant le système de minuterie, vous pourrez facilement utiliser les animations WPF. Le plus important reste que, dans WPF, vous animez des objets en appliquant une animation à leurs propriétés individuelles. Par exemple, pour développer un élément de l'infrastructure, vous animez ses propriétés Width et Height. Pour qu'un objet disparaisse en fondu, vous animez sa propriété Opacity.

Pour qu'une propriété possède des fonctions d'animation, elle doit satisfaire les trois conditions suivantes :

Il doit s'agir d'une propriété de dépendance.
Elle doit appartenir à une classe qui hérite de DependencyObject et implémente l'interface IAnimatable.
Un type d'animation compatible doit être disponible. (Si Windows Presentation Foundation (WPF) n'en fournit pas, vous pouvez en créer un. Consultez Vue d'ensemble des animations personnalisées.)

WPF contient de nombreux objets avec des propriétés susceptibles de s'animer. Les contrôles tels que les objets Button et TabControl, mais également Panel et 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 partout, y compris dans les styles et les modèles de contrôle. Les animations ne doivent pas être visuelles ; vous pouvez animer des objets qui ne font pas partie de l'interface utilisateur tant qu'ils répondent aux critères décrits dans cette section.

Exemple : créer un fondu avec un élément

Cet exemple montre comment utiliser une animation WPF pour animer la valeur d'une propriété de dépendance. Il utilise un DoubleAnimation, c'est-à-dire un type d'animation qui génère des valeurs Double, pour animer la propriété Opacity d'un Rectangle. Par conséquent, le Rectangle apparaît et disparaît en fondu.

La première partie de l'exemple crée un élément Rectangle et l'affiche dans une Page. Les étapes qui suivent montrent comment créer une animation et l'appliquer à la propriété Opacity du rectangle.

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Fading Rectangle Example">
  <StackPanel Margin="10">
    
    <Rectangle
      Name="MyRectangle"
      Width="100" 
      Height="100"
      Fill="Blue">
    </Rectangle> 
  </StackPanel>
</Page>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace Microsoft.SDK.Animation
{
    public class RectangleOpacityFadeExample : Page
    {
        public RectangleOpacityFadeExample()
        {
            NameScope.SetNameScope(this, new NameScope());
            this.WindowTitle = "Fading Rectangle Example";
            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;
            myPanel.Children.Add(myRectangle);
            this.Content = myPanel; 
        }
    }
}

Étape 1 : créer un AnimationDouble

L'un des moyens de faire apparaître et disparaître un élément est d'animer sa propriété Opacity. Étant donné que la propriété Opacity est de type Double, vous avez besoin d'une animation qui produit des valeurs de type double. Une DoubleAnimation est de ce type. Une DoubleAnimation crée une transition entre deux valeurs de type double. Pour spécifier sa valeur initiale, définissez sa propriété From. Pour spécifier sa valeur finale, définissez sa propriété To.

Une valeur d'opacité de 1.0 rend l'objet totalement opaque et une valeur d'opacité de 0.0 le rend totalement invisible. Pour que la transition de l'animation passe de 1.0 à 0.0, sa propriété From doit avoir la valeur 1.0 et sa propriété To la valeur 0.0.
```
...
<DoubleAnimation From="1.0" To="0.0"  />        
...
```
[C#]
```
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
```
Vous devez ensuite spécifier une Duration. Le Duration d'une animation spécifie le temps nécessaire pour passer de la valeur initiale à la valeur finale. Dans l'exemple suivant, l'animation a une durée de cinq secondes.
```
...
<DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />        
...

myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
```
Le code précédent montrait une animation qui est passée de 1.0 à 0.0 ; l'élément cible, totalement opaque, est devenu totalement invisible. Pour que l'élément réapparaisse en fondu après avoir disparu, la propriété AutoReverse de l'animation doit avoir la valeur true. Pour que l'animation se répète indéfiniment, sa propriété RepeatBehavior doit avoir la valeur Forever.
```
...
<DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>        
...

myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
```

Étape 2 : créer une table de montage séquentiel

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

Créez le Storyboard et ajoutez-y l'animation en tant qu'enfant.

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

Dans le code, déclarez le Storyboard comme membre de classe.

public class RectangleOpacityFadeExample : Page
{ 
    private Storyboard myStoryboard;

Initialisez ensuite le Storyboard et ajoutez-y l'animation en tant qu'enfant.

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

Le Storyboard doit savoir où appliquer l'animation. Utilisez la propriété attachée Storyboard.TargetName pour spécifier l'objet à animer. Dans le code suivant, le DoubleAnimation porte le nom cible MyRectangle, qui est le nom de l'objet à animer.

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

Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

Remarque :
Lorsque vous créez des tables de montage séquentiel dans le code, vous devez effectuer deux étapes supplémentaires : créer une portée de nom et enregistrer le nom de l'objet à animer. Le code situé au début de cette section, qui a créé la page et le rectangle, a également déclaré un NameScope et a enregistré un nom pour le rectangle. Utilisez la méthode SetNameScope pour créer un NameScope, s'il n'en existe pas encore. Utilisez la méthode RegisterName pour enregistrer le nom de l'objet cible avec l'élément pour lequel vous avez créé un NameScope. Si vous ne le faites pas, le Storyboard ne pourra pas rechercher et animer l'objet. Pour obtenir un exemple supplémentaire, consultez Comment : définir une portée de nom.

Lorsque vous créez des tables de montage séquentiel dans le code, vous devez effectuer deux étapes supplémentaires : créer une portée de nom et enregistrer le nom de l'objet à animer. Le code situé au début de cette section, qui a créé la page et le rectangle, a également déclaré un NameScope et a enregistré un nom pour le rectangle. Utilisez la méthode SetNameScope pour créer un NameScope, s'il n'en existe pas encore. Utilisez la méthode RegisterName pour enregistrer le nom de l'objet cible avec l'élément pour lequel vous avez créé un NameScope. Si vous ne le faites pas, le Storyboard ne pourra pas rechercher et animer l'objet. Pour obtenir un exemple supplémentaire, consultez Comment : définir une portée de nom.

Utilisez la propriété attachée TargetProperty pour spécifier la propriété à animer. Dans le code suivant, l'animation est configurée pour cibler la propriété Opacity d'un Rectangle.

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

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

Pour plus d'informations sur la syntaxe de TargetProperty et pour obtenir des exemples supplémentaires, consultez Vue d'ensemble des tables de montage séquentiel.

Étape 3 (XAML) : associer la table de montage séquentiel à un déclencheur

Le meilleur moyen d'appliquer et de démarrer un Storyboard en XAML est d'utiliser un déclencheur d'événements.

Créez un objet BeginStoryboard et associez-le à votre table de montage séquentiel. BeginStoryboard est un type de TriggerAction qui 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>

Créez un EventTrigger et ajoutez BeginStoryboard à sa collection Actions. Pour démarrer le Storyboard, définissez la propriété RoutedEvent de l'événement routé que vous souhaitez. (Pour plus d'informations sur les événements routés, consultez 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>

Ajoutez le 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>

Étape 3 (code) : associer la table de montage séquentiel à un gestionnaire d'événements

Le meilleur moyen d'appliquer et de démarrer un Storyboard dans le code est d'utiliser un gestionnaire d'événements.

Inscrivez-vous pour l'événement Loaded du rectangle.

[C#]

myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

Déclarez le gestionnaire d'événements. Dans le gestionnaire d'événements, utilisez la méthode Begin pour appliquer la table de montage séquentiel.

[C#]
```
...
public void myRectangleLoaded(object sender, RoutedEventArgs e)
{
    myStoryboard.Begin(this);
}
...
```

Exemple complet

L'exemple suivant montre le code complet pour créer un rectangle qui apparaît et disparaît en fondu.

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Fading Rectangle Example">
  <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>
</Page>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace SDKSample
{

    public class RectangleOpacityFadeExample : Page
    {
        private Storyboard myStoryboard;

        public RectangleOpacityFadeExample()
        {
            NameScope.SetNameScope(this, new NameScope());

            this.WindowTitle = "Fading Rectangle Example";
            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);
        }

    }
}

Types d'animations

Étant donné que les animations génèrent des valeurs de propriété, il existe différents types d'animations pour différents types de propriétés. Pour animer une propriété qui accepte un Double, telle que la propriété Width d'un élément, utilisez une animation qui produit des valeurs Double. Pour animer une propriété qui accepte un Point, utilisez une animation qui produit des valeurs Point, etc. Du fait de la grande diversité des types de propriété, il existe plusieurs classes d'animations dans l'espace de noms System.Windows.Media.Animation. Heureusement, ils suivent une convention d'affectation des noms très stricte qui facilite la différenciation :

<<Type>Animation

Plus connues sous le nom « animation From/To/By » ou « animation de base », elles s'animent entre une valeur initiale et une valeur finale ou par l'ajout d'une valeur de décalage à la valeur initiale.
- Pour spécifier une valeur initiale, définissez la propriété De de l'animation.
- Pour spécifier une valeur finale, définissez la propriété À de l'animation.
- Pour spécifier une valeur de décalage, définissez la propriété Par de l'animation.
Les exemples de cette vue d'ensemble utilisent ces animations car ce sont les plus simples à utiliser. Les animations From/To/By sont décrites plus en détail dans Vue d'ensemble des animations From/To/By.
<<Type>AnimationUsingKeyFrames

Les animations d'image clé sont plus puissantes que les animations From/To/By car vous pouvez spécifier un nombre de valeurs cibles et même contrôler leur méthode d'interpolation. Certains types ne peuvent être animés qu'avec des animations d'image clé. Les animations d'image clé sont décrites plus en détail dans Vue d'ensemble des animations d'image clé.
<<Type>AnimationUsingPath

Les animations de tracés vous permettent d'utiliser un tracé géométrique pour produire des valeurs animées.
<<Type>AnimationBase

C'est une classe abstraite qui, lorsque vous l'implémentez, anime une valeur <Type>. Cette classe sert de classe de base aux classes <Type>Animation et <Type>AnimationUsingKeyFrames. Vous devez utiliser ces classes directement, uniquement si vous souhaitez créer vos propres animations personnalisées. Sinon, utilisez <Type>Animation ou KeyFrame<Type>Animation.

Dans la plupart des cas, vous utiliserez les classes <Type>Animation, telles que DoubleAnimation et ColorAnimation.

Le tableau suivant montre plusieurs types d'animations courants et certaines propriétés avec lesquelles ils sont utilisés.

Type de propriété	Animation de base (From/To/By) correspondante	Animation d'image clé correspondante	Animation de tracé correspondante	Exemple d'utilisation
Color	ColorAnimation	ColorAnimationUsingKeyFrames	Aucune	Animer le Color d'un SolidColorBrush ou d'un GradientStop.
Double	DoubleAnimation	DoubleAnimationUsingKeyFrames	DoubleAnimationUsingPath	Animer le Width d'un DockPanel ou le Height d'un Button.
Point	PointAnimation	PointAnimationUsingKeyFrames	PointAnimationUsingPath	Animer la position Center d'un EllipseGeometry.
String	Aucune	StringAnimationUsingKeyFrames	Aucune	Animer le Text d'un TextBlock ou le Content d'un Button.

Les animations sont des chronologies

Tous les types d'animations héritent de la classe Timeline ; par conséquent, toutes les animations sont des types de chronologies spécialisés. Une 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'elle est répétée, et même la vitesse à laquelle le temps y progresse.

Étant donné qu'une animation est une Timeline, elle représente également un segment de temps. Une animation calcule également les valeurs de sortie pendant sa progression le long de son segment de temps spécifié (ou Duration). Pendant la progression ou « lecture » de l'animation, cette dernière met à jour la propriété à laquelle elle est associée.

Les trois propriétés de minutage les plus utilisées sont les suivantes : Duration, AutoReverse et RepeatBehavior.

La propriété Durée

Comme mentionné ci-dessus, une chronologie représente un segment de temps. La longueur de ce segment est déterminée par le Duration de la chronologie, habituellement spécifiée par une valeur TimeSpan. Lorsqu'une chronologie atteint la fin de sa durée, elle a terminé une itération.

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

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

heures:minutes:secondes

Le tableau suivant montre plusieurs paramètres de Duration et leurs valeurs correspondantes.

Paramètre	Valeur correspondante
0:0:5.5	5,5 secondes.
0:30:5.5	30 minutes et 5,5 secondes.
1:30:5.5	1 heure, 30 minutes et 5,5 secondes.

L'un des moyens de spécifier une Duration dans le code est d'utiliser la méthode FromSeconds pour créer un TimeSpan, puis de déclarer une nouvelle structure Duration avec ce TimeSpan.

Pour plus d'informations sur les valeurs de Duration et la syntaxe XAML (Extensible Application Markup Language) complète, consultez la page Duration.

AutoReverse

La propriété AutoReverse spécifie si une chronologie est rejouée après avoir atteint la fin de son Duration. Si cette propriété d'animation a la valeur true, l'animation recommence après avoir atteint la fin de son Duration, en commençant par sa valeur finale et en terminant par sa valeur initiale. La valeur par défaut de cette propriété est false.

RepeatBehavior

La propriété RepeatBehavior spécifie le nombre de fois que la chronologie est jouée. Par défaut, le nombre d'itérations des chronologies est 1.0, ce qui signifie qu'elles ne sont jouées qu'une seule fois.

Pour plus d'informations sur ces propriétés ou sur d'autres propriétés, consultez 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. Les objets Storyboard offrent le 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'il contient.

Ciblage des objets et des propriétés

La classe Storyboard fournit les propriétés attachées. TargetName et TargetProperty. En définissant ces propriétés sur une animation, vous expliquez à l'animation ce qu'elle doit animer. Toutefois, avant que l'animation ne puisse cibler un objet, il faut généralement que l'objet ait un nom.

L'affectation d'un nom à un FrameworkElement diffère de l'affectation d'un nom à un objet Freezable. La plupart des contrôles et des panneaux sont des éléments d'infrastructure ; toutefois, les objets purement graphiques, tels que les pinceaux, les transformations et les géométries, sont des objets Freezable. Si vous n'êtes pas certain qu'un type soit un FrameworkElement ou un Freezable, reportez-vous à la section Hiérarchie d'héritage de la page correspondante.

Pour qu'un FrameworkElement devienne une cible d'animation, donnez-lui un nom en définissant sa propriété Name. Dans le code, vous devez également utiliser la méthode RegisterName pour enregistrer le nom de l'élément avec la page à laquelle il appartient.
Pour qu'un objet Freezable devienne une cible d'animation en XAML, utilisez l'attribut x:Name (voir x:Name, attribut) pour lui affecter un nom. Dans le code, utilisez simplement la méthode RegisterName pour enregistrer l'objet avec la page à laquelle il appartient.

Les sections qui suivent fournissent un exemple d'affectation de nom à un élément en XAML et en code. Pour des informations plus détaillées sur l'affectation de noms et le ciblage, consultez Vue d'ensemble des tables de montage séquentiel.

Application et démarrage des tables de montage séquentiel

Pour démarrer une table de montage séquentiel en XAML, associez-la à un EventTrigger. Un EventTrigger est un objet qui décrit les actions à exécuter lorsqu'un événement spécifié a lieu. L'une de ces actions peut être une action BeginStoryboard, utilisée pour démarrer votre table de montage séquentiel. En théorie, les déclencheurs d'événements sont semblables aux gestionnaires d'événements car ils vous permettent de spécifier la manière 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 un EventTrigger ou la méthode Begin de la classe Storyboard.

Contrôle interactif d'une table de montage séquentiel

L'exemple précédent montrait comment démarrer un Storyboard lors de l'exécution d'un événement. Vous pouvez également contrôler un Storyboard de manière interactive après son démarrage : vous pouvez suspendre, reprendre, arrêter, avancer à la période de remplissage, rechercher et supprimer le Storyboard. Pour obtenir des informations supplémentaires et un exemple qui montre comment contrôler un Storyboard de manière interactive, consultez Vue d'ensemble des tables de montage séquentiel.

Que se passe t-il à la fin d'une animation ?

La propriété FillBehavior spécifie le comportement d'une chronologie lorsqu'elle se termine. Par défaut, une chronologie démarre le Filling lorsqu'elle se termine. Une animation Filling conserve sa dernière valeur de sortie.

Le DoubleAnimation de l'exemple précédent ne se termine pas car sa propriété RepeatBehavior a la valeur Forever. L'exemple suivant anime un rectangle avec une animation semblable. Contrairement à l'exemple précédent, les propriétés RepeatBehavior et AutoReverse de cette animation conservent leurs valeurs par défaut. Par conséquent, l'animation passe de 1 à 0 en 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));

Étant donné que son FillBehavior a conservé sa valeur par défaut, soit HoldEnd, l'animation conserve sa dernière valeur, c'est-à-dire 0, lorsqu'elle se termine. Par conséquent, l'Opacity du rectangle reste à 0 à la fin de l'animation. Si l'Opacity du rectangle a une autre valeur, votre code semblera n'avoir aucun effet car l'animation affectera toujours la propriété Opacity.

L'un des moyens de reprendre le contrôle sur une propriété animée dans le code est d'utiliser la méthode BeginAnimation et de spécifier null pour le paramètre AnimationTimeline. Pour obtenir des informations supplémentaires et un exemple, consultez Comment : définir une propriété après l'avoir animée avec une table de montage séquentiel.

Notez que, bien que le fait de définir une valeur de propriété ayant une animation Active ou Filling semble n'avoir aucun effet, la valeur de propriété est modifiée. Pour plus d'informations, consultez Vue d'ensemble de l'animation et du système de minutage.

Liaison de données et animation

La plupart des propriétés d'animation peuvent être liées aux données ou animées ; par exemple, vous pouvez animer la propriété Duration d'un DoubleAnimation. Toutefois, étant donné la manière dont fonctionne le système de minuterie, les animations liées aux données ou animées ne se comportent pas comme les autres objets liés aux données ou animés. Pour comprendre leur comportement, il faut comprendre ce que signifie appliquer une animation à une propriété.

Référez-vous à l'exemple de la section précédente qui montrait comment animer l'Opacity d'un rectangle. Lorsque le rectangle de l'exemple précédent est chargé, son déclencheur d'événements applique le Storyboard. Le système de minuterie crée une copie du Storyboard et de son animation. Ces copies sont figées (en lecture seule) et les objets Clock sont créés depuis celles-ci. Ces horloges animent les propriétés ciblées.

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

Bien qu'une horloge soit également créée pour le Storyboard, elle n'est pas appliquée à toutes les propriétés. Son but est de contrôler son horloge enfant, l'horloge créée pour DoubleAnimation.

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

Pour obtenir un exemple d'animation liée aux données, consultez Animation de spline clé, exemple. Pour plus d'informations sur la manière dont fonctionnent l'animation et le système de minuterie, consultez Vue d'ensemble de l'animation et du système de minutage.

Autres méthodes d'animation

Les exemples de cette vue d'ensemble montrent comment animer à l'aide de tables de montage séquentiel. Lorsque vous utilisez du code, vous pouvez animer de nombreuses autres manières. Pour plus d'informations, consultez Vue d'ensemble des techniques d'animation de propriétés.

Exemples d'animation

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

Animation de propriété, exemple

Montre comment appliquer des animations aux éléments d'infrastructure et aux objets Freezable.
Valeurs cibles d'animation From, To et By, exemple

Montre différents paramètres From/To/By.
Comportement de minutage d'une animation, exemple

Montre les différents moyens de contrôler le comportement de minutage d'une animation. Cet exemple indique également comment lier la valeur finale d'une animation aux données.