動畫概觀

發行項
10/06/2024

Windows Presentation Foundation (WPF) 提供一組強大的圖形和版面配置功能，可讓您建立漂亮的使用者介面和吸引人的文件。動畫可以讓漂亮的使用者介面更美觀而實用。只要以動畫顯示背景色彩，或套用動畫的 Transform，您就可以建立戲劇性的畫面轉換或提供有幫助的視覺提示。

本概觀介紹 WPF 動畫和計時系統。重點放在使用分鏡腳本以動畫顯示 WPF 物件。

動畫簡介

動畫是快速循環一系列影像，而每個影像與上一個影像稍有不同所產生的一種錯覺。大腦將一組影像認知為一個在變化的場景。在影片中，此種錯覺是利用每秒拍攝許多照片或畫面的數位相機所產生。當投影機播放畫面時，觀眾就會看到移動的圖片。

電腦上的動畫很類似如此。例如，讓矩形繪圖淡出畫面的程式可能如下運作。

程式建立計時器。
程式檢查設定間隔處的計時器，以查看經過多少時間。
每當程式檢查計時器時，會根據經過多少時間來計算矩形目前的不透明度值。
然後程式使用新值更新矩形，並重新繪製矩形。

在 WPF 之前，Microsoft Windows 開發人員必須建立和管理自己的計時系統或使用特殊的自訂程式庫。 WPF 包含的高效率計時系統，已透過 Managed 程式碼和 XAML 公開，且已完全整合至 WPF 架構中。 WPF 動畫可讓您輕鬆以動畫顯示控制項和其他圖形物件。

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

WPF 屬性動畫系統

如果您了解計時系統的一些重要概念，就能更容易使用 WPF 動畫。最重要的是，在 WPF 中，您是要對物件的個別屬性套用動畫來以動畫顯示物件。例如，若要增進架構元素，您可以建立其 Width 和 Height 屬性的動畫效果。若要讓物件從檢視中淡出，請將動畫效果加入其 Opacity 屬性。

如果要讓屬性具備動畫功能，必須符合下列三個需求︰

必須是相依性屬性。
動畫必須屬於繼承自 DependencyObject 並實作 IAnimatable 介面的類別。
必須有相容的動畫類型。 (如果 WPF 沒有提供，可以建立您自己的動畫類型。請參閱自訂動畫概觀。)

WPF 包含許多具有 IAnimatable 屬性的物件。 Button 和 TabControl等控制項，以及 Panel 和 Shape 物件繼承自 DependencyObject。這些項目的大部分屬性是相依性屬性。

您幾乎可以在任何地方 (包括在樣式和控制項範本中) 使用動畫。動畫不必是視覺物件。如果不屬於使用者介面部分的物件符合本節所描述的準則，也可以以動畫顯示這些物件。

範例︰讓元素淡入又淡出畫面

此範例示範如何使用 WPF 動畫來以動畫顯示相依性屬性的值。它會使用產生 Double 值動畫類型的 DoubleAnimation，以動畫顯示 Rectangle 的 Opacity 屬性。這樣一來，Rectangle 會淡入和淡出檢視。

範例的第一個部分會建立 Rectangle 元素。下列步驟示範如何建立動畫，並將它套用到矩形的 Opacity 屬性。

下列示範如何在 XAML 的 StackPanel 中建立 Rectangle 元素。

<StackPanel Margin="10">
    <Rectangle
        Name="MyRectangle"
        Width="100" 
        Height="100"
        Fill="Blue">
    </Rectangle>
</StackPanel>

下列示範如何在程式碼的 StackPanel 中建立 Rectangle 元素。

var myPanel = new StackPanel();
myPanel.Margin = new Thickness(10);

var 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;

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

myPanel.Children.Add(myRectangle)
Me.Content = myPanel

第 1 部分︰建立 DoubleAnimation

讓元素淡入又淡出畫面的一個方式是以動畫顯示其 Opacity 屬性。由於 Opacity 屬性的類型為 Double，因此您需要產生兩個值的動畫。 DoubleAnimation 是屬於這類動畫。 DoubleAnimation 會在兩個值之間建立轉換。若要指定其起始值，您可以設定其 From 屬性。若要指定其結束值，您可以設定其 To 屬性。

1.0 的不透明度值會讓物件變得完全不透明，而 0.0 的不透明度值則會讓物件變得完全看不見。若要讓動畫從 1.0 轉換至 0.0，請將其 From 屬性設定為 1.0，並將其 To 屬性設定為 0.0。下列示範如何在 XAML 中建立 DoubleAnimation 元素。
```
<DoubleAnimation From="1.0" To="0.0" />
```
下列示範如何在程式碼中建立 DoubleAnimation。
```
var myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
```
```
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0
```
接下來，您必須指定 Duration。動畫的 Duration 指定動畫從其開始值轉換到目的地值的時間長度。下列示範如何在 XAML 中將 Duration 設定為五秒。
```
<DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />
```
下列示範如何在程式碼中將 Duration 設定為五秒。
```
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
```
```
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
```
上一個程式碼示範從 1.0 轉換到 0.0 的動畫，這會讓目標元素從完全不透明淡化為完全看不見。若要讓元素在消失後重新淡入檢視，請將動畫的 AutoReverse 屬性設定為 true。若要讓動畫無限重複，請將其 RepeatBehavior 屬性設定為 Forever。下列示範如何在 XAML 中將 AutoReverse 和 RepeatBehavior 屬性設定為五秒。
```
<DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>
```
下列示範如何在程式碼中設定 AutoReverse 和 RepeatBehavior 屬性。
```
myDoubleAnimation.AutoReverse = true;
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
```
```
myDoubleAnimation.AutoReverse = True
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever
```

第 2 部分︰建立分鏡腳本

若要將動畫套用至物件，您可以建立 Storyboard，並使用 TargetName 和 TargetProperty 附加屬性來指定要產生動畫效果的物件和屬性。

建立 Storyboard，並將動畫新增為其子系。下列示範如何在 XAML 中建立 Storyboard 元素。

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

若要在程式碼中建立 Storyboard，請在類別層級宣告 Storyboard 變數。

public partial class MainWindow : Window
{
    private Storyboard myStoryboard;

Class MainWindow

    Private myStoryboard As Storyboard

初始化 Storyboard，並將動畫新增為其子系。

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

myStoryboard = New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

Storyboard 必須知道要套用動畫的位置。使用 Storyboard.TargetName 附加屬性來指定要產生動畫效果的物件。下列示範如何在 XAML 中將 DoubleAnimation 的目標名稱設定為 MyRectangle。

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

下列示範如何在程式碼中將 DoubleAnimation 的目標名稱設定為 MyRectangle。

Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)

使用 TargetProperty 附加屬性來指定要產生動畫效果的屬性。以下顯示如何設定動畫以在 XAML 中將 Rectangle 的 Opacity 屬性作為目標。

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

以下顯示如何設定動畫以在程式碼中將 Rectangle 的 Opacity 屬性作為目標。

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

Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

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

第 3 部分 (XAML)︰將分鏡腳本與觸發程序建立關聯

在 XAML 中套用和啟動 Storyboard 的最簡單方法是使用事件觸發程序。本節說明如何在 XAML 中將 Storyboard 與觸發程序產生關聯。

建立 BeginStoryboard 物件，並將您的分鏡腳本與該物件產生關聯。 BeginStoryboard 是套用並啟動 Storyboard 的 TriggerAction 類型。

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

第 3 部分 (程式碼)︰將分鏡腳本與事件處理常式建立關聯

在程式碼中套用和啟動 Storyboard 的最簡單方法是使用事件處理常式。本節說明如何在程式碼中將 Storyboard 與事件處理常式產生關聯。

註冊矩形的 Loaded 事件。

myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

宣告事件處理常式。在事件處理常式中，使用 Begin 方法來套用分鏡腳本。

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

Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
    myStoryboard.Begin(Me)
End Sub

完整範例

下面顯示如何在 XAML 中建立淡入又淡出畫面的矩形。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <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>
    </Grid>
</Window>

下面顯示如何在程式碼中建立淡入又淡出畫面的矩形。

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

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        private Storyboard myStoryboard;

        public MainWindow()
        {
            InitializeComponent();

            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);
        }
    }
}

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 命名空間中有數種動畫類別。幸運的是，它們會遵循嚴格的命名慣例方便您區分︰

<Type>Animation

稱為 "From/To/By" 或「基本」動畫，這些會以動畫顯示開始值到目的地值，或將位移值新增至其開始值。
- 若要指定開始值，請設定動畫的 From 屬性。
- 若要指定結束值，請設定動畫的 To 屬性。
- 若要指定位移值，請設定動畫的 By 屬性。
本概觀中的範例會使用這些動畫，因為最容易使用。 From/To/By 動畫將在＜From/To/By 動畫概觀＞中詳細說明。
<Type>AnimationUsingKeyFrames

主要畫面格動畫比 From/To/By 動畫更強大，因為您可以指定任意數目的目標值，甚至可以控制其插補方法。某些類型只能使用主要畫面格動畫顯示動畫。主要畫面格動畫將在主要畫面格動畫概觀中詳細說明。
<Type>AnimationUsingPath

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

當您實作時，以動畫顯示 <Type> 值的抽象類別。此類別可做為 <Type>Animation 和 <Type>AnimationUsingKeyFrames 類別的基底類別。只有當您想要建立您自己的自訂動畫時，才需要直接處理這些類別。否則，請使用 <Type>Animation 或 KeyFrame<Type>Animation。

在大部分情況下，您會想要使用 <Type> 動畫類別，例如 DoubleAnimation 和 ColorAnimation。

下表顯示數個常見的動畫類型和搭配使用的某些屬性。

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

動畫是時間軸

所有動畫類型都繼承自 Timeline 類別，因此所有動畫都是特殊化類型的時間軸。 Timeline 定義一段時間。您可以指定時間軸的計時行為︰其 Duration、重複多少次，以及時間進行的速度。

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

三個常用的計時屬性 Duration、AutoReverse 和 RepeatBehavior。

Duration 屬性

如先前所述，時間軸代表一段時間。該時間段的長度取決於時間軸的 Duration，通常是使用 TimeSpan 值來指定。當時間軸到達其持續時間結尾時，就是已經完成反覆項目。

動畫會使用其 Duration 屬性來判斷其目前值。如果您未指定動畫的 Duration 值，它會使用 1 秒的預設值。

下列語法顯示 Duration 屬性之 Extensible Application Markup Language (XAML) 屬性語法的簡易版本。

時 : 分 : 秒

下表顯示幾個 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 值和完整 Extensible Application Markup Language (XAML) 語法的詳細資訊，請參閱 Duration 結構。

AutoReverse

AutoReverse 屬性會指定時間軸在到達其 Duration 結尾之後是否回放。如果您將此動畫屬性設定為 true，當動畫到達其 Duration 結尾之後會反向從結束值播放回開始值。此屬性預設為 false。

RepeatBehavior

RepeatBehavior 屬性會指定時間軸播放的次數。時間軸預設的輪播計數為 1.0，表示只播放一次且完全不重複。

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

對屬性套用動畫

前幾節說明不同類型的動畫及其計時屬性。本節說明如何對您想要以動畫顯示的屬性套用動畫。 Storyboard 物件提供將動畫套用至屬性的方式。 Storyboard (部分機器翻譯) 是一種容器時間軸類型，可為其所包括的動畫提供目標資訊。

以物件和屬性為目標

Storyboard (部分機器翻譯) 類別提供 TargetName (英文) 和 TargetProperty (英文) 附加屬性。您對動畫設定這些屬性，就可以告訴動畫要以動畫顯示的內容。不過，在以物件為目標顯示動畫之前，物件通常必須要有名稱。

將名稱指派給 FrameworkElement 與將名稱指派給 Freezable 的物件不同。大部分的控制項和面板是架構元素。不過，大部分純圖形物件 (例如筆刷、轉換和幾何) 則是 Freezable 物件。如果您不確定類型是 FrameworkElement 還是 Freezable，請參閱其參考文件的繼承階層一節。

若要讓 FrameworkElement 作為動畫目標，您可以藉由設定其 Name 屬性來為其命名。在程式碼中，您也必須使用 RegisterName 方法，向元素所屬的頁面註冊元素名稱。
若要在 XAML 中讓 Freezable 物件成為動畫目標，您必須使用 x:Name Directive 為它指派名稱。在程式碼中，您只需使用 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));

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 方法，並將 AnimationTimeline 參數指定為 null。如需詳細資訊和範例，請參閱使用分鏡腳本設定以動畫顯示之後的屬性。

請注意，雖然設定具有 Active 或 Filling 動畫的屬性值似乎沒有任何作用，但屬性值依然會變更。如需詳細資訊，請參閱動畫和計時系統概觀。

資料繫結和建立動畫

大部分的動畫屬性可以是資料繫結或動畫，例如，您可以動畫化 DoubleAnimation 的 Duration 屬性。不過，由於計時系統的運作方式，資料繫結或動畫顯示的動畫不像其他資料繫結或動畫物件。若要了解其行為，了解對屬性套用動畫的意義會很有幫助。

請參閱上一節中示範如何以動畫顯示矩形的 Opacity 的範例。當上述範例中的矩形載入時，其事件觸發程序會套用 Storyboard。計時系統會建立 Storyboard 及其動畫的複本。這些複本無法編輯 (僅供唯讀)，且 Clock 物件是從其中建立。這些時鐘會執行以動畫顯示目標屬性的實際工作。

計時系統會建立 DoubleAnimation 的時鐘，並將其套用至 DoubleAnimation 之 TargetName 和 TargetProperty 所指定的物件和屬性。在此案例中，計時系統會將時鐘套用到名為「MyRectangle」之物件的 Opacity 屬性。

雖然 Storyboard 也會建立時鐘，但不會對任何屬性套用時鐘。其用途是控制針對 DoubleAnimation 建立的子時鐘。

若要讓動畫反映出資料繫結或動畫變更，就必須重新產生動畫的時鐘。時鐘不會自動產生。若要讓動畫反映變更，請使用 BeginStoryboard 或 Begin 方法來重新套用分鏡腳本。當您使用其中一種方法時，動畫會重新啟動。在程式碼中，您可以使用 Seek 方法，讓分鏡腳本移動到先前的位置。

如需資料繫結動畫的範例，請參閱主要曲線動畫範例 (英文)。如需動畫和計時系統如何運作的詳細資訊，請參閱動畫和計時系統概觀。

顯示動畫的其他方式

本概觀中的範例示範如何使用分鏡腳本顯示動畫。當您使用程式碼時，可以使用其他幾種方式顯示動畫。如需詳細資訊，請參閱屬性動畫技術概觀。

動畫範例

下列範例可以幫助您開始將動畫加入至您的應用程式。

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

示範不同 From/To/By 設定。
動畫計時行為範例

示範您可以控制動畫計時行為的不同方式。此範例也示範如何資料繫結動畫的目的地值。

標題	描述
動畫和計時系統概觀	描述計時系統如何使用可讓您建立動畫的 Timeline 和 Clock 類別。
動畫祕訣和訣竅	列出解決動畫問題 (例如效能) 的有用祕訣。
自訂動畫概觀	描述如何使用主要畫面格、動畫類別或每個畫面格回呼來擴充動畫系統。
From/To/By 動畫概觀	描述如何建立在兩個值之間轉換的動畫。
主要畫面格動畫概觀	描述如何建立有多個目標值的動畫，包括控制插補方法的能力。
Easing 函式	說明如何對動畫套用數學公式以獲得實際的行為，例如彈跳。
路徑動畫概觀	描述如何沿著複雜路徑移動或旋轉物件。
屬性動畫技術概觀	描述使用分鏡腳本的屬性動畫、本機動畫、時鐘和每個畫面格動畫。
分鏡腳本概觀	描述如何使用有多個時間軸的分鏡腳本建立複雜的動畫。
計時行為概觀	描述動畫中使用的 Timeline 類型和屬性。
計時事件概觀	描述在時間軸的特定時間點上，執行程式碼的 Timeline 和 Clock 物件之可用事件，例如開始、暫停、繼續、略過或停止。
操作說明主題	包含在應用程式中使用動畫及時間軸的程式碼範例。
時鐘操作說明主題	包含在應用程式中使用 Clock 物件的程式碼範例。
主要畫面格操作說明主題	包含在應用程式中使用主要畫面格動畫的程式碼範例。
路徑動畫操作說明主題	包含在應用程式中使用路徑動畫的程式碼範例。

共用方式為

動畫概觀

動畫簡介

WPF 屬性動畫系統

範例︰讓元素淡入又淡出畫面

第 1 部分︰建立 DoubleAnimation

第 2 部分︰建立分鏡腳本

第 3 部分 (XAML)︰將分鏡腳本與觸發程序建立關聯

第 3 部分 (程式碼)︰將分鏡腳本與事件處理常式建立關聯

完整範例

動畫類型

動畫是時間軸

Duration 屬性

AutoReverse

RepeatBehavior

對屬性套用動畫

以物件和屬性為目標

套用和啟動分鏡腳本

以互動方式控制分鏡腳本

動畫結束後，會發生什麼事？

資料繫結和建立動畫

顯示動畫的其他方式

動畫範例

參考

其他資源

共用方式為

動畫概觀

動畫簡介

WPF 屬性動畫系統

範例︰讓元素淡入又淡出畫面

第 1 部分︰建立 DoubleAnimation

第 2 部分︰建立分鏡腳本

第 3 部分 (XAML)︰將分鏡腳本與觸發程序建立關聯

第 3 部分 (程式碼)︰將分鏡腳本與事件處理常式建立關聯

完整範例

動畫類型

動畫是時間軸

Duration 屬性

AutoReverse

RepeatBehavior

對屬性套用動畫

以物件和屬性為目標

套用和啟動分鏡腳本

以互動方式控制分鏡腳本

動畫結束後，會發生什麼事？

資料繫結和建立動畫

顯示動畫的其他方式

動畫範例

[相關主題]

參考

其他資源