計時行為概觀

更新：2007 年 11 月

本主題說明動畫和其他 Timeline 物件的計時行為。

必要條件

若要了解本主題，您應該熟悉基本動畫功能。如需詳細資訊，請參閱動畫概觀。

時刻表型別

Timeline 代表一個時間區段。它提供的屬性可以讓您指定區段的長度、開始時間、要重複的次數、區段的時間進行速度等等。

繼承自時刻表類別的類別還可以提供額外的功能，如動畫和媒體播放。WPF 提供下列 Timeline 型別。

控制時刻表長度的屬性

Timeline 代表一個時間區段，而時刻表的長度有不同描述方式。下表定義數個描述時刻表長度的詞彙。

Duration 屬性

之前已說明過，時刻表代表時間區段。區段長度是由時刻表的 Duration 決定。當時刻表過了持續期間後，就會停止播放。如果時刻表有子系時刻表，子系時刻表也會停止播放。動畫的 Duration 會指定動畫從開始值轉換到結束值要用多少時間。時刻表的持續期間有時又稱為「簡單持續期間」，用以區別單一反覆項目的持續期間和整個動畫 (包括重複) 播放的時間長度。您可以將持續期間指定為有限時間值或是特殊值 (Automatic 或 Forever)。動畫的持續期間應解析為 TimeSpan 值，以便在值之間轉換。

下列範例顯示的 DoubleAnimation 具有 5 秒的 Duration。

<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 會在 3 秒後停止，屆時目標矩形的寛度會是 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" />

如需其他範例，請參閱 HOW TO：重複動畫。

AutoReverse 屬性

AutoReverse 屬性指定 Timeline 是否要在每次順向反覆項目結束時反向播放。下列範例會將 DoubleAnimation 的 AutoReverse 屬性設為 true，結果是動畫會從零播到 100，再從 100 播到零。總共播放 10 秒。

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

當您將 Timeline 的 RepeatBehavior 指定為 Count 值，且這個 Timeline 的 AutoReverse 屬性值為 true，一次重複就會包括一個順向反覆項目再接上一個反向反覆項目。下列範例會將上一個範例中 DoubleAnimation 的 RepeatBehavior 的 Count 設為 2。結果是 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 物件，這些子物件會在時刻表反轉時也跟著反轉。如需其他範例，請參閱 HOW TO：指定時刻表是否會自動反轉。

BeginTime 屬性

BeginTime 屬性可以指定時刻表何時開始。時刻表的開始時間與它的父時刻表有關。開始時間為零秒表示時刻表和它的父時刻表同時開始，其他值則表示父時刻表開始播放及子系時刻表開始播放之間有一段間隔時間。例如，開始時間 2 秒表示時刻表會在它的父時刻表播放 2 秒鐘之後才開始播放。所有時刻表的預設開始時間都是零秒。您也可以將時刻表的開始時間設為 null，這樣時刻表就不會播放。在 WPF 中要用 x:Null 標記延伸指定 null。

請注意，受到時刻表的 RepeatBehavior 設定影響，每次時刻表重複時都不會套用開始時間。如果您建立 BeginTime 為 10 秒、RepeatBehavior 為 Forever 的動畫，在動畫第一次播放前會有 10 秒的延遲，但之後的每一次重複都不會延遲。但是，當動畫的父時刻表從頭開始或重複播放時，10 秒延遲就會再度發生。

若要錯開時刻表，BeginTime 屬性會非常有用。下列範例會建立 Storyboard，它有兩個子 DoubleAnimation 物件。第一個動畫的 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 個與裝置無關的像素。

• 第一個 DoubleAnimation 的 FillBehavior 屬性設為 HoldEnd，即預設值。結果是在 DoubleAnimation 結束後，Rectangle 的 Width 仍停留在 100。

• 第二個 DoubleAnimation 的 FillBehavior 屬性設為 Stop。結果是在 DoubleAnimation 結束後，第二個 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 類別提供三個用於指定速度的屬性：

• SpeedRatio - 指定 Timeline 相對於其父代的時間進行比率。其值大於 1，Timeline 及其子 Timeline 物件的速度會加快；零到 1 的值則減慢。其值為 1，則表示 Timeline 的進行速度和其父代相同。容器時刻表的 SpeedRatio 設定也會影響它所有的子 Timeline 物件。

• AccelerationRatio - 指定 Timeline 的 Duration 進行加速的時間百分比。如需範例，請參閱 HOW TO：動畫加速或減速。

• DecelerationRatio - 指定 Timeline 的 Duration 進行減速的時間百分比。如需範例，請參閱 HOW TO：動畫加速或減速。

請參閱

工作

動畫計時行為範例

概念

動畫概觀

動畫和計時系統概觀

計時事件概觀

其他資源

動畫和計時 HOW TO 主題