Gewusst wie: Festlegen der Dauer einer Animation
Aktualisiert: November 2007
Eine Timeline stellt einen Zeitabschnitt dar, und die Länge dieses Abschnitts wird durch die Duration der Zeitachse angegeben. Wenn eine Timeline das Ende ihrer Dauer erreicht, wird ihre Wiedergabe beendet. Wenn die Timeline über untergeordnete Zeitachsen verfügt, wird deren Wiedergabe ebenfalls beendet. Bei einer Animation gibt die Duration an, wie viel Zeit die Animation für den Übergang vom Startwert zum Endwert benötigt.
Sie können entweder eine Duration mit einem bestimmten, endlichen Zeitwert oder die speziellen Werte Automatic bzw. Forever angeben. Die Dauer einer Animation muss immer ein Zeitwert sein, da eine Animation immer über eine definierte, endliche Länge verfügen muss. Andernfalls wüsste die Animation nicht, wie der Übergang zwischen den Zielwerten erfolgen soll. Containerzeitachsen (TimelineGroup-Objekte) wie Storyboard und ParallelTimeline verfügen standardmäßig über die Dauer Automatic. Das heißt, sie enden automatisch, sobald die Wiedergabe ihres letzten untergeordneten Elements beendet ist.
Im folgenden Beispiel sind Breite, Höhe und Füllfarbe von einem Rectangle animiert. Die Dauer wird für Animations- und Containerzeitachsen festgelegt, wodurch sich Animationseffekte wie die Steuerung der wahrgenommenen Geschwindigkeit einer Animation oder das Überschreiben der Dauer untergeordneter Zeitachsen mit der Dauer einer Containerzeitachse ergeben.
Beispiel
<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>