動畫概觀

更新：2007 年 11 月

Windows Presentation Foundation (WPF) 提供一組強大的圖形與配置功能，可讓您建立有趣的使用者介面及文件。動畫可以讓有趣的使用者介面變得更美觀而實用。您可以建立背景色彩動畫或套用 Transform 的動畫，以產生具有動態效果的畫面轉換，或提供實用的視覺提示。

本概觀簡介 WPF 動畫與計時系統。使用腳本來強調 WPF 物件的動畫。

這個主題包含下列章節。

• 動畫簡介
• WPF 屬性動畫系統
• 範例：使項目漸漸淡入及淡出畫面
• 動畫型別
• 將動畫套用至屬性
• 以互動方式控制腳本
• 動畫結束時會發生什麼事？
• 資料繫結和建立動畫
• 建立動畫的其他方式
• 動畫範例
• 相關主題

動畫簡介

動畫是透過快速循環播放一連串影像 (每一張都和前一張稍有不同)，所產生的視覺錯覺。大腦會將一連串接收到的影像視為一個正在變化的場景。而影片則是利用攝影機，每一秒記錄多張相片或畫面格以產生視覺錯覺。使用投影機播放這些畫面格時，觀眾所看到的是移動的圖片。

電腦動畫也是採用類似的方式。例如，使矩形圖形慢慢淡出畫面的程式運作方式如下。

• 程式會建立計時器。

• 程式會在設定的間隔檢查計時器，以查看所經過的長間。

• 當程式每次檢查計時器時，就會根據已經過的時間計算矩形目前的透明度值。

• 然後程式就會以新的值更新透明度再重新繪製矩形。

在 WPF 之前，Microsoft Windows 的開發人員必須建立並管理自己的計時系統，或使用特殊的自訂程式庫。WPF 內含有效的計時系統，該系統會透過 Managed 程式碼及可延伸標記語言 (XAML) 公開，並深入整合至 WPF 架構中。WPF 動畫使得建立控制項及其他圖形物件的動畫變得更容易。

WPF 負責所有幕後工作，包括管理計時系統以及有效的重新繪製畫面。它所提供的時間類別，可讓您專注在想要建立的效果上，而不是專注在達成這些效果的方法。WPF 會公開您的類別可繼承的動畫基底類別以產生自訂動畫，讓您更容易建立自己的動畫。這些自訂動畫會獲得標準動畫類別許多效能上的優勢。

WPF 屬性動畫系統

如果您了解計時系統的幾個重要的概念，就能更輕鬆的使用 WPF 動畫。其中最重要的一點就是，您要在 WPF 中，將動畫套用至物件的個別屬性以建立物件的動畫。例如，若要使架構項目變大，請建立 Width 及 Height 屬性的動畫。若要使物件漸漸淡出畫面，則請建立其 Opacity 屬性的動畫。

具備動畫功能的屬性，必須符合下列三個條件：

• 必須是相依性屬性。

• 所屬的類別必須繼承自 DependencyObject，並實作 IAnimatable 介面。

• 必須有可用且相容的動畫型別(如果 Windows Presentation Foundation (WPF) 未提供這種型別，您可以自行建立。請參閱自訂動畫概觀)。

WPF 內含的許多物件，都有可顯示動畫的屬性。諸如 Button 和 TabControl 之類的控制項，以及 Panel 和 Shape 物件都是繼承自 DependencyObject。它們的屬性大部分都是相依性屬性。 

動畫可以使用在幾乎任何地方，包括在樣式及控制項樣板中。動畫不一定是視覺上的效果，只要物件不是使用者介面的一部分且符合本節所說明的條件，就可建立物件的動畫。

範例：使項目漸漸淡入及淡出畫面

本範例說明如何使用 WPF 動畫，建立相依性屬性值的動畫。範例使用 DoubleAnimation (這是一種會產生 Double 值的動畫) 顯示 Rectangle 之 Opacity 屬性的動畫。Rectangle 漸漸淡入及淡出畫面，就是產生的結果。

範例的第一部分會建立一個 Rectangle 項目，並顯示在 Page 中。接下來的步驟說明如何建立動畫，並套用動畫至矩形的 Opacity 屬性。

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Fading Rectangle Example">
  <StackPanel Margin="10">
    
    <Rectangle
      Name="MyRectangle"
      Width="100" 
      Height="100"
      Fill="Blue">
    </Rectangle> 
  </StackPanel>
</Page>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace Microsoft.SDK.Animation
{
    public class RectangleOpacityFadeExample : Page
    {
        public RectangleOpacityFadeExample()
        {
            NameScope.SetNameScope(this, new NameScope());
            this.WindowTitle = "Fading Rectangle Example";
            StackPanel myPanel = new StackPanel();
            myPanel.Margin = new Thickness(10);
            
            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;
            myPanel.Children.Add(myRectangle);
            this.Content = myPanel; 
        }
    }
}

第 1 部分：建立 DoubleAnimation

要使項目淡入及淡出畫面的其中一個方法，就是建立項目的 Opacity 屬性動畫。因為 Opacity 屬性的型別是 Double，您需要會產生雙精度浮點數值的動畫。DoubleAnimation 就是這樣的動畫。DoubleAnimation 會建立兩個雙精度浮點數值之間的轉換效果。如果要指定起始值，您可以設定其 From 屬性。若要指定結束值，可以設定其 To 屬性。

1. 透明度值為 1.0 會使物件完全不透明，透明度值為 0.0 則會使物件完全透明。如果要使動畫從 1.0 轉換成 0.0，您可以將 From 屬性設定為 1.0，而 To 屬性則設定為 0.0。

   ...
   <DoubleAnimation From="1.0" To="0.0"  />        
   ...
   

   [C#]

   DoubleAnimation myDoubleAnimation = new DoubleAnimation();
   myDoubleAnimation.From = 1.0;
   myDoubleAnimation.To = 0.0;
   

2. 接下來，必須指定 Duration。動畫的 Duration 會指定從開始值到目的值要花費多少時間。在下列範例中，動畫持續期間為五秒鐘。

   ...
   <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />        
   ...
   
   myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
   

3. 上一個程式碼顯示從 1.0 轉換成 0.0 的動畫，使目標項目從完全不透明淡出為完全透明。如果要使消失的項目再淡入至畫面中，請將動畫的 AutoReverse 屬性設定為 true。如果要使動畫無限次重複，請將動畫的 RepeatBehavior 屬性設定為 Forever。

   ...
   <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>        
   ...
   
   myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
   myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
   

第 2 部分：建立腳本

若要將動畫套用至物件，請建立 Storyboard，並使用 TargetName 和 TargetProperty附加屬性指定要建立動畫的物件和屬性。

1. 建立 Storyboard，並將動畫新增為其子系。

   ...
   <Storyboard>
     <DoubleAnimation
       From="1.0" To="0.0" Duration="0:0:1" 
       AutoReverse="True" RepeatBehavior="Forever" />
   </Storyboard>
   ...
   

   程式碼將 Storyboard 宣告為類別成員。

   public class RectangleOpacityFadeExample : Page
   { 
       private Storyboard myStoryboard;
   

   然後初始化 Storyboard 並將動畫新增為子系。

   myStoryboard = new Storyboard();
   myStoryboard.Children.Add(myDoubleAnimation);
   

2. Storyboard 必須知道要將動畫套用到哪裡。使用 Storyboard.TargetName 附加屬性指定要建立動畫的物件。在下列程式碼中 DoubleAnimation 的目標名稱為 MyRectangle，就是要建立動畫的物件名稱。

   ...
   <Storyboard>
     <DoubleAnimation
       Storyboard.TargetName="MyRectangle" 
       From="1.0" To="0.0" Duration="0:0:1" 
       AutoReverse="True" RepeatBehavior="Forever" />
   </Storyboard>
   ...
   
   Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
   

   注意事項：
   在程式碼中建立腳本時必須執行兩個額外的步驟：建立名稱範圍，以及註冊要建立動畫的物件名稱。本節開頭建立頁面和矩形的程式碼中，也有宣告矩形的 NameScope 並註冊名稱。您可以使用 SetNameScope 方法以建立 NameScope (如果沒有的話)。您要使用 RegisterName 方法，將目標物件的名稱註冊至您建立 NameScope 的項目。否則，Storyboard 就無法找到物件並建立動畫。如需其他範例，請參閱 HOW TO：定義名稱範圍。

3. 使用 TargetProperty 附加屬性指定要顯示動畫的屬性。在下列程式碼中，設定要有動畫的是 Rectangle 的 Opacity 屬性。

<BeginStoryboard>
  <Storyboard>
    <DoubleAnimation
      Storyboard.TargetName="MyRectangle" 
      Storyboard.TargetProperty="Opacity"
      From="1.0" To="0.0" Duration="0:0:5" 
      AutoReverse="True" RepeatBehavior="Forever" />
  </Storyboard>
</BeginStoryboard>

Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

如需 TargetProperty 語法的詳細資訊及其他範例，請參閱腳本概觀。

第 3 部分 (XAML)：建立腳本與觸發程序的關聯

在 XAML 中套用並啟動 Storyboard 最簡單的方式，就是使用事件觸發程序。

建立一個 BeginStoryboard 物件，並建立與腳本之間的關聯。BeginStoryboard 是一種 TriggerAction，會套用及啟動 Storyboard。

<BeginStoryboard>
  <Storyboard>
    <DoubleAnimation
      Storyboard.TargetName="MyRectangle" 
      Storyboard.TargetProperty="Opacity"
      From="1.0" To="0.0" Duration="0:0:5" 
      AutoReverse="True" RepeatBehavior="Forever" />
  </Storyboard>
</BeginStoryboard>

建立 EventTrigger 並將 BeginStoryboard 新增至 Actions 集合中。將 EventTrigger 的 RoutedEvent 屬性設定為要啟動 Storyboard 的路由事件 (如需路由事件的詳細資訊，請參閱路由事件概觀)。

<!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
  <BeginStoryboard>
    <Storyboard>
      <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:5" 
        AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
  </BeginStoryboard>
</EventTrigger>

將 EventTrigger 新增至矩形的 Triggers 集合。

<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.0" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

第 4 部分 (程式碼)：建立腳本與事件處理常式的關聯

在程式碼中套用並啟動 Storyboard 最簡單的方式，就是使用事件觸發程序。

1. 註冊矩形的 Loaded 事件。

   [C#]

   myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
   

2. 宣告事件處理常式。在事件處理常式中，使用 Begin 方法以套用腳本。

   [C#]

   ...
   public void myRectangleLoaded(object sender, RoutedEventArgs e)
   {
       myStoryboard.Begin(this);
   }
   ...
   

完整範例

下列範例顯示的完整程式碼，會在畫面上建立淡入及淡出的矩形。

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Fading Rectangle Example">
  <StackPanel Margin="10">
    <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.0" Duration="0:0:5" 
                AutoReverse="True" RepeatBehavior="Forever" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>
  </StackPanel>
</Page>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace SDKSample
{

    public class RectangleOpacityFadeExample : Page
    {
        private Storyboard myStoryboard;

        public RectangleOpacityFadeExample()
        {
            NameScope.SetNameScope(this, new NameScope());

            this.WindowTitle = "Fading Rectangle Example";
            StackPanel myPanel = new StackPanel();
            myPanel.Margin = new Thickness(10);

            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;

            DoubleAnimation myDoubleAnimation = 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.
            myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);  

            myPanel.Children.Add(myRectangle);
            this.Content = myPanel;
        }

        private void myRectangleLoaded(object sender, RoutedEventArgs e)
        {
            myStoryboard.Begin(this);
        }

    }
}

動畫型別

因為動畫會產生屬性值，所以不同的屬性型別會有不同的動畫型別。如果要讓使用 Double 的屬性 (例如項目的 Width 屬性) 顯示動畫，請使用會產生 Double 值的動畫。如果要讓使用 Point 的屬性顯示動畫，請使用會產生 Point 值的動畫，依此類推。因為有許多屬性型別，所以 System.Windows.Media.Animation 命名空間中也有多個動畫類別。所幸，這些型別遵循十分嚴格的命名規範，所以很容易分辨：

• <型別>Animation

  又稱為 "From/To/By" 或「基本」動畫，會顯示起始及目的值之間的動畫，或將位移值新增至起始值。

  • 如果要指定起始值，請設定動畫的 From 屬性。

  • 如果要指定結束值，請設定動畫的 To 屬性。

  • 如果要指定位移值，請設定動畫的 By 屬性。

  本概觀中的範例使用這些動畫，因為這些最容易使用。From/To/By 動畫的詳細說明，請參閱 From/To/By 動畫概觀。

• <型別>AnimationUsingKeyFrames

  主要畫面格動畫比 From/To/By 動畫的功能更強大，因為您可以指定任意數目的目標值，甚至控制其插補方法。有些型別只能使用主要畫面格動畫來顯示動畫。主要畫面格動畫的詳細說明，請參閱主要畫面格動畫概觀。

• <型別>AnimationUsingPath

  路徑動畫可讓您使用幾何路徑以產生動畫的值。

• <型別>AnimationBase

  當您實作抽象類別時，抽象類別會顯示 <型別> 值的動畫。這個類別就像是 <型別>Animation 及 <型別>AnimationUsingKeyFrames 類別的基本類別。只有當您要建立自訂動畫時，才需要直接處理這些類別。否則，請使用 <型別>Animation 或 KeyFrame<型別>Animation。

大部分的情況下，您必須使用 <型別>Animation 類別，例如 DoubleAnimation 及 ColorAnimation。

下表顯示幾個常見的動畫型別及其使用的屬性。

屬性型別	對應的基本 (From/To/By) 動畫	對應的主要畫面格動畫	對應的路徑動畫	使用範例
Color	ColorAnimation	ColorAnimationUsingKeyFrames	無	建立 SolidColorBrush 或 GradientStop 的 Color 動畫。
Double	DoubleAnimation	DoubleAnimationUsingKeyFrames	DoubleAnimationUsingPath	建立 DockPanel 的 Width 動畫，或是 Button 的 Height 動畫。
Point	PointAnimation	PointAnimationUsingKeyFrames	PointAnimationUsingPath	建立 EllipseGeometry 的 Center 位置動畫。
String	無	StringAnimationUsingKeyFrames	無	建立 TextBlock 的 Text 動畫，或是 Button 的 Content 動畫。

動畫就是時刻表

所有的動畫類型都繼承自 Timeline 類別，所以所有動畫都是特殊類型的時刻表。Timeline 會定義時間區段。您可以指定時刻表的「時間行為」：Duration、重複的次數，甚至時間進行的速度。

因為動畫是一種 Timeline，所以也代表一個時間區段。當動畫執行指定的時間區段進度時 (或 Duration)，也會計算輸出值。當動畫進行 (即「播放」) 時，會更新相關聯的屬性。

三個經常使用的時間屬性分別是 Duration、AutoReverse 及 RepeatBehavior。

Duration 屬性

之前已說明過，時刻表代表時間區段。而這個區段的長度是由時刻表的 Duration 所決定，通常是使用 TimeSpan 值來指定。當時刻表達到期間的結尾時，就是完成了一次反覆運算。

動畫使用 Duration 屬性來判斷目前的值。如果您沒有指定動畫的 Duration 值，則預設為 1 秒鐘。

下列語法是 Duration 屬性 (Property) 的可延伸標記語言 (XAML) 屬性 (Attribute) 簡化語法。

hours:minutes:seconds

下表顯示幾個 Duration 設定，及其產生的結果。

設定	產生的結果
0:0:5.5	5.5 秒。
0:30:5.5	30 分鐘又 5.5 秒。
1:30:5.5	1 小時 30 分鐘又 5.5 秒。

在程式碼中指定 Duration 的作法之一，就是使用 FromSeconds 方法以建立 TimeSpan，然後使用這個 TimeSpan 宣告一個新的 Duration 結構。

如需 Duration 值和完整可延伸標記語言 (XAML) 語法的詳細資訊，請參閱 Duration 型別頁面。

AutoReverse

AutoReverse 屬性會指定當時刻表到達 Duration 的結尾時，是否要反向播放。如果您將這個動畫屬性設定為 true，則當動畫到達 Duration 的結尾時就會反向播放，從結尾值開始播放至起始值。根據預設，這個屬性設定為 false。

RepeatBehavior

RepeatBehavior 屬性會指定時刻表播放幾次。根據預設，時刻表的反覆計數為 1.0，表示播放一次且不再重複。

如需這些屬性及其他的詳細資訊，請參閱計時行為概觀。

將動畫套用至屬性

上一節中說明不同型別的動畫及其時間屬性。本節說明如何將動畫套用至您要顯示動畫的屬性。Storyboard 物件可提供方法讓您將動畫套用至屬性。Storyboard 是一種「容器時刻表」，對其所含的動畫提供目標資訊。

目標物件及屬性

Storyboard 類別提供 TargetName 和 TargetProperty附加屬性。設定動畫的這些屬性，可以讓動畫知道要顯示哪些內容。但是，必須先為物件命名，動畫才能將物件設定為目標。

為 FrameworkElement 指定名稱，和為 Freezable 物件指定名稱是不同的。大部分的控制項及面板都是架構項目，但是大部分的純圖形物件 (例如筆刷、轉換和幾何圖形) 則是可凍結的物件。如果您不確定某個型別是 FrameworkElement 或 Freezable，請參閱其型別頁面的繼承階層一節。

• 如果要將 FrameworkElement 設定為動畫目標，請設定其 Name 屬性以指派名稱。在程式碼中，您也必須使用 RegisterName 方法，將項目名稱註冊至所屬的頁面。

• 如果要在 XAML 中將 Freezable 物件設定為動畫目標，請使用 x:Name 屬性為它指派名稱。在程式碼中，只要使用 RegisterName 方法將物件註冊至所屬的頁面即可。

下一節中將提供在 XAML 及程式碼中為項目命名的範例。如需命名及設定目標的詳細資訊，請參閱腳本概觀。

套用及啟動腳本

如果要在 XAML 中啟動腳本，您可以建立腳本和 EventTrigger 的關聯。EventTrigger 是一種物件，描述發生指定的事件時會採取的動作。其中一個動作可以是 BeginStoryboard，可以用來啟動腳本。事件觸發程序的概念和事件處理常式類似，因為都可以讓您指定應用程式如何回應特定事件。但是不同於事件處理常式之處在於，事件觸發程序可以在 XAML 中完整說明，不需要其他程式碼。

如果要以程式碼啟動 Storyboard，您可以使用 EventTrigger 或 Storyboard 類別的 Begin 方法。

以互動方式控制腳本

上一個範例顯示當發生事件時，如何啟動 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));

因為動畫的 FillBehavior 值並未更改 (預設為 HoldEnd)，所以當動畫結束時會保留值為 0。因此，當動畫結束時矩形的 Opacity 仍然是 0。如果您將矩形的 Opacity 設定為其他值，該程式碼不會產生作用，因為動畫仍會影響 Opacity 屬性。

要以程式碼重新取得動畫屬性的控制權，可以使用 BeginAnimation 方法，並將 AnimationTimeline 參數指定為 null。如需詳細資訊和範例，請參閱 HOW TO：使用腳本建立屬性的動畫後進行設定。

請注意，雖然設定有 Active 或 Filling 動畫的屬性值不會產生作用，但屬性值卻會改變。如需詳細資訊，請參閱動畫和計時系統概觀。

資料繫結和建立動畫

大部分的動畫屬性可以設定資料繫結或建立動畫，例如，您可以為 DoubleAnimation 的 Duration 屬性建立動畫。但是，因為計時系統的運作方式，所以資料繫結或動畫的行為，和其他資料繫結或建立動畫的物件行為並不一樣。了解將動畫套用至屬性所代表的意義，可以幫助您了解動畫的行為。

有關如何產生矩形的 Opacity 動畫的方式，請參閱上一節的範例。上一個範例中的矩形載入時，它的事件觸發程序會套用 Storyboard。計時系統會建立 Storyboard 及其動畫的複本。這些複本會被凍結 (變成唯讀)，而 Clock 物件就是從這些複本所建立的。實際上建立目標屬性動畫的則是這些時鐘。

計時系統會為 DoubleAnimation 建立時鐘，並套用至 DoubleAnimation 的 TargetName 及 TargetProperty 所指定的物件及屬性。在此情況下，計時系統會將時鐘套用至名稱為 "MyRectangle" 之物件的 Opacity 屬性。

雖然時鐘也是為 Storyboard 而建立的，卻不會套用至任何屬性。時鐘的目的是用來控制子時鐘，也就是為 DoubleAnimation 所建立的時鐘。

如果動畫要反映資料繫結或動畫的變更，就必須重新產生此動畫的時鐘。時鐘並不會自動產生。如果要使動畫反映變更，請使用 BeginStoryboard 或 Begin 方法重新套用動畫的腳本。只要使用其中一種方法，動畫就會重新啟動。在程式碼中，您可以使用 Seek 方法，將腳本移回前一個位置。

如需資料繫結動畫的範例，請參閱關鍵 Spline 動畫範例。如需動畫及計時系統運作的方式，請參閱動畫和計時系統概觀。

建立動畫的其他方式

本概觀中的範例說明如何使用腳本以建立動畫。使用程式碼時，您還有其他方式可以建立動畫。如需詳細資訊，請參閱建立屬性動畫技術概觀。

動畫範例

下列範例可以幫助您將動畫新增至應用程式。

• 屬性動畫範例

  顯示如何將動畫套用至架構項目及可凍結的物件。

• From、To 和 By 動畫目標值範例

  示範不同的 From/To/By 設定。

• 動畫計時行為範例

  示範幾種不同的方式，讓您控制動畫的時間行為。這個範例還會說明如何資料繫結動畫的目的值。

請參閱

概念

From/To/By 動畫概觀

主要畫面格動畫概觀

腳本概觀

計時行為概觀

動畫和計時系統概觀

計時事件概觀

Windows Presentation Foundation 使用者入門

參考

Timeline

Storyboard