Partager via

Vue d’ensemble des comportements de synchronisation

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

Conditions préalables

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

Types de chronologie

Timeline représente un segment de temps. Il fournit des propriétés qui vous permettent de spécifier la longueur de ce segment, le moment où il doit démarrer, le nombre de fois qu’il se répète, le temps de progression rapide dans ce segment, et bien plus encore.

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

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

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

Un Timeline représente un segment de temps et la longueur d’une chronologie peut être décrite de différentes manières. Le tableau suivant définit plusieurs termes pour décrire la longueur d’une chronologie.

Terme Descriptif Propriétés
Durée simple Temps nécessaire à une chronologie pour réaliser une seule itération vers l’avant. Duration
Une répétition La durée nécessaire pour qu'une chronologie soit lue une fois vers l'avant et, si la propriété AutoReverse est vraie, lue une fois à l'envers. Duration, AutoReverse
Période active Durée nécessaire pour qu’une chronologie termine toutes les répétitions spécifiées par sa RepeatBehavior propriété. Duration, , AutoReverseRepeatBehavior

La propriété Duration

Comme mentionné précédemment, une chronologie représente un segment de temps. La longueur de ce segment est déterminée par la chronologie Duration. Lorsqu’une chronologie atteint la fin de sa durée, elle cesse de jouer. Si la chronologie comporte des chronologies enfants, elles arrêtent également de jouer. Dans le cas d’une animation, Duration spécifie combien de temps l’animation met pour passer de sa valeur de départ à sa valeur de fin. La durée d’une chronologie est parfois appelée sa durée simple, pour faire la distinction entre la durée d’une itération unique et la durée totale du déroulement de l’animation, y compris les répétitions. Vous pouvez spécifier une durée à l’aide d’une valeur de temps finie ou des valeurs Automatic spéciales ou Forever. La durée d’une animation doit être résolue en une valeur TimeSpan, afin qu’elle puisse passer d’une valeur à une autre.

L’exemple suivant montre un DoubleAnimation avec un 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 , Automaticce qui signifie qu’elles se terminent automatiquement quand leur dernier enfant cesse de jouer. L’exemple suivant montre un Storyboard dont Duration a un temps de résolution de cinq secondes, le temps nécessaire pour que tous ses objets enfants DoubleAnimation soient exécutés.

<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 TimeSpan valeur, vous pouvez obliger celle-ci à jouer plus longtemps ou plus court que ne le feraient ses objets enfants Timeline. Si vous définissez la Duration valeur sur une valeur inférieure à la longueur des objets enfants Timeline de la chronologie du conteneur, les objets enfants Timeline arrêtent de jouer lorsque la chronologie du conteneur le fait. L'exemple suivant règle le Duration du Storyboard des exemples précédents à trois secondes. Par conséquent, le premier DoubleAnimation cesse de progresser après trois secondes, lorsqu’il a animé la largeur du rectangle cible à 60 pixels.

<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 RepeatBehavior propriété d’un Timeline contrôle combien de fois il répète sa durée simple. À l’aide de la RepeatBehavior propriété, vous pouvez spécifier le nombre de fois que la chronologie est lue (itération Count) ou la durée totale pendant laquelle elle doit être lue (une répétition Duration). Dans les deux cas, l’animation passe par autant d’exécutions de début à fin que nécessaire pour remplir le nombre ou la durée demandés. Par défaut, les chronologies ont un nombre d’itérations de 1.0, ce qui signifie qu’elles jouent une fois et ne se répètent pas du tout.

L’exemple suivant utilise la RepeatBehavior propriété pour effectuer un DoubleAnimation jeu pendant 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 faire jouer DoubleAnimation pendant 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 RepeatBehavior propriété d’un Timeline sur Forever, le Timeline se répète jusqu'à ce qu'il s'arrête en intervenant directement ou par le système de minutage. L’exemple suivant utilise la RepeatBehavior propriété pour rendre le DoubleAnimation jeu 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 Répéter une animation.

La propriété AutoReverse

La propriété AutoReverse spécifie si un Timeline sera joué à l'envers à la fin de chaque itération vers l'avant. L’exemple suivant définit la propriété AutoReverse d’un DoubleAnimation à true; en conséquence, il s'anime de zéro à 100, puis de 100 à zéro. Il joue pendant une durée totale de 10 secondes.

<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'un Timeline et que la propriété AutoReverse de ce Timeline est true, une seule répétition se compose d’une itération vers l’avant suivie d’une itération vers l’arrière. Le suivant exemple configure le RepeatBehavior du DoubleAnimation de l'exemple précédent à une valeur de deux Count. Par conséquent, le DoubleAnimation est lu pendant 20 secondes : vers l'avant pendant cinq secondes, vers l'arrière pendant cinq secondes, vers l'avant pendant cinq secondes à nouveau, puis vers l'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 sont inversés lorsque la chronologie du conteneur s'inverse. Pour obtenir d’autres exemples, consultez Spécifier si une chronologie est automatiquement inversée.

La propriété BeginTime

La BeginTime propriété vous permet de spécifier le démarrage d’une chronologie. 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 qu’elle commence par le parent ; toute autre valeur crée un décalage entre le début de la lecture de la chronologie parente et la lecture de la chronologie enfant. Par exemple, une heure de début de deux secondes signifie que la chronologie commence à jouer lorsque son parent a atteint une heure 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 nullde début d’une chronologie, ce qui empêche le démarrage de la chronologie. Dans WPF, vous spécifiez null à l’aide de l’extension de balisage x :Null.

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 RepeatBehavior paramètre. Si vous deviez créer une animation avec une BeginTime durée de 10 secondes et un RepeatBehavior de Forever, il y aurait un délai de 10 secondes avant que l’animation soit lancée pour la première fois, mais pas pour chaque répétition successive. Toutefois, si la chronologie parente de l'animation venait à redémarrer ou à se répéter, un délai de 10 secondes se produirait.

La BeginTime propriété est utile pour les chronologies décalées. L’exemple suivant crée un Storyboard objet enfant avec deux objets enfants DoubleAnimation . La première animation a une Duration valeur de cinq secondes, et la seconde a une Duration durée de 3 secondes. L'exemple définit le BeginTime du deuxième DoubleAnimation à 5 secondes, de sorte qu'il démarre après la fin du premier DoubleAnimation.

<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'un Timeline atteint la fin de sa durée active totale, la propriété FillBehavior spécifie s'il s'arrête ou s'il conserve sa dernière valeur. Une animation avec FillBehaviorHoldEnd maintient sa valeur de sortie : la propriété animée conserve la dernière valeur de l'animation. Une valeur de Stop entraîne que l'animation cesse d'affecter sa propriété cible après la fin de l'animation.

L’exemple suivant crée un Storyboard objet enfant avec deux objets enfants DoubleAnimation . Les deux DoubleAnimation objets animent le Width d'un Rectangle de 0 à 100. Les Rectangle éléments ont des valeurs non animées Width de 500 [pixels indépendants de l’appareil].

<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 Timeline classe fournit trois propriétés pour spécifier sa vitesse :

Voir aussi