Imports System.Windows.Media.Animation
Class MainWindow
Private myStoryboard As Storyboard
Public Sub New()
InitializeComponent()
Dim myPanel As New StackPanel()
myPanel.Margin = New Thickness(10)
Dim myRectangle As New Rectangle()
myRectangle.Name = "myRectangle"
Me.RegisterName(myRectangle.Name, myRectangle)
myRectangle.Width = 100
myRectangle.Height = 100
myRectangle.Fill = Brushes.Blue
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
myDoubleAnimation.AutoReverse = True
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever
myStoryboard = New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)
Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))
' Use the Loaded event to start the Storyboard.
AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded
myPanel.Children.Add(myRectangle)
Me.Content = myPanel
End Sub
Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
myStoryboard.Begin(Me)
End Sub
End Class
由於動畫會產生屬性值,因此不同的屬性類型有不同的動畫類型。 若要以動畫顯示採用 Double 的屬性,例如 Width 專案的 屬性,請使用產生 Double 值的動畫。 若要以動畫顯示採用 Point 的屬性,請使用產生 Point 值的動畫,依此類錯。 由於不同屬性類型的數目,命名空間中有 System.Windows.Media.Animation 數個動畫類別。 幸運的是,它們會遵循嚴格的命名慣例方便您區分︰
<類型>動畫
稱為 "From/To/By" 或「基本」動畫,這些會以動畫顯示開始值到目的地值,或將位移值新增至其開始值。
若要指定開始值,請設定動畫的 From 屬性。
若要指定結束值,請設定動畫的 To 屬性。
若要指定位移值,請設定動畫的 By 屬性。
本概觀中的範例會使用這些動畫,因為最容易使用。 From/To/By 動畫會在 From/To/By Animations Overview 中詳細說明 From/To/By 動畫。
<類型>AnimationUsingKeyFrames
主要畫面格動畫比 From/To/By 動畫更強大,因為您可以指定任意數目的目標值,甚至可以控制其插補方法。 某些類型只能使用主要畫面格動畫顯示動畫。 主要畫面格動畫會在 主要畫面格動畫概觀中詳細說明。
<類型>AnimationUsingPath
路徑動畫可讓您使用幾何路徑以產生動畫的值。
<類型>AnimationBase
抽象類別,當您實作它時,會以動畫顯示 <Type> 值。 這個類別可作為Type> Animation 和 <Type> AnimationUsingKeyFrames 類別的基類 < 。 只有當您想要建立您自己的自訂動畫時,才需要直接處理這些類別。 否則,請使用 <類型> 動畫或 KeyFrame <類型> 動畫。
在大部分情況下,您會想要使用 <類型> 動畫類別,例如 DoubleAnimation 和 ColorAnimation 。
下表顯示數個常見的動畫類型和搭配使用的某些屬性。
對應的基本 (From/To/By) 動畫
對應的主要畫面格動畫
對應的路徑動畫
DoubleAnimationUsingKeyFrames
DoubleAnimationUsingPath
以動畫顯示 WidthDockPanel 的 或 HeightButton 的 。
Point
PointAnimation
PointAnimationUsingKeyFrames
PointAnimationUsingPath
以動畫顯示 Center 的位置 EllipseGeometry 。
String
StringAnimationUsingKeyFrames
以動畫顯示 TextTextBlock 的 或 ContentButton 的 。
動畫是時間軸
所有動畫類型都繼承自 Timeline 類別;因此,所有動畫都是特殊類型的時間軸。 Timeline定義時間區段。 您可以指定時間軸的 計時行為 :其 Duration 、重複的次數,甚至是時間的進度速度。
因為動畫是 Timeline ,所以它也會代表時間區段。 動畫也會計算輸出值,因為它在經過指定的時間區段 (或 Duration) 。 隨著動畫進行 (或「播放」),動畫會更新相關聯的屬性。
三個常用的計時屬性為 Duration 、 AutoReverse 和 RepeatBehavior 。
Duration 屬性
如先前所述,時間軸代表一段時間。 該線段的長度取決於 Duration 時間軸的 ,通常是使用 TimeSpan 值來指定。 當時間軸到達其持續時間結尾時,就是已經完成反覆項目。
動畫會使用其 Duration 屬性來判斷其目前的值。 如果您未指定 Duration 動畫的值,它會使用 1 秒,這是預設值。
下列語法顯示已簡化版本的 Extensible Application Markup Language (XAML) 屬性語法 Duration 。
小時:
分鐘:
秒
下表顯示數個 Duration 設定及其產生的值。
在程式碼中指定 Duration 的其中一種方式是使用 FromSeconds 方法來建立 TimeSpan ,然後使用該 TimeSpan 宣告新的 Duration 結構。
如需值和完整 Extensible Application Markup Language (XAML) 語法的詳細資訊 Duration ,請參閱 Duration 結構。
AutoReverse
屬性 AutoReverse 會指定時間軸在到達其 Duration 結尾之後是否回溯播放。 如果您將此動畫屬性設定為 true
,則動畫在到達其 Duration 結尾之後反轉,從結束值播放回其起始值。 根據預設,此屬性為 false
。
RepeatBehavior
屬性 RepeatBehavior 會指定時間軸播放的次數。 根據預設,時間軸的反復專案計數為 1.0
,這表示它們會播放一次且完全不重複。
如需這些屬性和其他屬性的詳細資訊,請參閱 計時行為概觀。
對屬性套用動畫
前幾節說明不同類型的動畫及其計時屬性。 本節說明如何對您想要以動畫顯示的屬性套用動畫。 Storyboard 物件提供一種方式,將動畫套用至屬性。 Storyboard是一種容器時間軸,可提供其包含之動畫的目標資訊。
以物件和屬性為目標
類別 Storyboard 提供 TargetName 和 TargetProperty 附加屬性。 您對動畫設定這些屬性,就可以告訴動畫要以動畫顯示的內容。 不過,在以物件為目標顯示動畫之前,物件通常必須要有名稱。
將名稱指派給 FrameworkElement 不同于將名稱指派給 Freezable 物件。 大部分的控制項和面板是架構元素。不過,大部分純圖形物件 (例如筆刷、轉換和幾何) 則是 Freezable 物件。 如果您不確定類型是 FrameworkElement 或 Freezable ,請參閱其參考檔的 繼承階層 一節。
若要建立 FrameworkElement 動畫目標,您可以藉由設定其 屬性來為它 Name 命名。 在程式碼中 RegisterName ,您也必須使用 方法來向其所屬的頁面註冊專案名稱。
若要讓 Freezable 物件成為 XAML 中的動畫目標,您可以使用 x:Name 指示詞 來指派名稱。 在程式碼中 RegisterName ,您只需使用 方法來向其所屬的頁面註冊物件。
下列各節提供在 XAML 和程式碼中命名元素的範例。 如需命名和目標的詳細資訊,請參閱 分鏡腳本概觀。
套用和啟動分鏡腳本
若要在 XAML 中啟動分鏡腳本,請將它與 EventTrigger 建立關聯。 EventTrigger是物件,描述發生指定事件時要採取的動作。 其中一個動作可以是用來 BeginStoryboard 啟動腳本的動作。 事件觸發程序在概念上類似事件處理常式,因為兩者都可讓您指定您的應用程式要如何回應特定事件。 不同于事件處理常式,事件觸發程式可以在 XAML 中完整描述;不需要其他程式碼。
若要在程式碼中啟動 Storyboard ,您可以使用 EventTrigger 或 類別 Begin 的 Storyboard 方法。
以互動方式控制分鏡腳本
上一個範例示範如何在事件發生時啟動 Storyboard 。 您也可以在啟動後以互動方式控制 Storyboard :您可以暫停、繼續、停止、將它前進到其填滿期間、搜尋和移除 Storyboard 。 如需詳細資訊和示範如何以互動方式控制 的 Storyboard 範例,請參閱 分鏡腳本概觀。
動畫結束後,會發生什麼事?
屬性 FillBehavior 會指定時間軸結束時的行為方式。 根據預設,時間軸會在結束時開始 Filling 。 保存其最終輸出值的動畫 Filling 。
DoubleAnimation上一個範例中的 不會結束, RepeatBehavior 因為它的 屬性設定為 Forever 。 下列範例使用類似的動畫,以動畫顯示矩形。 不同于先前的範例, RepeatBehavior 此動畫的 和 AutoReverse 屬性會保留為預設值。 因此,動畫在五秒內從 1 開始進行到 0,然後停止。
<Rectangle
Name="MyRectangle"
Width="100"
Height="100"
Fill="Blue">
<Rectangle.Triggers>
<!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0" Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
因為其 FillBehavior 並未從預設值變更,也就是 HoldEnd ,所以動畫會在結束時保留其最終值 0。 因此,在動畫結束之後, Opacity 矩形的 會維持在 0。 如果您將矩形的 設定 Opacity 為另一個值,則程式碼似乎沒有任何作用,因為動畫仍然會影響 Opacity 屬性。
在程式碼中重新取得動畫屬性控制權的其中一種方式,就是使用 BeginAnimation 方法,並為 參數指定 null AnimationTimeline 。 如需詳細資訊和範例,請參閱 使用分鏡腳本設定屬性之後設定屬性。
請注意,雖然設定具有 Active 或 Filling 動畫的屬性值似乎沒有任何作用,但屬性值會變更。 如需詳細資訊,請參閱 動畫和計時系統概觀。
資料繫結和建立動畫
大部分的動畫屬性可以是資料系結或動畫;例如,您可以讓 Duration 的 DoubleAnimation 屬性產生動畫效果。 不過,由於計時系統的運作方式,資料繫結或動畫顯示的動畫不像其他資料繫結或動畫物件。 若要了解其行為,了解對屬性套用動畫的意義會很有幫助。
請參閱上一節中的範例,其中顯示如何以動畫顯示 Opacity 矩形的 。 載入上一個範例中的矩形時,其事件觸發程式會 Storyboard 套用 。 計時系統會建立 的 Storyboard 複本及其動畫。 這些複本會凍結 (建立唯讀) ,並從 Clock 中建立物件。 這些時鐘會執行以動畫顯示目標屬性的實際工作。
計時系統會建立 的時鐘 DoubleAnimation ,並將它套用至 和 所 TargetName 指定的物件和 TargetPropertyDoubleAnimation 屬性。 在此情況下,計時系統會將時鐘套用至 Opacity 名為 「MyRectangle」 之物件的 屬性。
雖然 也會為 Storyboard 建立時鐘,但時鐘不會套用至任何屬性。 其用途是控制其子時鐘,這是為 建立的 DoubleAnimation 時鐘。
若要讓動畫反映出資料繫結或動畫變更,就必須重新產生動畫的時鐘。 時鐘不會自動產生。 若要讓動畫反映變更,請使用 BeginStoryboard 或 Begin 方法重新套用其分鏡腳本。 當您使用其中一種方法時,動畫會重新啟動。 在程式碼中 Seek ,您可以使用 方法將分鏡腳本移回其先前的位置。
如需資料系結動畫的範例,請參閱 主要曲線動畫範例。 如需動畫和計時系統運作方式的詳細資訊,請參閱 動畫和計時系統概觀。
顯示動畫的其他方式
本概觀中的範例示範如何使用分鏡腳本顯示動畫。 當您使用程式碼時,可以使用其他幾種方式顯示動畫。 如需詳細資訊,請參閱 屬性動畫技術概觀。
下列範例可以幫助您開始將動畫加入至您的應用程式。
From、To 和 By 動畫目標值範例
示範不同 From/To/By 設定。
動畫計時行為範例
示範您可以控制動畫計時行為的不同方式。 此範例也示範如何資料繫結動畫的目的地值。