Comment : définir une durée pour une animation
Un Timeline représente un segment de temps dont la longueur est déterminée par le Duration de la chronologie. Lorsqu'un Timeline atteint la fin de sa durée, il arrête de jouer. Si le Timeline contient des chronologies enfants, celles-ci cessent également de jouer. Dans le cas d'une animation, le Duration indique le temps que prend une animation pour passer de sa valeur initiale à sa valeur finale.
Vous pouvez spécifier un Duration avec une durée finie spécifique ou les valeurs spéciales Automatic ou Forever. La durée d'une animation doit toujours être une valeur de temps, car une animation doit toujours avoir une longueur finie spécifique. À défaut, l'animation ne sait pas comment effectuer la transition entre ses valeurs cibles. Les chronologies de conteneur (objets TimelineGroup), comme 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.
Dans l'exemple suivant, la largeur, la hauteur et la couleur de remplissage d'un Rectangle sont animées. Les durées sont définies dans des chronologies d'animation et de conteneur qui entraînent des effets d'animation, notamment le contrôle de la vitesse perçue d'une animation et la substitution de la durée des chronologies enfants par la durée d'une chronologie de conteneur.
Exemple
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel Margin="20">
<Rectangle Width="100" Height="100" Name="myRectangle">
<Rectangle.Fill>
<SolidColorBrush x:Name="MyAnimatedBrush" Color="Black" />
</Rectangle.Fill>
<Rectangle.Triggers>
<!-- Animates the rectangle fill to yellow and width to 300. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<!-- By default, TimelineGroup objects like Storyboard and ParallelTimeline have
a Duration of "Automatic". A TimelineGroup's automatic duration encompasses its
last-ending child. In this example, there is only one child of the Storyboard, the
ParallelTimeline, so when the ParallelTimeline ends, the Storyboard duration will
automatically end. -->
<Storyboard>
<!-- This ParallelTimeline has overriden its default duration of "Automatic" with
a finite duration of half a second. This will force this Timeline to end after half a
second even though its child Timelines have a longer duration (2 and 4 seconds respectively).
This cuts off the animation prematurely and the rectangle's fill will not go all the way to
yellow nor will the rectangle width get all the way to 300. Again, the default duration of a
ParallelTimeline is "Automatic" so if you remove the finite duration, the ParallelTimeline
will wait for its child timelines to end before it ends. -->
<!-- Note: To specify a finite time in XAML, use the syntax of "days:hours:seconds". As mentioned,
this ParallelTimeline has a duration of half a second. -->
<ParallelTimeline Duration="0:0:0.5">
<!-- For Animation Timelines like DoubleAnimation, the duration is one factor that
determines the rate at which an animation appears to progress. For example, the DoubleAnimation
below that animates the rectangle height will complete in only one second while the animation
that animates the width willwill complete in 2 seconds which is relatively fast compared to the DoubleAnimation
which animates the rectangle width over 4 seconds. -->
<DoubleAnimation
Storyboard.TargetName="myRectangle"
Storyboard.TargetProperty="Height"
To="300" Duration="0:0:1" />
<DoubleAnimation
Storyboard.TargetName="myRectangle"
Storyboard.TargetProperty="Width"
To="300" Duration="0:0:4" />
<ColorAnimation
Storyboard.TargetName="MyAnimatedBrush"
Storyboard.TargetProperty="Color"
To="Yellow" Duration="0:0:2" />
</ParallelTimeline>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</StackPanel>
</Page>