動畫概觀

發行項
10/18/2023

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 控制項，以及 Panel 以及和 Shape 物件繼承自 DependencyObject TabControl 。這些項目的大部分屬性是相依性屬性。

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

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

這個範例示範如何使用 WPF 動畫，以動畫顯示相依性屬性的值。它會使用， DoubleAnimation 這是產生 Double 值的動畫類型，以動畫顯示 Opacity 的 Rectangle 屬性。因此，會 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.00.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 5 秒。
```
<DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />
```
下列示範如何在程式碼中將設定為 Duration 5 秒。
```
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
```
```
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
```
先前的程式碼顯示從 1.00.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是的 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 集合。將 RoutedEvent 的 EventTrigger 屬性設定為您想要啟動的 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 的集合。

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

<類型 > 動畫

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

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

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

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

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

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

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

動畫是時間軸

所有動畫類型都繼承自 Timeline 類別;因此，所有動畫都是時間軸的特殊類型。 Timeline定義時間區段。您可以指定 時間軸的計時行為 ：其 Duration 、重複的次數，甚至是時間的進度速度。

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

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

Duration 屬性

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

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

下列語法顯示屬性之 Extensible Application Markup Language （XAML）屬性語法 Duration 的簡化版本。

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 的方法之一 TimeSpan 是使用 FromSeconds 方法來建立，然後使用該 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 ，您也必須使用方法來向其所屬的頁面註冊專案名稱。
若要在 XAML 中將 Freezable 物件設為動畫目標，您可以使用 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 指定的物件和 TargetProperty DoubleAnimation 屬性。在此情況下，計時系統會將時鐘套用至 Opacity 名為「MyRectangle」的物件屬性。

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

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

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

顯示動畫的其他方式

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

動畫範例

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

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

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

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

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

動畫概觀

動畫簡介

WPF 屬性動畫系統

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

第 1 部分︰建立 DoubleAnimation

第 2 部分︰建立分鏡腳本

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

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

完整範例

動畫類型

動畫是時間軸

Duration 屬性

AutoReverse

RepeatBehavior

對屬性套用動畫

以物件和屬性為目標

套用和啟動分鏡腳本

以互動方式控制分鏡腳本

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

資料繫結和建立動畫

顯示動畫的其他方式

動畫範例

參考

意見反應

其他資源

動畫概觀

動畫簡介

WPF 屬性動畫系統

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

第 1 部分︰建立 DoubleAnimation

第 2 部分︰建立分鏡腳本

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

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

完整範例

動畫類型

動畫是時間軸

Duration 屬性

AutoReverse

RepeatBehavior

對屬性套用動畫

以物件和屬性為目標

套用和啟動分鏡腳本

以互動方式控制分鏡腳本

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

資料繫結和建立動畫

顯示動畫的其他方式

動畫範例

[相關主題]

參考

意見反應

其他資源