Vue d'ensemble des comportements de minutage

Article
08/22/2008

Mise à jour : novembre 2007

Cette rubrique décrit les comportements de minutage d'animations et d'autres objets Timeline.

Composants requis

Pour comprendre cette rubrique, vous devez être familiarisé avec les fonctionnalités d'animations de base. Pour plus d'informations, consultez Vue d'ensemble de l'animation.

Types de chronologies

Une Timeline représente un segment de temps. Elle fournit des propriétés qui vous permettent de spécifier la longueur de ce segment, lorsqu'il doit démarrer, combien de fois il se répétera, à quelle vitesse progresse le temps dans ce segment, etc.

Les classes qui héritent de la classe de chronologie offrent des fonctionnalités supplémentaires, telles que l'animation et lecture multimédia. WPF fournit les types de Timeline suivants.

Type de chronologie	Description
AnimationTimeline	Classe de base abstraite pour les objets Timeline qui génèrent des valeurs de sortie pour animer des propriétés.
MediaTimeline	Génère la sortie d'un fichier multimédia.
ParallelTimeline	Un type de TimelineGroup qui regroupe et contrôle des objets Timeline enfants.
Storyboard	Un type de ParallelTimeline qui fournit des informations de ciblage pour les objets de chronologies qu'il contient.
Timeline	Classe de base abstraite qui définit des comportements de minutage.
TimelineGroup	Classe abstraite pour les objets Timeline qui peuvent contenir d'autres objets Timeline.

Propriétés qui contrôlent la longueur d'une chronologie

Une Timeline représente un segment de temps, et sa longueur peut être décrite de différentes façons. La table suivante définit plusieurs termes pour décrire la longueur d'une chronologie.

Terme	Description	Propriétés
Durée simple	La durée qu'une chronologie prend pour faire une itération avancée unique.	Duration
Une répétition	La durée que prend pour une chronologie pour jouer une fois en avant et, si la propriété AutoReverse a la valeur True, pour jouer une fois en arrière.	Duration, AutoReverse
Période active	La durée que prend une chronologie pour compléter toutes les répétitions spécifiées par sa propriété RepeatBehavior.	Duration, AutoReverse, 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 la Durationde la chronologie. Lorsqu'une chronologie atteint la fin de sa durée, elle arrête de jouer. Si la chronologie a des chronologies enfants, elles cessent de jouer également. Dans le cas d'une animation, la Duration indique le temps que prend une animation pour passer de sa valeur initiale à sa valeur finale. La durée d'une chronologie est parfois appelée sa durée simple, pour distinguer entre la durée d'une itération unique et la durée totale jouée par animation en tenant compte des répétitions. Vous pouvez spécifier une durée à l'aide d'une valeur de temps finie ou des valeurs spéciales Automatic ou Forever. La durée d'une animation doit résoudre à une valeur TimeSpan, afin de pouvoir faire la transition entre les valeurs.

L'exemple suivant affiche une DoubleAnimation avec une Duration de cinq secondes.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5"  />

Les chronologies de conteneur, telles que Storyboard et ParallelTimeline, ont une durée par défaut de Automatic, ce qui signifie qu'elles se terminent automatiquement lorsque leur dernier enfant arrête de jouer. L'exemple suivant affiche un Storyboard dont la Duration résout à cinq secondes, durée nécessaire pour que tous ses objets enfants DoubleAnimation se terminent.

<Storyboard >

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5"  />

  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  />

</Storyboard>

En définissant la Duration d'une chronologie de conteneur à une valeur de TimeSpan, vous pouvez forcer à jouer plus ou moins longtemps que ses objets enfants Timeline. Si vous définissez la Duration à une valeur qui est plus petite que la longueur des objets enfants Timeline de la chronologie de conteneur, les objets enfants Timeline cessent de jouer en même temps que la chronologie de conteneur. L'exemple suivant définit la Duration du Storyboard des exemples précédents à trois secondes. En conséquence, la première DoubleAnimation cesse de progresser après trois secondes, lorsqu'elle a animé la largeur du rectangle cible à 60.

<Storyboard Duration="0:0:3">

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5"  />

  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  />

</Storyboard>

La propriété RepeatBehavior

La propriété RepeatBehavior d'une Timeline contrôle le nombre de fois qu'elle répète sa durée simple. À l'aide de la propriété RepeatBehavior, vous pouvez spécifier combien de fois la chronologie joue (une itération Count) ou la durée totale qu'elle doit jouer (une répétition Duration). Dans les deux cas, l'animation est répétée du début à la fin, autant de fois que nécessaire pour répondre à la durée ou au nombre demandé. 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.

L'exemple suivant utilise la propriété RepeatBehavior pour qu'une DoubleAnimation joue deux fois sa durée simple en spécifiant un nombre d'itérations.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2x" />

L'exemple suivant utilise la propriété RepeatBehavior pour que l'DoubleAnimation joue pour la moitié de sa durée simple.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="0.5x" />

Si vous définissez la propriété RepeatBehavior d'une Timeline à Forever, la Timeline se répète jusqu'à ce qu'elle soit arrêtée interactivement ou par le système de minutage. L'exemple suivant utilise la propriété RepeatBehavior pour que la DoubleAnimation joue indéfiniment.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="Forever" />

Pour obtenir un exemple supplémentaire, consultez Comment : répéter une animation.

La propriété AutoReverse

La propriété AutoReverse indique si Timeline jouera en arrière à la fin de chaque itération avancée. L'exemple suivant affecte à la propriété AutoReverse de DoubleAnimation la valeur true. Par conséquent, elle s'anime de zéro à 100, puis de 100 à zéro. Elle joue pendant 10 secondes au total.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  AutoReverse="True" />

Lorsque vous utilisez une valeur Count pour spécifier le RepeatBehavior d'une Timeline et que la propriété AutoReverse de cette Timeline a la valeur true, une répétition unique se compose d'une itération avancée suivie d'une itération arrière. L'exemple suivant définit RepeatBehavior de DoubleAnimation de l'exemple précédent à deux Count. En conséquence, la DoubleAnimation joue pendant 20 secondes : en avant pendant cinq secondes, en arrière pendant cinq secondes, en avant pendant encore pour cinq secondes, puis en arrière pendant cinq secondes.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2" 
  AutoReverse="True" />

Si une chronologie de conteneur a des objets enfants Timeline, ils s'inversent en même temps que la chronologie de conteneur. Pour plus d'exemples, consultez Comment : spécifier l'inversion automatique ou non d'une chronologie.

La propriété BeginTime

La propriété BeginTime vous permet de spécifier quand une chronologie démarre. L'heure de début d'une chronologie est relative à sa chronologie parente. Une heure de début de zéro seconde signifie que la chronologie démarre dès son parent démarre ; toute autre valeur crée un offset entre le moment où la chronologie parente commence à jouer et le moment où la chronologie enfant joue. Par exemple, une heure de début de deux secondes signifie que la chronologie commence à jouer lorsque son parent a atteint une durée de deux secondes. Par défaut, toutes les chronologies ont une heure de début de zéro seconde. Vous pouvez également définir l'heure de début d'une chronologie à null, ce qui empêche la chronologie de démarrer. Dans WPF, vous indiquez zéro en utilisant x:Null, extension de balisage.

Notez que l'heure de début n'est pas appliquée à chaque fois qu'une chronologie se répète en raison de son paramètre RepeatBehavior. Si vous deviez créer une animation avec une BeginTime de 10 secondes et un RepeatBehavior de Forever, il y aurait un délai de 10 secondes avant que l'animation ne joue pour la première fois, mais pas pour chaque répétition successive. Toutefois, si la chronologie parente de l'animation devait redémarrer ou se répéter, le délai de 10 secondes se produirait.

La propriété BeginTime est utile pour les chronologies graduelles. L'exemple suivant crée un Storyboard qui a deux objets DoubleAnimation enfants. La première animation a une Duration de 5 secondes, et la seconde a une Duration de 3 secondes. L'exemple définit le BeginTime de la deuxième DoubleAnimation à 5 secondes, afin qu'elle commence à jouer une fois que la première DoubleAnimation est terminée.

<Storyboard>

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5" 
    BeginTime="0:0:0" />


  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  
    BeginTime="0:0:5" />

</Storyboard>

La propriété FillBehavior

Lorsqu'une Timeline atteint la fin de sa durée active totale, la propriété FillBehavior spécifie s'il elle s'arrête ou si elle maintient sa dernière valeur. Une animation avec un FillBehavior de HoldEnd "conserve" sa valeur de sortie : la propriété qui est animée conserve la dernière valeur de l'animation. Une valeur de Stop entraîne l'animation à cesser d'affecter sa propriété cible une fois qu'elle est terminée.

L'exemple suivant crée un Storyboard qui a deux objets DoubleAnimation enfants. Les deux objets DoubleAnimation animent la Width d'un Rectangle de 0 à 100. Les éléments Rectangle ont des valeurs non animées Width de 500 pixels indépendants du périphérique.

La propriété FillBehavior du premier DoubleAnimation a la valeur HoldEnd, la valeur par défaut. Par conséquent, la largeur du rectangle reste à 100 après la fin de DoubleAnimation.
La propriété FillBehavior du second DoubleAnimation a la valeur Stop. Par conséquent, Width du second Rectangle revient à 500 après la fin de DoubleAnimation.

<Rectangle Name="MyRectangle" 
 Width="500" Height="100"
 Opacity="1" Fill="Red">
</Rectangle>

<Rectangle Name="MyOtherRectangle" 
 Width="500" Height="100"
 Opacity="1" Fill="Orange">
</Rectangle>

<Button Content="Start FillBehavior Example">
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation 
            Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
            From="0" To="100" Duration="0:0:5" 
            FillBehavior="HoldEnd" />
          <DoubleAnimation 
            Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
            From="0" To="100" Duration="0:0:5"  
            FillBehavior="Stop" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

Propriétés qui contrôlent la vitesse d'une chronologie

La classe Timeline fournit trois propriétés pour spécifier sa vitesse :

SpeedRatio. Spécifie la vitesse, par rapport à son parent, à laquelle progresse le temps pour une Timeline. Les valeurs supérieures à un augmentent la vitesse des Timeline et de ses objets Timeline enfants ; les valeurs entre zéro et un la ralentissent. Une valeur de un indique que la Timeline progresse à la même vitesse que son parent. Le paramètre SpeedRatio d'une chronologie de conteneur affecte également tous ses objets Timeline enfants.
AccelerationRatio. Spécifie le pourcentage de Duration qu'une chronologie passe à accélérer. Pour obtenir un exemple, consultez Comment : accélérer ou décélérer une animation.
DecelerationRatio. Spécifie le pourcentage de Duration qu'une chronologie passe à ralentir. Pour obtenir un exemple, consultez Comment : accélérer ou décélérer une animation.

Voir aussi

Partager via