Comment : répéter une animation
Mise à jour : novembre 2007
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
Comportement de minutage d'une animation, exemple