Comment : répéter une animation

Cet exemple montre comment utiliser la propriété RepeatBehavior d'un Timeline pour contrôler le comportement de répétition d'une animation.

Exemple

La propriété RepeatBehavior d'un Timeline contrôle le nombre de fois qu'une animation répète sa durée simple. En utilisant RepeatBehavior, vous pouvez spécifier qu'un Timeline soit répété un certain nombre de fois (nombre d'itérations) ou pendant une période spécifiée. Dans les deux cas, l'animation est répétée du début à la fin, autant de fois qu'il le faut pour répondre à la durée ou au nombre demandé.

Par défaut, le facteur de répétition des chronologies est 1.0, ce qui signifie qu'elles ne sont exécutées qu'une seule fois. Toutefois, si vous affectez à la propriété RepeatBehavior d'un Timeline la valeur Forever, la chronologie se répète indéfiniment.

L'exemple suivant montre comment utiliser la propriété RepeatBehavior pour contrôler le comportement de répétition d'une animation. L'exemple anime la propriété Width de cinq rectangles, chacun utilisant un type de comportement de répétition différent.

<!-- RepeatBehaviorExample.xaml
     This example shows how to use the RepeatBehavior property to make a timeline repeat. -->
<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="RepeatBehavior Example">

  <Border HorizontalAlignment="Stretch">
    <StackPanel Margin="20">

      <!-- Create several rectangles to animate. -->
      <Rectangle Name="ForeverRepeatingRectangle" 
        Fill="Orange" Width="50" Height="20" />
      <Rectangle Name="FourSecondsRepeatingRectangle" 
        Fill="Orange" Width="50" Height="20" />
      <Rectangle Name="TwiceRepeatingRectangle" 
        Fill="Orange" Width="50" Height="20" />
      <Rectangle Name="HalfRepeatingRectangle" 
        Fill="Orange" Width="50" Height="20" />
      <Rectangle Name="OneSecondRepeatingRectangle" 
        Fill="Orange" Width="50" Height="20" />


      <!-- Create buttons to restart and stop the animations. -->
      <StackPanel Orientation="Horizontal" Margin="0,20,0,0">
        <Button Name="restartButton">Start Animations</Button>
        <Button Name="stopButton" Background="#669900FF">Stop</Button>

        <StackPanel.Triggers>
          <EventTrigger SourceName="restartButton" RoutedEvent="Button.Click">
            <BeginStoryboard Name="myBeginStoryboard">
              <Storyboard>

                <!-- Create an animation that repeats indefinitely. -->
                <DoubleAnimation 
                  Storyboard.TargetName="ForeverRepeatingRectangle" 
                  Storyboard.TargetProperty="Width" 
                  From="50" To="300" Duration="0:0:2" RepeatBehavior="Forever" />

                <!-- Create an animation that repeats for four seconds. As a result, the
                     animation repeats twice. -->          
                <DoubleAnimation 
                  Storyboard.TargetName="FourSecondsRepeatingRectangle" 
                  Storyboard.TargetProperty="Width"
                  From="50" To="300" Duration="0:0:2" RepeatBehavior="0:0:4" />

                <!-- Create an animation that repeats twice. -->
                <DoubleAnimation 
                  Storyboard.TargetName="TwiceRepeatingRectangle" 
                  Storyboard.TargetProperty="Width" 
                  From="50" To="300" Duration="0:0:2" RepeatBehavior="2x" />     

                <!-- Create an animation that repeats 0.5 times. The resulting animation
                     plays for one second, half of its Duration. It animates from 50 to 150. -->
                <DoubleAnimation 
                  Storyboard.TargetName="HalfRepeatingRectangle" 
                  Storyboard.TargetProperty="Width" 
                  From="50" To="300" Duration="0:0:2" RepeatBehavior="0.5x" />

                <!-- Create an animation that repeats for one second. The resulting animation
                     plays for one second, half of its Duration. It animates from 50 to 150. -->
                <DoubleAnimation 
                  Storyboard.TargetName="OneSecondRepeatingRectangle" 
                  Storyboard.TargetProperty="Width" 
                  From="50" To="300" Duration="0:0:2" RepeatBehavior="0:0:1" />          
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>        
          <EventTrigger SourceName="stopButton" RoutedEvent="Button.Click">
            <StopStoryboard BeginStoryboardName="myBeginStoryboard" />
          </EventTrigger>
        </StackPanel.Triggers>
      </StackPanel>
    </StackPanel>
  </Border>
</Page>

Pour l'exemple complet, consultez Comportement de minutage d'une animation, exemple.

Voir aussi

Tâches

Comment : accumuler des valeurs d'animation pendant des cycles de répétition

Comment : spécifier l'inversion automatique ou non d'une chronologie

Concepts

Vue d'ensemble de l'animation

Autres ressources

Rubriques "Comment" relatives à l'animation et au minutage

Animation et minutage

Comportement de minutage d'une animation, exemple (page éventuellement en anglais)