共用方式為

計時行為概觀

  • 發行項

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

必要條件

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

時間軸型別

Timeline 代表時間的一個區段。 它提供的屬性可讓您指定時間片段長度、應開始的時間、重複次數、時間在該片段中的播放速度等等。

從時間軸類別繼承的類別提供額外功能，例如，動畫和媒體播放。 WPF 提供下列 Timeline 類型。

時間軸類型 描述
AnimationTimeline 產生動畫屬性輸出值之 Timeline 物件的抽象基底類別。
MediaTimeline 從媒體檔案產生輸出。
ParallelTimeline 對子 TimelineGroup 物件分組和加以控制的 Timeline 類型。
Storyboard 一種 ParallelTimeline 的類型，為其包含的時間軸物件提供目標資訊。
Timeline 定義計時行為的抽象基底類別。
TimelineGroup 可包含其他 Timeline 物件的 Timeline 物件抽象類別。

控制時間軸長度的屬性

Timeline 代表一段時間，而時間軸的長度可以用不同方式來描述。 下表定義數個描述時間軸長度的詞彙。

詞彙 描述 屬性
簡單持續時間 時間軸正向輪播一次所需的時間長度。 Duration
重複一次 時間軸正向播放一次所需的時間長度，以及 (如果 AutoReverse 屬性為 True) 反向播放一次。 Duration、AutoReverse
作用期間 時間軸完成其 RepeatBehavior 屬性指定的所有重複次數所需的時間。 Duration、AutoReverse、RepeatBehavior

Duration 屬性

如先前所述，時間軸代表一段時間。 該區段的長度由時間軸的 Duration 決定。 當時間到達其持續時間結尾時就會停止播放。 如果該時間軸有子時間軸，它們也會停止播放。 對於動畫，Duration 指定動畫從其起始值轉換到其結束值所需的時間。 時間軸的持續時間有時稱為其「簡單持續時間」 ，以區分單次輪播的持續時間，及動畫播放總時間長度 (包含重複播放)。 您可以使用有限時間值或特殊值 Automatic 或 Forever 來指定持續時間。 動畫的持續時間應解析成 TimeSpan 值，這樣它就能在值之間轉換。

以下範例顯示 DoubleAnimation，其 Duration 為五秒。

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

容器時間軸 (例如 Storyboard 和 ParallelTimeline) 的預設持續時間為 Automatic，這表示它們會在最後一個子項停止播放時自動結束。 以下範例顯示 Storyboard，其 Duration 解析為五秒，即其所有子 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 物件會在容器時間軸停止播放時停止播放。 下列範例會將上述範例中 Duration 的 Storyboard 設定為三秒。 因此，第一個 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 屬性

RepeatBehavior 的 Timeline 屬性可控制重複其簡單持續時間的次數。 使用 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" />

如果您將 RepeatBehavior 的 Timeline 屬性設定為 Forever，則 Timeline 會重複直到以互動方式或計時系統停止為止。 下列範例會使用 RepeatBehavior 屬性讓 DoubleAnimation 無限期播放。

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

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

AutoReverse 屬性

AutoReverse 屬性會指定 Timeline 是否會在每個向前反覆項目的結尾回溯播放。 下列範例會將 AutoReverse 的 DoubleAnimation 屬性設定為 true；因此，它會以動畫顯示從零到 100，然後從 100 到零。 播放時間總共 10 秒。

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

當您使用 Count 值來指定 RepeatBehavior 的 Timeline，並且該 AutoReverse 的 Timeline 屬性為 true 時，單一重複由一次向前反覆項目以及隨後的一次回溯反覆項目組成。 下列範例會將上述範例中的 RepeatBehavior 的 DoubleAnimation 設定為二的 Count。 因此，DoubleAnimation 會播放 20 秒：正向五秒，反向五秒，再正向 5 秒，然後反向五秒。

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

如果容器時間軸包含子 Timeline 物件，則容器時間軸反轉時它們也會反轉。 如需其他範例，請參閱 指定時間軸是否會自動反轉。

BeginTime 屬性

BeginTime 屬性可讓您指定時間軸何時開始。 時間軸的開始時間和其父時間軸有關。 開始使間為零表示該時間軸的父代一開始它就開始；任何其他值都會在該時間軸的父時間軸與其開始播放時間之間建立位移。 例如，開始時間為 2 秒表示該時間軸會在其父代到達 2 秒時開始播放。 根據預設，所有時間軸的開始時間都為零。 您也可以將時間軸的開始時間設定為 null，這樣會防止時間軸開始。 在 WPF 中，您可以使用 x:Null 標記延伸來指定 Null。

請注意，由於時間軸的 RepeatBehavior 設定，開始時間不會在每次重複時套用。 如果您要建立 BeginTime 為 10 秒、RepeatBehavior 為 Forever 的動畫，則在首次播放動畫之前會有 10 秒的延遲，但不是每次連續重複。 不過，如果動畫的父時間軸重新開始或重複，則 10 秒的延遲會再次出現。

BeginTime 屬性適用於交錯時間軸。 下列範例會建立具有兩個子 Storyboard 物件的 DoubleAnimation。 第一個動畫的 Duration 為五秒，第二個動畫的 Duration 為 3 秒。 此範例會將第二個 BeginTime 的 DoubleAnimation 設定為 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 物件都會以 0 到 100 的範圍對 Width 的 Rectangle 進行動畫處理。 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 類別會提供三個屬性來指定其速度：

另請參閱