通过

定时行为概述

  • 项目

本主题介绍动画和其他 Timeline 对象的计时行为。

先决条件

若要了解本主题，应熟悉基本动画功能。 有关详细信息，请参阅 动画概述。

时间线类型

Timeline 表示一个时间段。 它提供了一些属性，使你能够指定该段的长度、何时开始、重复的次数、该段的进度速度等。

从时间线类继承的类提供其他功能，例如动画和媒体播放。 WPF 提供以下 Timeline 类型。

时间线类型 描述
AnimationTimeline 用于生成动画属性输出值的 Timeline 对象的抽象基类。
MediaTimeline 从媒体文件生成输出。
ParallelTimeline 一种对子 Timeline 对象进行分组和控制的 TimelineGroup。
Storyboard 一种为其包含的时间线对象提供定位信息的 ParallelTimeline。
Timeline 定义计时行为的抽象基类。
TimelineGroup 可以包含其他 Timeline 对象的 Timeline 对象的抽象类。

控制时间线长度的属性

Timeline 表示时间段，时间线的长度可以通过不同的方式进行描述。 下表定义了用于描述时间线长度的多个术语。

术语 描述 性能
简单持续时间 时间线进行单个向前迭代所需的时间长度。 Duration
一次重复 时间线正向播放一次所需的时间长度，如果 AutoReverse 属性为 true，则为反向播放一次的时间长度。 Duration，AutoReverse
活动时段 时间线完成其 RepeatBehavior 属性指定的所有重复所花费的时间长度。 Duration、AutoReverse、RepeatBehavior

Duration 属性

如前所述，时间线表示时间段。 该段的长度由时间线 Duration确定。 当时间线达到其时长的终点时，它将停止播放。 如果时间线具有子时间线，这些子时间线也会停止播放。 对于动画，Duration 指定动画从其起始值过渡到其结束值所需的时间。 时间线的持续时间有时称为其 简单时长，以区分单个迭代的持续时间和动画播放的总时长，包括重复。 可以使用有限的时间值或特殊值来指定持续时间，Automatic 或 Forever。 动画的持续时间应解析为 TimeSpan 值，以便它可以在值之间切换。

以下示例显示了一个 Duration 为 5 秒的 DoubleAnimation。

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5"  />

容器时间线（例如 Storyboard 和 ParallelTimeline）的默认持续时间为 Automatic，这意味着它们会在最后的子时间线停止播放时自动结束。 以下示例显示了一个 Storyboard，其 Duration 解析为 5 秒，即完成所有子 DoubleAnimation 对象所用的时间长度。

<Storyboard >

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5"  />

  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  />

</Storyboard>

通过将容器时间线的 Duration 设置为 TimeSpan 值，可以强制播放时间长于或短于其子 Timeline 对象播放的时间。 如果将 Duration 设置为小于容器时间线子 Timeline 对象长度的值，则当容器时间线停止时，子 Timeline 对象也停止播放。 以下示例将前面示例中的 Storyboard 的 Duration 设置为 3 秒。 因此，三秒后，在第一个 DoubleAnimation 将目标矩形宽度动画处理为 60 时便会停止播放。

<Storyboard Duration="0:0:3">

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5"  />

  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  />

</Storyboard>

RepeatBehavior 属性

Timeline 的 RepeatBehavior 属性控制它重复其简单持续时间的次数。 使用 RepeatBehavior 属性，可以指定时间线播放次数（迭代 Count）或它应播放的总时间长度（重复 Duration）。 无论是哪一种情况，动画都将从头到尾运行很多次，直到完成要求的次数或经历完所需的一段时间。 默认情况下，时间线的循环次数为 1.0，即时间线播放一次，根本不进行重复。

以下示例使用 RepeatBehavior 属性，通过指定迭代计数，使 DoubleAnimation 播放的持续时间变为其简单持续时间的两倍。

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2x" />

下一个示例使用 RepeatBehavior 属性使 DoubleAnimation 播放其简单持续时间的一半时间。

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="0.5x" />

如果将 Timeline 的 RepeatBehavior 属性设置为 Forever，则 Timeline 会重复，直到以交互方式或被计时系统停止。 以下示例使用 RepeatBehavior 属性使 DoubleAnimation 无限期播放。

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="Forever" />

有关其他示例，请参阅重复动画。

AutoReverse 属性

AutoReverse 属性指定 Timeline 是否将在每次正向循环结束时反向播放。 以下示例将 DoubleAnimation 的 AutoReverse 属性设置为 true，因此，它的动画从 0 到 100，然后从 100 到 0。 它的总播放时长为 10 秒。

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  AutoReverse="True" />

当使用 Count 值指定 Timeline 的 RepeatBehavior 并且该 Timeline 的 AutoReverse 属性为 true 时，单次重复由一次正向循环和一次反向循环组成。 以下示例将前面示例中的 DoubleAnimation 的 RepeatBehavior 设置为 2 个 Count。 因此，DoubleAnimation 播放 20 秒：正向播放 5 秒，反向播放 5 秒，再正向播放 5 秒，然后再反向播放 5 秒。

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2" 
  AutoReverse="True" />

如果容器时间线具有子 Timeline 对象，当容器时间线反转时，它们也会反转。 有关其他示例，请参阅指定时间线是否自动反转。

BeginTime 属性

使用 BeginTime 属性可以指定时间线何时开始。 时间线的开始时间相对于其父时间线。 如果开始时间为零秒，则表示其父时间线开始后，该时间线立即开始；如果开始时间为其他值，会在父时间线和子时间线的开始播放时间之间产生时间偏差。 例如，如果开始时间为两秒，则表示在其父时间线到达两秒后，该时间线才开始播放。 默认情况下，所有时间线的开始时间都为零秒。 还可以将时间线的开始时间设置为 null，从而阻止时间线开始。 在 WPF 中，可以使用 x:Null 标记扩展指定 NULL。

请注意，由于其 RepeatBehavior 设置，每次时间轴重复时都不会应用开始时间。 如果要创建一个 BeginTime 为 10 秒且 RepeatBehavior 为 Forever的动画，动画首次播放前会有 10 秒的延迟，但后续的重复播放不会再有延迟。 但是，如果动画的父时间线重新启动或重复，则会发生 10 秒的延迟。

BeginTime 属性对于交错时间线很有用。 以下示例创建一个具有两个子 DoubleAnimation 对象的 Storyboard。 第一个动画的 Duration 为 5 秒，第二个动画的 Duration 为 3 秒。 该示例将第二个 DoubleAnimation 的 BeginTime 设置为 5 秒，以便在第一个 DoubleAnimation 结束后开始播放。

<Storyboard>

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5" 
    BeginTime="0:0:0" />


  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  
    BeginTime="0:0:5" />

</Storyboard>

FillBehavior 属性

当 Timeline 到达其总活动持续时间的末尾时，FillBehavior 属性指定是停止还是保留其最后一个值。 FillBehavior 为 HoldEnd 的动画“保留”其输出值：经动画处理的属性保留动画的最后一个值。 Stop 值会导致动画在结束后停止影响其目标属性。

以下示例创建一个 Storyboard 对象，并且它具有两个子 DoubleAnimation 对象。 两个 DoubleAnimation 对象都将 Rectangle 的 Width 动画处理为从 0 到 100。 Rectangle 元素的非动画 Width 值为 500 [与设备无关的像素]。

<Rectangle Name="MyRectangle" 
 Width="500" Height="100"
 Opacity="1" Fill="Red">
</Rectangle>

<Rectangle Name="MyOtherRectangle" 
 Width="500" Height="100"
 Opacity="1" Fill="Orange">
</Rectangle>

<Button Content="Start FillBehavior Example">
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation 
            Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
            From="0" To="100" Duration="0:0:5" 
            FillBehavior="HoldEnd" />
          <DoubleAnimation 
            Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
            From="0" To="100" Duration="0:0:5"  
            FillBehavior="Stop" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

控制时间线速度的属性

Timeline 类提供三个属性来指定其速度：

另请参阅