計時行為概觀

  • 發行項

本主題說明動畫和其他 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 值，讓它可以在值之間轉換。

下列範例顯示 DoubleAnimationDuration 五秒的。

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

容器時間軸（例如 Storyboard 和 ParallelTimeline ）的預設持續時間 Automatic ，這表示它們會在最後一個子系停止播放時自動結束。 下列範例顯示的是 StoryboardDuration ，其解析為五秒，也就是其所有子 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 物件就會停止播放。 下列範例會將上述範例中的設定 DurationStoryboard 為三秒。 如此一來，當第三秒的動畫將目標矩形的寬度設為60時，第一次 DoubleAnimation 會停止進行。

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

如果您將的屬性 Timeline 設定 RepeatBehavior 為 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 設為的屬性 DoubleAnimationtrue ，如此一來，它會從零到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秒鐘，然後再往後五秒。

<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 設定而重複時，不會套用開始時間。 如果您要建立10秒的動畫 BeginTime 以及 RepeatBehavior 的 Forever ，則在第一次播放動畫之前會有10秒的延遲，但不會針對每個後續的重複。 不過，如果動畫的父時間軸重新開始或重複，則 10 秒的延遲會再次出現。

BeginTime屬性適用于錯開時間軸。 下列範例會建立 Storyboard 具有兩個子 DoubleAnimation 物件的。 第一個動畫的五秒，第二個 Duration 動畫 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 物件會將 a Rectangle 的從0到100的動畫 Width 。 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類別提供三個屬性來指定其速度：

另請參閱