Timeline 表示一段時間,該區段的長度由時間軸的 Duration 決定。 當 Timeline 達到其持續時間結束時,它會停止播放。 如果 Timeline 有子時間軸,它們也會停止播放。 對於動畫,Duration 指定動畫從其起始值轉換到其結束值所需的時間。
您可以指定具有特定有限時間或特殊值 Automatic 或 Forever 的 Duration。 動畫的持續時間必須一律是時間值,因為動畫必須一律具有已定義的有限長度,否則動畫將不知道如何在其目標值之間轉換。 容器時間軸 (TimelineGroup 物件) (例如 Storyboard 和 ParallelTimeline) 的預設持續時間為 Automatic,這表示它們會在最後一個子項停止播放時自動結束。
在以下範例中,Rectangle 的寬度、高度和填滿顏色均以動畫形式呈現。 持續時間會在動畫和容器時間軸上設定,以產生動畫效果,包括控制動畫的感知速度以及使用容器時間軸的持續時間覆寫子項時間軸的持續時間。
範例
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://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>