腳本動畫

分鏡動畫不僅僅是視覺意義上的動畫。 腳本動畫是一種將依賴屬性的值變更為時間函數的方法。 您可能需要非來自動畫庫的分鏡動畫的主要原因之一是定義控制項的視覺狀態，作為控制項範本或頁面定義的一部分。

與 Silverlight 和 WPF 的區別

如果您熟悉 Microsoft Silverlight 或 Windows Presentation Foundation (WPF)，請閱讀本節；否則，您可以跳過它。

一般來說，在 Windows 運行時應用程式中建立分鏡動畫就像 Silverlight 或 WPF。 但有一些重要的區別：

• 分鏡動畫並不是 UI 視覺動畫的唯一方法，也不一定是應用程式開發人員這樣做的最簡單方法。 與其使用分鏡腳本動畫，通常是使用主題動畫和轉換動畫的較佳設計作法。 這些可以快速建立建議的 UI 動畫，而無需陷入動畫屬性定位的複雜性。 如需詳細資訊，請參閱 Animations 概觀。
• 在 Windows 運行時中，許多 XAML 控制項都包含主題動畫和過渡動畫作為其內建行為的一部分。 在大多數情況下，WPF 和 Silverlight 控制項沒有預設的動畫行為。
• 如果動畫系統確定動畫可能會導致 UI 效能不佳，則並非您建立的所有自訂動畫都可以預設在 Windows 執行時間應用程式中運作。 系統判斷可能有效能影響的動畫稱為相依動畫。 這是相依的，因為動畫的時鐘直接針對 UI 線程工作，這也是活動用戶輸入和其他更新嘗試將運行時更改應用到 UI 的地方。 在 UI 執行緒上消耗大量系統資源的依賴動畫可能會使應用程式在某些情況下顯得無響應。 如果您的動畫導致佈局更改或有可能影響 UI 執行緒的效能，您通常需要明確啟用動畫才能看到它運行。 這就是 特定動畫類別上 EnableDependentAnimation 屬性的用途。 如需詳細資訊，請參閱相依和獨立的動畫。
• Windows 運行時目前不支援自訂緩動函數。

定義分鏡腳本動畫

腳本動畫是一種將依賴屬性的值變更為時間函數的方法。 您要設定動畫的屬性並不總是直接影響應用程式 UI 的屬性。 但由於 XAML 是為應用程式定義 UI，因此通常它是您要設定動畫的與 UI 相關的屬性。 例如，您可以以動畫顯示 RotateTransform 的角度，或按鈕背景的色彩值。

定義分鏡動畫的主要原因之一是您是否是控製作者或正在重新模板化控制項，並且您正在定義視覺狀態。 如需詳細資訊，請參閱視覺狀態的分鏡腳本動畫。

無論您是為應用程式定義視覺狀態還是自訂動畫，本主題中描述的分鏡動畫的概念和 API 主要適用於其中任何一個。

若要產生動畫效果，您以分鏡腳本動畫為目標的屬性必須是相依性屬性。 相依性屬性是 Windows 執行階段 XAML 實作的主要功能。 最常見 UI 元素的可寫入屬性通常會實作為相依性屬性，讓您可以建立動畫效果、套用數據系結值，或使用 Setter 套用 Style 並將屬性設為目標。 如需相依性屬性運作的詳細資訊，請參閱相依性屬性概觀。

大部分時候，您會藉由撰寫 XAML 來定義腳本動畫。 如果您使用 Microsoft Visual Studio 之類的工具，它會為您產生 XAML。 也可以使用程式碼定義分鏡動畫，但這種情況較不常見。

讓我們看一個簡單的範例。 在此 XAML 範例中，Opacity 屬性會在特定的 Rectangle 對象上產生動畫效果。

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>

  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

識別要設定動畫的物件

在上一個範例中，分鏡腳本會以動畫顯示 Rectangle 的 Opacity 屬性。 您不會在物件本身上宣告動畫。 相反地，您會在分鏡腳本的動畫定義中執行此動作。 分鏡腳本通常會在 XAML 中定義，而不是在物件的 XAML UI 定義附近產生動畫效果。 相反地，它們通常會設定為 XAML 資源。

若要將動畫連接到目標，您可以藉由其識別程式設計名稱來參考目標。 您應該一律在 XAML UI 定義中套用 x:Name 屬性，以命名您想要產生動畫效果的物件。 然後，您可以在動畫定義中設定 Storyboard.TargetName，以物件設為動畫效果。 針對 Storyboard.TargetName 的值，您可以使用目標對象的名稱字串，也就是您稍早使用 x:Name 屬性設定的其他地方。

將相依性屬性設為動畫

您可以在動畫中設定 Storyboard.TargetProperty 的值。 這會決定目標物件的特定屬性為動畫。

有時，您需要定位的屬性不是目標物件的直接屬性，而是在物件屬性關係中嵌套得更深。 您通常需要這樣做，才能向下切入到一組參與的對象和屬性值，直到您可以參考可產生動畫效果的屬性類型 (Double、Point、Color) 這個概念稱為間接目標，而以這種方式以屬性為目標的語法稱為 屬性路徑。

以下是範例。 分鏡動畫的其中一個常見案例是變更應用程式 UI 或控制項部分的色彩，以表示控制項處於特定狀態。 假設您想要以動畫顯示 TextBlock 的 Foreground，使其從紅色變成綠色。 您預期 會牽涉到 ColorAnimation，這是正確的。 不過，影響物件色彩的 UI 元素上沒有任何屬性實際上是 Color 類型。 相反地，它們的類型為 Brush。 因此，動畫實際需要的目標是 SolidColorBrush 類別的 Color 屬性，它是 Brush 派生類型，通常用於這些與顏色相關的 UI 屬性。 以下是針對動畫屬性目標形成屬性路徑時的樣子：

<Storyboard x:Name="myStoryboard">
  <ColorAnimation
    Storyboard.TargetName="tb1"
    Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
    From="Red" To="Green"/>
</Storyboard>

以下說明如何以其部分來思考此語法：

• 每一組 () 括弧都會括住屬性名稱。
• 在屬性名稱中，有一個點，該點分隔類型名稱和屬性名稱，以便您標識的屬性是明確的。
• 中間的點 (不在括號內的點) 是一個步驟。 語法將其解釋為：取得第一個屬性 (它是一個物件) 的值，進入其物件模型，並定位第一個屬性值的特定子屬性。

以下是您可能會使用間接屬性定位的動畫定位場景列表，以及一些與您將使用的語法近似的屬性路徑字串：

• 對應用於 RenderTransform(UIElement.RenderTransform).(TranslateTransform.X) 的 TranslateTransform 的 X 值進行動畫處理：
• 在 LinearGradientBrush 的 GradientStop 內對 Color 進行動畫處理，例如應用於 Fill：(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)
• 對 TranslateTransform 的 X 值進行動畫處理，該值是應用於 RenderTransform 的 TransformGroup 中 4 個變換之一：(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)

您會注意到其中一些範例在數字周圍使用方括號。 這是索引器。 它指示其前面的屬性名稱具有一個集合作為值，並且您需要該集合中的一個項目 (由從零開始的索引標識)。

您也可以建立 XAML 附加屬性的動畫效果。 一律以括弧括住完整的附加屬性名稱，例如 (Canvas.Left)。 有關詳細資訊，請參閱動畫 XAML 附加屬性。

有關如何使用屬性路徑間接定位要製作動畫的屬性的詳細信息，請參閱屬性路徑語法或 Storyboard.TargetProperty 附加屬性。

動畫類型

Windows 運行時動畫系統具有故事板動畫可套用的三種特定類型：

• Double，可以使用任何 DoubleAnimation 進行動畫處理
• Point，可以使用任何 PointAnimation 產生動畫效果
• Color，可以使用任何 ColorAnimation 產生動畫效果

對象參考值也有一般化 Object 動畫類型，稍後我們將討論。

指定動畫值

到目前為止，我們已示範如何將對象和屬性設為動畫，但尚未描述動畫在執行時對屬性值的用途。

我們描述的動畫類型有時稱為 From/To/By 動畫。 這表示動畫會隨著時間使用來自動畫定義的一或多個輸入來變更屬性的值：

• 值從 From 值開始。 如果您未指定 From 值，起始值就是動畫執行之前動畫屬性所具備的任何值。 這可能是預設值、來自樣式或範本的值，或 XAML UI 定義或應用程式程式代碼特別套用的值。
• 動畫結尾處的值是 To 值。
• 或者，若要指定相對於起始值的結束值，請設定 By 屬性。 您可以設置此屬性，而不是 To 屬性。
• 如果您未指定 To 值或 By 值，結束值就是動畫執行之前動畫屬性所具備的任何值。 在此情況下，您最好有 From 值，因為否則動畫不會變更值；其開始和結束值都相同。
• 動畫通常至少有一個 From、By 或 To 但絕不是這三個。

讓我們重新流覽先前的 XAML 範例，並再次查看 From 和 To 值，以及 Duration。 此範例是對 Opacity 屬性進行動畫處理，Opacity 的屬性類型為 Double。 因此，這裡要使用的動畫是 DoubleAnimation。

From="1.0" To="0.0" 指定當動畫執行時，Opacity 屬性會從值為 1 開始，並將動畫設為 0。 換句話說，就這些 Double 值對 Opacity 屬性的意義而言，此動畫會導致對象開始不透明，然後淡入透明。

...
<Storyboard x:Name="myStoryboard">
  <DoubleAnimation
    Storyboard.TargetName="MyAnimatedRectangle"
    Storyboard.TargetProperty="Opacity"
    From="1.0" To="0.0" Duration="0:0:1"/>
</Storyboard>
...

Duration="0:0:1" 會指定動畫持續多久，也就是矩形的淡出速度。 Duration 屬性以小時:分鐘:秒的形式指定。 此範例中的持續時間為一秒。

如需 Duration 值和 XAML 語法的詳細資訊，請參閱 Duration。

注意

對於我們展示的範例，如果您確定要動畫的物件的起始狀態的 Opacity 始終等於 1，無論是透過預設設定還是明確設置，您可以省略 From 值，動畫將使用隱式起始值，結果是一樣的。

From/To/By 可為 Null

我們先前提到，您可以省略 From、To 或 By，因此使用目前的非動畫值做為遺漏值的替代專案。 動畫的 From、To 或 By 屬性不是您可能猜到的類型。 例如，DoubleAnimation.To 屬性的類型不是 Double。 相反地，它是 Double 的可為 Null。 其預設值為 null，而非 0。 該 Null 值是動畫系統如何區分您尚未特別設定 From、To 或 By 屬性的值。 Visual C++ 元件延伸模組 (C++/CX) 沒有可為 Null 的類型，因此會改用 IReference。

動畫的其他屬性

本節所述的下一個屬性都是選擇性的，因為它們具有最適合大部分動畫的預設值。

AutoReverse

如果您未在動畫上指定 AutoReverse 或 RepeatBehavior，該動畫將會執行一次，並在指定為 Duration 的時間執行。

AutoReverse 屬性會指定時間軸在到達其 Duration 結尾之後是否反向播放。 如果您將其設定為 true，動畫會在動畫到達其宣告的 Duration 結尾之後反轉，將值從其結束值 (To) 變更回其起始值 (From)。 這表示動畫實際上會在其 Duration 的兩倍時間執行。

RepeatBehavior

RepeatBehavior 屬性會指定時間軸播放的次數，或時間軸應該在內重複的較大持續時間。 根據預設，時間軸的反覆項目計數為「1x」，這表示它在其 Duration 中播放一次且不會重複。

您可以讓動畫執行多個反覆專案。 例如，值為「3x」 會導致動畫執行三次。 或者，您可以為 RepeatBehavior 指定不同的 Duration。 該 Duration 應該比動畫本身的 Duration 還要長，才能生效。 例如，如果將 RepeatBehavior 指定為 “0:0:10”，則對於 Duration 為 “0:0:2” 的動畫，該動畫將重複五次。 如果這些不平均分割，動畫會在到達 RepeatBehavior 時間時被截斷，這可能是部分通過。 最後，您可以指定特殊值「Forever」，這會導致動畫無限執行，直到刻意停止為止。

如需 RepeatBehavior 值和 XAML 語法的詳細資訊，請參閱 RepeatBehavior。

FillBehavior="Stop"

根據預設，動畫結束時，動畫會將屬性值保留為最後的 To 或 By 修改值，即使超過其持續時間也一樣。 不過，如果您將 FillBehavior 屬性的值設定為 FillBehavior.Stop，動畫值的值會還原為套用動畫之前的值，或更精確地還原為相依性屬性系統所決定的目前有效值 (如需此區別的詳細資訊，請參閱相依性屬性概觀)。

BeginTime

預設情況下，BeginTime 為「0:0:0」，因此它在包含分鏡的運行後立即開始。 如果 Storyboard 包含一個以上的動畫，而且您想要交錯其他動畫的開始時間與初始動畫，或建立刻意的簡短延遲，您可能會變更此情況。

SpeedRatio

如果您在分鏡腳本中有多個動畫，您可以變更一或多個動畫相對於分鏡腳本的時間速率。 這是父分鏡腳本，最終會控制動畫 Duration 時間經過的方式。 這個屬性不會經常使用。 如需詳細資訊，請參閱 SpeedRatio。

在分鏡腳本中定義多個動畫

分鏡腳本的內容可以是一個以上的動畫定義。 如果您要將相關的動畫套用至相同目標物件的兩個屬性，則可能有多個動畫。 例如，您可以變更用作 UI 元素的 RenderTransform 的 TranslateTransform 的 TranslateX 和 TranslateY 屬性；這將導致元素沿對角線平移。 您需要兩個不同的動畫來完成此動作，但您可能想要讓動畫成為相同 分鏡腳本 的一部分，因為您一律希望這兩個動畫一起執行。

動畫不一定是相同的類型，或以相同的對象為目標。 它們可以有不同的持續時間，而且不需要共用任何屬性值。

當上層分鏡腳本執行時，內部的每個動畫也會執行。

Storyboard 類別實際上與動畫類型有許多相同的動畫屬性，因為兩者都共用 Timeline 基類。 因此 Storyboard 能夠擁有 RepeatBehavior 或 BeginTime。 不過，除非您希望所有包含的動畫具有該行為，否則您通常不會在分鏡腳本上設定這些專案。 根據一般規則，Storyboard 上設定的任何 Timeline 屬性都會套用至其所有子動畫。 如果未設置，Storyboard 將具有一個隱式持續時間，該 Duration 是根據所包含動畫的最長持續時間值計算得出的。 在分鏡腳本上明確設定的 Duration，其子動畫比其中一個短，會導致該動畫被切斷，這通常不理想。

分鏡腳本不能包含兩個動畫，這些動畫會嘗試以相同對象為目標並建立相同屬性的動畫效果。 如果您嘗試這樣做，當分鏡腳本嘗試執行時，您會收到運行時錯誤。 即使動畫不會因為刻意不同的 BeginTime 值和持續時間而及時重疊，仍適用這項限制。 如果您真的想要將更複雜的動畫時間軸套用至單一分鏡腳本中的相同屬性，執行此動作的方式就是使用主要畫面格動畫。 查看關鍵影格和緩動函數動畫。

如果這些輸入來自多個分鏡腳本，動畫系統可以將多個動畫套用至屬性的值。 針對同時執行分鏡腳本刻意使用此行為並不常見。 不過，您套用至控件屬性的應用程式定義動畫可能會修改 先前在控件視覺狀態模型中執行的動畫 HoldEnd 值。

將分鏡腳本定義為資源

分鏡腳本是您放置動畫物件的容器。 您通常將 Storyboard 定義為可用於要設定動畫的物件的資源，無論是在頁面層級資源或 Application.Resources 中。

下一個範例示範上一個範例 Storyboard 如何包含在頁面層級的 Resources 定義中，其中 Storyboard 是根頁面的索引鍵資源。 請注意 x:Name 屬性。 這個屬性是定義 Storyboard 的變數名稱的方式，因此 XAML 中的其他元素以及程式代碼稍後可以參考 Storyboard。

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>
  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

在 XAML 檔案的 XAML 根目錄定義資源，例如 page.xaml 或 app.xaml，是如何在 XAML 中組織索引鍵資源的常見作法。 您也可以將資源分解成個別的檔案，並將其合併到應用程式或頁面。 如需詳細資訊，請參閱 ResourceDictionary 與 XAML 資源參考。

注意

Windows 執行時期 XAML 支援使用 x:Key 屬性或 x:Name 屬性來識別資源。 對於 Storyboard，使用 x:Name 屬性更為常見，因為您最終會想要透過變數名稱來引用它，以便可以呼叫其 Begin 方法並執行動畫。 如果您確實使用 x:Key 屬性，則需要使用 ResourceDictionary 方法 (例如 Item 索引器) 將其作為鍵控資源進行檢索，然後將檢索到的 Item 轉換為 Storyboard 以使用 Storyboard 方法。

視覺狀態的分鏡腳本

當您宣告控件視覺外觀的視覺狀態動畫時，您也可以將動畫放在 Storyboard 單元中。 在這種情況下，您定義的 Storyboard 元素將進入更深入地嵌套在 Style 中的 VisualState 容器 (Style 是鍵控資源)。 在這種情況下，您的 Storyboard 不需要金鑰或名稱，因為 VisualState 具有 VisualStateManager 可以呼叫的目標名稱。 控件的樣式通常會分解成個別的 XAML ResourceDictionary 檔案，而不是放在頁面或應用程式 Resources 集合中。 如需詳細資訊，請參閱視覺狀態的分鏡腳本動畫。

相依和獨立的動畫

此時，我們需要介紹動畫系統運作方式的一些重要點。 特別是，動畫與 Windows 執行時間應用程式如何呈現到螢幕以及該呈現如何使用處理執行緒有根本性的互動。 Windows 運行時應用程式總是有一個主 UI 線程，該線程負責使用當前資訊更新畫面。 此外，Windows 運行時應用程式有一個組合線程，用於在顯示佈局之前立即預先計算佈局。 當您對 UI 進行動畫處理時，可能會導致 UI 執行緒執行大量工作。 系統必須在每次重新整理之間使用相當短的時間間隔重繪螢幕的大面積區域。 這是擷取動畫屬性之最新屬性值的必要專案。 如果您不小心，動畫可能會降低 UI 的回應速度，或影響同一 UI 執行緒上的其他應用程式功能的效能。

被確定具有減慢 UI 執行續速度風險的各種動畫稱為相關動畫。 不受此風險約束的 動畫是獨立動畫。 相依和獨立動畫之間的差異不只是由動畫類型 (DoubleAnimation 等等) 決定，如我們稍早所述。 相反地，它會決定您要建立動畫效果的特定屬性，以及控件繼承和組合等其他因素。 在某些情況下，即使動畫確實更改了 UI，該動畫對 UI 執行續的影響也很小，並且可以由合成線程作為獨立動畫進行處理。

如果動畫具有下列任何特性，則動畫是獨立的：

• 動畫的持續時間為 0 秒 (請參閱警告)
• 動畫以 UIElement.Opacity 為目標
• 動畫以這些 UIElement 屬性的子屬性值為目標：Transform3D、RenderTransform、Projection、Clip
• 動畫以 Canvas.Left 或 Canvas.Top 為目標
• 動畫以 Brush 值為目標，並使用 SolidColorBrush，以動畫顯示其 Color
• 動畫是 ObjectAnimationUsingKeyFrames

警告

為了讓動畫被視為獨立動畫，您必須明確設定 Duration="0"。 例如，如果您從這個 XAML 中移除 Duration="0"，即使畫面的 KeyTime 是 "0:0:0"，動畫仍被視為相依。

<Storyboard>
  <DoubleAnimationUsingKeyFrames
    Duration="0"
    Storyboard.TargetName="Button2"
    Storyboard.TargetProperty="Width">
    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="200"/>
  </DoubleAnimationUsingKeyFrames>
</Storyboard>

如果您的動畫不符合這些準則，則可能是相依動畫。 根據預設，動畫系統不會執行相依動畫。 因此，在開發和測試過程中，您甚至可能不會看到動畫正在執行。 您仍然可以使用此動畫，但必須特別啟用每個這類相依動畫。 若要啟用動畫，請將動畫物件的 EnableDependentAnimation 屬性設定為 true。 （每個 代表動畫的 Timeline 子類別有不同的 屬性實作，但它們全都命名為 EnableDependentAnimation。

啟用相依動畫的需求落在應用程式開發人員上，是動畫系統和開發體驗的自覺設計層面。 我們希望開發人員知道動畫對於 UI 的回應性確實有效能成本。 效能不佳的動畫很難在完整的應用程式中隔離和偵錯。 因此，最好只開啟您真正需要您應用程式 UI 體驗的相依動畫。 由於使用許多週期的裝飾動畫，我們不想讓應用程式效能變得太容易。 有關動畫性能提示的詳細資訊，請參閱最佳化動畫和媒體。

身為應用程式開發人員，您也可以選擇套用一律停用相依動畫的應用程式範圍設定，即使 EnableDependentAnimation 為 true 也一樣。 請參閱 Timeline.AllowDependentAnimations。

提示

如果您在 Blend for Visual Studio 2019 中使用動畫窗格，每當您嘗試將相依動畫套用至視覺狀態屬性時，設計工具中就會顯示警告。 組建輸出或錯誤清單中不會顯示警告。 如果您要手動編輯 XAML，設計工具將不會顯示警告。 在運行時進行偵錯時，輸出窗格的偵錯輸出將顯示一條警告，指出動畫不是獨立的，將被跳過。

啟動和控制動畫

到目前為止，我們顯示的所有項目實際上都不會造成動畫執行或套用！ 在動畫啟動並正在執行之前，動畫在 XAML 中宣告的值會變更為潛伏，而且尚未發生。 您必須以與應用程式存留期或用戶體驗相關的某種方式明確啟動動畫。 在最簡單的層級，您會在 Storyboard 上呼叫 Begin 方法，以啟動動畫，這是該動畫的上層。 您無法直接從 XAML 呼叫方法，因此不論您如何啟用動畫，您都會從程式碼執行。 這可以是您應用程式頁面或元件的程式代碼後置，或者如果您要定義自定義控件類別，可能是控件的邏輯。

一般而言，您將呼叫 Begin，並只讓動畫執行到其持續時間完成。 但是，您還可以使用 Pause、Resume 和 Stop 方法在運行時控制 Storyboard，以及用於更高級動畫控制場景的其他 API。

當您在包含無限重複的動畫 (RepeatBehavior="Forever") 的情節提要上呼叫 Begin 時，該動畫將一直運行，直到包含它的頁面被卸載，或者您專門呼叫 Pause 或 Stop。

從應用程式程式代碼啟動動畫

您可以自動啟動動畫，或回應使用者動作。 針對自動案例，您通常會使用物件存留期事件，例如 Loaded 作為動畫觸發程式。 Loaded 事件是適合用於此事件，因為此時 UI 已準備好進行互動，而且動畫不會在開頭關閉，因為 UI 的另一個部分仍在載入。

在此範例中 PointerPressed 事件會附加至矩形，如此一來，當使用者按兩下矩形時，動畫就會開始。

<Rectangle PointerPressed="Rectangle_Tapped"
  x:Name="MyAnimatedRectangle"
  Width="300" Height="200" Fill="Blue"/>

事件處理程序使用 Storyboard 的 Begin 方法啟動 Storyboard (動畫)。

myStoryboard.Begin();

myStoryboard().Begin();

myStoryboard->Begin();

myStoryBoard.Begin()

如果您想要讓其他邏輯在動畫完成套用值之後執行，您可以處理 Completed 事件。 此外，針對屬性系統/動畫互動進行疑難解答，GetAnimationBaseValue 方法可能很有用。

提示

每當您為從應用程式程式代碼啟動動畫的應用程式案例撰寫程式代碼時，您可能會想要再次檢閱動畫或轉換是否已經存在於 UI 案例的動畫庫中。 連結庫動畫可在所有 Windows 執行階段 應用程式中啟用更一致的 UI 體驗，而且更容易使用。

 

視覺狀態的動畫

用來定義控件視覺狀態的 Storyboard 執行行為，與應用程式如何直接執行分鏡腳本不同。 如同套用至 XAML 中的視覺狀態定義，Storyboard 是包含 VisualState 的元素，而整個狀態則使用 VisualStateManager API 來控制。 當控件使用包含的 VisualState 時，內的任何動畫都會根據其動畫值和 Timeline 屬性執行。 如需詳細資訊，請參閱視覺狀態的分鏡腳本。 針對視覺狀態，明顯的 FillBehavior 不同。 如果視覺狀態變更為另一個狀態，則即使新的視覺狀態未特別將新的動畫套用至屬性，先前視覺狀態及其動畫所套用的所有屬性變更也會取消。

Storyboard 和 EventTrigger

有一種方式可以啟動可在 XAML 中完全宣告的動畫。 不過，這項技術不再廣泛使用。 這是在 VisualStateManager 支援之前，WPF 和舊版 Silverlight 的舊版語法。 基於匯入/相容性原因，此 EventTrigger 語法仍適用於 Windows 執行階段 XAML，但僅適用於以 FrameworkElement.Loaded 事件為基礎的觸發程式行為;嘗試觸發其他事件會擲回例外狀況或無法編譯。 如需詳細資訊，請參閱 EventTrigger 或 BeginStoryboard。

建立 XAML 附加屬性的動畫效果

這不是常見的案例，但您可以將動畫值套用至 XAML 附加屬性。 如需附加屬性及其運作方式的詳細資訊，請參閱附加屬性概觀。 以附加屬性為目標需要屬性路徑語法，以括弧括住屬性名稱。 您可以使用套用離散整數值的 ObjectAnimationUsingKeyFrames 為內建附加屬性 (例如 Canvas.ZIndex) 設定動畫。 但是，Windows 執行階段 XAML 實現的現有限制是您無法為自訂附加屬性設定動畫。

更多動畫類型以及學習 UI 動畫的後續步驟

到目前為止，我們已經展示了在兩個值之間進行動畫處理的自訂動畫，然後在動畫運行時根據需要對值進行線性插值。 這些稱為 From/To/By 動畫。 但是還有另一種動畫類型使您能夠聲明介於開始和結束之間的中間值。 這些稱為主要畫面格動畫。 還有一種方法可以更改 From/To/By 動畫或關鍵影格動畫的插值邏輯。 這牽涉到套用 Easing 函式。 如需這些概念的詳細資訊，請參閱主要畫面格和 Easing 函式動畫。

相關主題

• Property-path 語法
• 相依性屬性概觀
• 查看關鍵影格和緩動函數動畫。
• 視覺狀態的分鏡動畫
• 控制項範本
• 分鏡
• Storyboard.TargetProperty