如何：設定動畫的持續時間

  • 發行項

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>

另請參閱