Vue d'ensemble de l'animation
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
- Référence
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 minutage efficace exposé via du code managé et via Extensible Application Markup Language (XAML), profondément intégré à l'infrastructure WPF. L'animation WPF facilite l'animation de contrôles et d'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 minutage vous permettant de vous concentrer sur les effets que vous voulez créer, plutôt que sur les mécanismes nécessaires pour y parvenir. WPF facilite également la création de vos propres animations en exposant les classes de base d'animation desquelles vos classes peuvent hériter, 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 WPF n'en fournit pas, vous pouvez en créer un. Consultez Vue d'ensemble des animations personnalisées.)
WPF contient de nombreux objets qui ont des propriétés IAnimatable. 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 s'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. Les étapes qui suivent montrent comment créer une animation et l'appliquer à la propriété Opacity du rectangle.
L'exemple suivant montre comment créer un élément Rectangle dans StackPanel en XAML.
<StackPanel Margin="10">
<Rectangle
Name="MyRectangle"
Width="100"
Height="100"
Fill="Blue">
</Rectangle>
</StackPanel>
L'exemple suivant montre comment créer un élément Rectangle dans StackPanel dans le code.
Dim myPanel As StackPanel = New StackPanel
myPanel.Margin = New Thickness(10)
Dim myRectangle As Rectangle = 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
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. L'exemple suivant montre comment créer une DoubleAnimation en XAML.
<DoubleAnimation From="1.0" To="0.0" />L'exemple suivant montre comment créer DoubleAnimation dans le code.
Dim myDoubleAnimation As DoubleAnimation = New DoubleAnimation() myDoubleAnimation.From = 1.0 myDoubleAnimation.To = 0.0DoubleAnimation 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. L'exemple suivant montre comment définir Duration à cinq secondes en XAML.
<DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />L'exemple suivant montre comment définir Duration à cinq secondes dans le code.
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(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, définissez sa propriété RepeatBehavior à Forever. 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.ForevermyDoubleAnimation.AutoReverse = true; 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ées TargetName 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. L'exemple suivant montre comment créer Storyboard en XAML.
Pour créer Storyboard dans le code, déclarez une variable Storyboard au niveau de la classe.
Class MainWindow Private myStoryboard As Storyboardpublic partial class MainWindow : Window { private Storyboard myStoryboard;Initialisez ensuite le Storyboard et ajoutez-y l'animation en tant qu'enfant.
myStoryboard = New Storyboard() myStoryboard.Children.Add(myDoubleAnimation)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. L'exemple suivant montre comment définir le nom cible de DoubleAnimation à 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);Utilisez la propriété attachée TargetProperty pour spécifier la propriété à animer. L'exemple suivant montre comment l'animation est configurée pour cibler la propriété Opacity de Rectangle en XAML.
<Storyboard> <DoubleAnimation Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard>L'exemple suivant montre comment l'animation est configurée pour cibler la propriété Opacity de Rectangle dans le code.
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))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 storyboards.
É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. Cette section indique comment associer Storyboard avec un déclencheur en XAML.
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. Cette section indique comment associer Storyboard avec un gestionnaire d'événements dans le code.
Inscrivez-vous pour l'événement Loaded du rectangle.
AddHandler myRectangle.Loaded, AddressOf myRectangleLoadedmyRectangle.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.
Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs) myStoryboard.Begin(Me) End Subprivate void myRectangleLoaded(object sender, RoutedEventArgs e) { myStoryboard.Begin(this); }
Exemple complet
L'exemple suivant montre comment créer un rectangle qui s'atténue à l'intérieur et à l'extérieur de la vue en XAML.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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 s'atténue à l'intérieur et à l'extérieur de la vue dans le code.
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
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);
}
}
}
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 |
|---|---|---|---|---|
Aucun |
Animer le Color d'un SolidColorBrush ou d'un GradientStop. |
|||
Animer la position Center d'un EllipseGeometry. |
||||
Aucun |
Aucun |
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 Extensible Application Markup Language (XAML) 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 Extensible Application Markup Language (XAML) complète, consultez la structure 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 indique comment appliquer l'animation à la propriété que vous souhaitez animer. Les objets Storyboard sont 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'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 documentation de référence.
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, directive) 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 storyboards.
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 storyboards.
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>
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
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 un storyboard.
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.
Valeurs cibles d'animation From, To et By, exemple (page éventuellement en anglais)
Montre différents paramètres From/To/By.
Comportement de minutage d'une animation, exemple (page éventuellement en anglais)
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.
Rubriques connexes
Titre |
Description |
|---|---|
Explique comment le système de minuterie utilise les classes Timeline et Clock, qui permettent de créer des animations. |
|
Répertorie les conseils utiles pour résoudre les problèmes d'animation, tels que les performances. |
|
Explique comment étendre le système d'animation avec des images clés, des classes d'animation ou des rappels image par image. |
|
Explique comment créer une animation passe d'une valeur à l'autre. |
|
Explique comment créer une animation avec plusieurs valeurs cibles, notamment la possibilité de contrôler la méthode d'interpolation. |
|
Explique comment appliquer des formules mathématiques à vos animations pour obtenir un comportement réaliste, tel qu'un effet rebondissant. |
|
Explique comment déplacer ou faire pivoter un objet le long d'un chemin d'accès complexe. |
|
Décrit des animations de propriété à l'aide des storyboards, des animations locales, des horloges et des animations image par image. |
|
Explique comment utiliser les storyboards avec plusieurs chronologies pour créer des animations complexes. |
|
Décrit les types et les propriétés Timeline utilisés dans les animations. |
|
Décrit les événements disponibles sur les objets Timeline et Clock pour exécuter du code à certaines points de la chronologie, tels que begin, pause, resume, skip ou stop. |
|
Contient des exemples de code pour l'utilisation des animations et des chronologies dans votre application. |
|
Contient des exemples de code pour l'utilisation de l'objet Clock dans votre application. |
|
Contient des exemples de code pour l'utilisation d'animations d'image clé dans votre application. |
|
Contient des exemples de code pour l'utilisation d'animations de tracé dans votre application. |
Référence
Historique des modifications
Date |
Historique |
Motif |
|---|---|---|
Octobre 2010 |
Extraits de code Visual Basic manquants ajoutés. |
Commentaires client. |