Partager via

Vue d'ensemble de l'animation

  • Article

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 conviviale. 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 créée en parcourant rapidement 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 à l’aide de caméras qui enregistrent plusieurs photos, ou frames, chaque seconde. Lorsque les images sont lues par un projecteur, le public voit une image en mouvement.

L’animation sur un ordinateur est similaire. Par exemple, un programme qui dessine un rectangle disparaissant en fondu peut fonctionner comme suit.

  • Le programme crée une minuterie.

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

  • Chaque fois que le programme vérifie la minuterie, il calcule la valeur actuelle d’opacité du rectangle selon le temps écoulé.

  • Ensuite, le programme met à 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 les classes de minuterie qui vous permettent de vous concentrer sur les effets que vous souhaitez créer, au lieu de la mécanique de la réalisation de ces effets. 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 récupèrent nombre des avantages de performance 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 développer un élément de framework, vous animez ses propriétés et Height ses Width propriétés. Pour rendre un objet fondu à partir d’une vue, vous animez sa Opacity propriété.

Pour qu’une propriété dispose de fonctionnalités d’animation, elle doit respecter les trois conditions suivantes :

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

  • Il doit appartenir à une classe qui hérite et DependencyObject 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 , et également Panel et les Shape objets héritent de DependencyObjectTabControl. La plupart de leurs propriétés sont des propriétés de dépendance.

Vous pouvez utiliser des animations presque n’importe où, y compris dans les styles et modèles de contrôle. Les animations n’ont 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éation d’un fondu hors de l’affichage pour 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 DoubleAnimationtype d’animation qui génère des Double valeurs, pour animer la Opacity propriété d’un Rectangle. Par conséquent, les Rectangle fondus sont en panne et hors 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éation d’un objet DoubleAnimation

Une façon de rendre un élément fondu dans et hors vue 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. C’est DoubleAnimation une animation de ce genre. Une DoubleAnimation transition entre deux valeurs doubles est créée. 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é rend 1.0 l’objet complètement opaque et une valeur d’opacité de 0.0 la rend complètement invisible. Pour effectuer la transition d’animation vers 1.0 0.0 vous définissez sa From propriété sur 1.0 et sa To propriété 0.0sur . 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 code 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 Duration valeur cinq secondes en XAML.

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

    L’exemple suivant montre comment définir la valeur cinq secondes dans le Duration 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 l’fondu de l’élément cible de complètement opaque à complètement invisible. Pour rendre l’élément fondu en vue après qu’il disparaît, définissez la AutoReverse propriété de l’animation truesur . 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 et RepeatBehavior les AutoReverse propriétés 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 et RepeatBehavior les propriétés dans le AutoReverse code.

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

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

Partie 2 : Création d’un storyboard

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

  1. Créez l’animation 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 code, déclarez une Storyboard variable au niveau de la classe.

    public partial class MainWindow : Window
{
    private Storyboard myStoryboard;

    Class MainWindow

    Private myStoryboard As Storyboard

    Initialisez ensuite l’animation Storyboard et ajoutez l’animation en tant qu’enfant.

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

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

  2. Il Storyboard faut 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 la DoubleAnimation valeur 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 la valeur MyRectangle dans le DoubleAnimation code.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)

  3. Utilisez la TargetProperty propriété jointe pour 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>

    L’illustration suivante montre comment l’animation est configurée pour cibler la Opacity propriété du Rectangle 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) : Association du 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 déclencheur en XAML.

  1. Créez un BeginStoryboard objet et associez votre storyboard à celui-ci. Il BeginStoryboard s’agit d’un type qui TriggerAction 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 une EventTrigger collection et ajoutez-la BeginStoryboard à sa Actions collection. Définissez la RoutedEvent propriété de EventTrigger l’événement routé que vous souhaitez démarrer Storyboard. (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>

  3. Ajoutez la EventTrigger Triggers collection 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) : Association du 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 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 suivant montre comment créer un rectangle qui s’est fondu dans et hors vue en 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 avec un fondu dans et hors de l’affichage avec du 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’animation

É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é. 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 de propriétés différents, il existe plusieurs classes d’animation dans l’espace System.Windows.Media.Animation de noms. Heureusement, ils suivent une convention d’appellation stricte qui facilite la différenciation :

  • <Animation de type>

    Appelées animations « From/To/By » ou « de base », elles animent entre une valeur de début et de destination, ou en ajoutant une valeur de décalage à la valeur initiale.

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

    • Pour spécifier une valeur finale, 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 plus simples à utiliser. Les animations From/To/By sont décrites 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 n’importe quel 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’images clés sont décrites en détail dans Vue d'ensemble des animations d'image clé.

  • <Type>AnimationUsingPath

    Les animations de tracés permettent d’utiliser un tracé géométrique pour produire des valeurs animées.

  • <Type>AnimationBase

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

Dans la plupart des cas, vous souhaiterez utiliser les <classes d’animation de type>, 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 l’objet Color d’un ou d’un SolidColorBrush GradientStop.
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath Animer l’un Width DockPanel ou l’autre Height d’un Button.
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath Animer la Center position d’un EllipseGeometry.
String None StringAnimationUsingKeyFrames None Animer l’un Text TextBlock ou l’autre Content d’un Button.

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. Définit Timeline 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). Lorsque l’animation progresse, ou est « lue », elle met à jour la propriété qui lui est associée.

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

La propriété Duration

Comme indiqué plus haut, 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.

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

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

Pour plus d’informations sur Duration les valeurs et la syntaxe XAML (Extensible Application Markup Language), consultez la Duration structure.

AutoReverse

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é trued’animation sur , une animation s’inverse une fois qu’elle atteint la fin de celle-ci Duration, en jouant de sa valeur de fin à sa valeur de départ. Par défaut, cette propriété est false.

RepeatBehavior

La RepeatBehavior propriété spécifie le nombre de fois qu’une chronologie est lue. Par défaut, les chronologies ont un nombre d’itérations de 1.0, ce qui signifie qu’elles s’exécutent une fois seulement 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 minuterie.

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 minuterie. 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. Il Storyboard s’agit d’une chronologie de conteneur qui fournit des informations de ciblage pour les animations qu’il contient.

Ciblage des objets et propriétés

La Storyboard classe fournit les TargetName propriétés jointes et TargetProperty les propriétés jointes. En définissant ces propriétés sur une animation, vous dites à l’animation ce qu’elle doit animer. Toutefois, avant qu’une animation puisse cibler un objet, l’objet doit généralement obtenir 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 framework. Toutefois, les objets purement graphiques, comme les pinceaux, les transformations et les géométries, sont des objets Freezable. 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 obtenir des informations plus détaillées sur les noms et le ciblage, consultez la Vue d'ensemble des storyboards.

Application et démarrage des storyboards

Pour démarrer un storyboard en XAML, vous l’associez à un EventTrigger. Il EventTrigger s’agit d’un objet qui décrit les 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 un concept similaire aux 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 code, vous pouvez utiliser une EventTrigger méthode ou utiliser la Begin méthode de la Storyboard classe.

Contrôler un storyboard de façon interactive

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 démarre quand elle se Filling termine. Animation qui Filling contient 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 avec une animation semblable. Contrairement à l’exemple précédent, les RepeatBehavior propriétés de AutoReverse cette animation sont laissées à leurs valeurs par défaut. Par conséquent, l’animation passe de 1 à 0 en cinq secondes et 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 Active ou Filling une animation n’ait aucun effet, la valeur de la propriété change. Pour plus d’informations, consultez l’article Vue d'ensemble de l'animation et du système de minutage.

Liaison de données et animation des 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 de la façon dont le système de minutage fonctionne, les données liées ou animations animées ne se comportent pas comme les autres données liées ou objets animés. Pour comprendre leur comportement, il est utile de comprendre ce que signifie l’application d’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 l’animation Storyboard et de l’animation. Ces copies sont figées (en lecture seule) et Clock les objets sont créés à partir d’eux. Ces horloges effectuent le travail réel de l’animation des propriétés ciblées.

Le système de minutage crée une horloge pour l’objet DoubleAnimation et l’applique à l’objet et à la propriété spécifiés par le TargetName et TargetProperty le 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, l’horloge n’est appliquée à aucune propriété. Son objectif est de contrôler son horloge enfant, l’horloge créée pour le DoubleAnimation.

Pour qu’une animation reflète les modifications d’animation ou de liaison de données, son horloge doit être régénérée. Les horloges ne sont pas régénérées automatiquement pour vous. 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 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 de données lié à l’animation, consultez Exemple d’animation de courbe clé. Pour plus d’informations sur le fonctionnement du système de minutage et de l’animation, 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 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 de propriétés.

Exemples d’animation

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

Intitulé Description
Vue d’ensemble de l’animation et du système de minutage Décrit comment le système de minutage utilise les classes et Clock les Timeline classes qui vous permettent de créer des animations.
Conseils et astuces sur les animations Répertorie des conseils utiles pour résoudre les problèmes d’animation, tels que les performances.
Vue d'ensemble des animations personnalisées Décrit comment étendre le système d’animation avec des images clés, des classes d’animation ou des rappels image par image.
Vue d’ensemble des animations From/To/By Décrit comment créer une animation qui effectue la transition entre deux valeurs.
Vue d'ensemble des animations d'image clé Décrit comment créer une animation avec plusieurs valeurs cibles, notamment la possibilité de contrôler la méthode d’interpolation.
Fonctions d'accélération Explique comment appliquer des formules mathématiques à vos animations pour obtenir un comportement réaliste, tel que rebondissement.
Vue d'ensemble des animations de tracés Décrit comment déplacer ou faire pivoter un objet sur un tracé complexe.
Vue d’ensemble des techniques d’animation de propriétés Décrit des animations de propriété à l’aide de storyboards, animations locales, horloges et des animations image par image.
Vue d'ensemble des storyboards Décrit comment utiliser les storyboards avec plusieurs chronologies pour créer des animations complexes.
Vue d’ensemble des comportements de minutage Décrit les Timeline types et les propriétés utilisés dans les animations.
Vue d'ensemble des événements de minuterie Décrit les événements disponibles sur les objets et Clock les Timeline objets pour l’exécution du code à des points de la chronologie, tels que commencer, suspendre, reprendre, ignorer ou arrêter.
Guides pratiques Contient des exemples de code pour l’utilisation des animations et des chronologies dans votre application.
Guides pratiques relatifs aux objets Clock Contient des exemples de code pour l’utilisation de l’objet Clock dans votre application.
Guides pratiques relatifs aux images clés Contient des exemples de code pour l’utilisation des animations d’image clé dans votre application.
Guides pratiques relatifs aux animations de tracés Contient des exemples de code pour l’utilisation des animations de tracés dans votre application.

Référence