Como: Set a Duration for an Animation
Um Timeline representa um segmento de tempo e o comprimento daquele segmento é determinado pela Duration da linha do tempo. Quando um Timeline chega ao final de sua duração, sua execução é interrompida. Se o Timeline tiver outras linhas do tempo como suas filhas, sua execução é interrompida também. No caso de uma animação, a Duration especifica quanto tempo a animação leva para fazer a transição do seu valor inicial ao seu valor final.
Você pode especificar um Duration com um tempo finito e específico, ou os valores especiais Automatic ou Forever. A duração de uma animação deve sempre ser um valor de tempo, porque uma animação deve sempre ter um comprimento finito e definido—caso contrário, a animação não saberia como fazer a transição entre seus valores inicial e final. Linhas de tempo contêineres (objetos TimelineGroup), tais como Storyboard e ParallelTimeline, têm uma duração padrão de Automatic, o que significa que elas automaticamente terminam quando seu último filho termina de executar.
No exemplo a seguir, a largura, altura, e cor de preenchimento de um Rectangle são animadas. Durações são definidas para animações e linhas de tempo contêiner, o que resulta em efeitos de animação que incluem o controle da velocidade percebida de uma animação e a sobrescrita da duração das linhas de tempo filhas com a duração da linha de tempo contêiner.
Exemplo
<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>