Cómo: Definir una duración para una animación
Un objeto Timeline representa un segmento de tiempo cuya longitud viene determinada por el objeto Duration de la escala de tiempo. Cuando una escala de tiempo (Timeline) llega al fin de su duración, su reproducción se detiene. Si Timeline tiene escalas de tiempo secundarias, también se detiene su reproducción. En el caso de una animación, Duration especifica cuánto tiempo tarda la animación en efectuar la transición desde su valor inicial hasta su valor final.
Puede especificar Duration con un tiempo concreto y finito o utilizar los valores especiales de Automatic o Forever. La duración de una animación siempre debe ser un valor de tiempo, porque una animación siempre debe tener una duración finita y definida; de lo contrario, no sabría cómo realizar la transición entre sus valores de destino. Las escalas de tiempo contenedoras (objetos TimelineGroup), como Storyboard y ParallelTimeline, tienen una duración predeterminada de Automatic, lo que quiere decir que finalizan automáticamente cuando se detiene la reproducción de la última escala de tiempo secundaria.
En el ejemplo siguiente, se animan el ancho, alto y color de relleno de Rectangle. Las duraciones se establecen mediante escalas de tiempo de animación y contenedoras; esto da lugar a que los efectos de animación incluyan el control de la velocidad percibida de una animación y a que invaliden la duración de las escalas de tiempo secundarias con la duración de una escala de tiempo contenedora.
Ejemplo
<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>