計時行為概觀

  • 發行項

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

必要條件

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

時間軸型別

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

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

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

控制時間軸長度的屬性

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

詞彙 描述 屬性
簡單持續時間 時間軸正向輪播一次所需的時間長度。 Duration
重複一次 時間軸向前播放一次所花費的時間長度，如果 AutoReverse 屬性為 true，則會回溯播放一次。 Duration, AutoReverse
作用期間 時間軸完成其 RepeatBehavior 屬性所指定之所有重複所需的時間長度。 Duration, AutoReverse, RepeatBehavior

Duration 屬性

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

下列範例示範 DoubleAnimation 的 ，其為 Duration 5 秒。

<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 為三秒。 因此，第一個 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 的 true 屬性 DoubleAnimation ;因此，它會以動畫顯示從零到 100，然後從 100 到零。 播放時間總共 10 秒。

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

當您使用 Count 值來指定 TimelineRepeatBehavior 的 和 AutoReverse 屬性 Timeline 時 true ，單一重複是由一個向前反覆運算所組成，後面接著一個向後反復專案。 下列範例會將 上述範例的 將 的 設定 RepeatBehaviorDoubleAnimation 為 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 可讓您指定時間軸何時開始。 時間軸的開始時間和其父時間軸有關。 開始使間為零表示該時間軸的父代一開始它就開始；任何其他值都會在該時間軸的父時間軸與其開始播放時間之間建立位移。 例如，開始時間為 2 秒表示該時間軸會在其父代到達 2 秒時開始播放。 根據預設，所有時間軸的開始時間都為零。 您也可以將時間軸的開始時間設定為 null，這樣會防止時間軸開始。 在 WPF 中，您可以使用 x：Null 標記延伸 來指定 Null 。

請注意，每次時間軸重複時，不會套用開始時間， RepeatBehavior 因為它的設定。 如果您建立的動畫具有 BeginTime 10 秒和 的 RepeatBehaviorForever ，則動畫第一次播放之前會有 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 屬性會指定它是否停止或保留其最後一個值。 具有 FillBehaviorHoldEnd 「保留」其輸出值的動畫：動畫的 屬性會保留動畫的最後一個值。 值 Stop 會導致動畫在結束之後停止影響其目標屬性。

下列範例會建立具有兩個 Storyboard 子 DoubleAnimation 物件的 。 這兩 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 提供三個屬性來指定其速度：

另請參閱