一 Timeline 个表示时间段,该段的长度由时间线 Duration确定。 当某个 Timeline 的持续时间结束时,它将停止播放。 如果Timeline有子时间线,那么这些时间线也会停止播放。 对于动画,Duration 指定动画从其起始值过渡到其结束值所需的时间。
可以指定Duration具有特定的有限时间,也可以使用特殊值Automatic或Forever。 动画的持续时间必须始终是时间值,因为动画必须始终具有定义的有限长度,否则动画将不知道如何在目标值之间切换。 容器时间线(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>