計時行為概觀
本主題描述動畫和其他 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 [裝置獨立圖元]。
第 FillBehavior 一個 DoubleAnimation 的 屬性會設定為 HoldEnd ,預設值。 因此,矩形的寬度會在結束之後 DoubleAnimation 維持在 100。
第 FillBehavior 二 DoubleAnimation 個 的 屬性會設定為 Stop 。 因此, Width 第二個 Rectangle 的 還原為結束之後 DoubleAnimation 的 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 。 大於一的值會提高 及其子 Timeline 物件的速度 Timeline ;介於零和一之間的值會讓值變慢。 一個值表示 Timeline 進度的速率與其父系相同。 SpeedRatio容器時間軸的設定也會影響其所有子 Timeline 物件。
AccelerationRatio – 指定時間軸花費加速的百分比 Duration 。 如需範例,請參閱 操作說明:動畫加速或減速。
DecelerationRatio - 指定花費遞減的時間軸百 Duration 分比。 如需範例,請參閱 操作說明:動畫加速或減速。