如何:设置动画的持续时间

Timeline 表示时间段,该时间段的长度由时间线的 Duration 确定。 当 Timeline 达到其持续时间的终点时,就会停止播放。 如果该 Timeline 具有子时间线,那么这些子时间线也会停止播放。 当播放的是动画时,Duration 指定了动画从其起始值转换为结束值所花费的时间。

您可以使用特定有限时间值或特殊值(AutomaticForever)指定 Duration。 动画的持续时间必须始终为时间值,因为动画必须始终有一个已定义的有限长度,否则动画不知道如何在其目标值之间转换。 容器时间线(TimelineGroup 对象,例如 StoryboardParallelTimeline)的默认持续时间为 Automatic,这意味着当其最后的子时间线停止播放后,它们将自动结束。

下面的示例演示如何对 Rectangle 的宽度、高度和填充色进行动画处理。 持续时间是在动画和产生动画效果容器时间线上设置的,包括控制动画的感觉速度和用容器时间线持续时间重写子时间线持续时间。

示例

<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>

请参见

参考

Duration

概念

动画概述