通过

计时行为概述

  • 项目

本主题介绍动画和其他 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 会导致动画在结束后停止影响其目标属性。

以下示例创建一个具有两个子 DoubleAnimation 对象的 Storyboard。 两个 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 类提供了三个属性来指定其速度：

另请参阅