動畫概觀

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

本總覽提供 WPF 動畫和計時系統的簡介。 它著重于使用分鏡腳本的 WPF 物件動畫。

動畫簡介

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

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

  • 程式建立計時器。

  • 程式檢查設定間隔處的計時器,以查看經過多少時間。

  • 每當程式檢查計時器時,會根據經過多少時間來計算矩形目前的不透明度值。

  • 然後程式使用新值更新矩形,並重新繪製矩形。

在之前 WPF ,Microsoft Windows 開發人員必須建立和管理自己的計時系統,或是使用特殊的自訂程式庫。 WPF 包含透過 managed 程式碼公開且 Extensible Application Markup Language (XAML) 與架構緊密整合的有效計時系統 WPF 。 WPF 動畫可讓您輕鬆以動畫顯示控制項和其他圖形物件。

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

WPF 屬性動畫系統

如果您瞭解計時系統的一些重要概念, WPF 動畫可能更容易使用。 最重要的是,在中, WPF 您可以藉由將動畫套用至其個別屬性來建立物件的動畫。 例如,若要讓架構元素成長,您可以建立其 WidthHeight 屬性的動畫。 若要讓物件從 view 淡出,您可以建立其屬性的動畫 Opacity

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

  • 必須是相依性屬性。

  • 它必須屬於繼承自 DependencyObject 的類別,並且會實作為 IAnimatable 介面。

  • 必須有相容的動畫類型。 (如果 WPF 沒有提供,您可以建立自己的帳戶。 請參閱 自訂動畫總覽。 )

WPF 包含許多具有屬性的物件 IAnimatable 。 控制項(例如 ButtonTabControl )以及物件也會 Panel Shape 繼承自 DependencyObject 。 這些項目的大部分屬性是相依性屬性。

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

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

這個範例示範如何使用動畫來以動畫顯示相依性 WPF 屬性的值。 它會使用 DoubleAnimation ,這是產生值的動畫類型 Double ,用以建立的屬性動畫 Opacity Rectangle 。 如此一來,就會 Rectangle 淡入和移出視野。

此範例的第一個部分會建立 Rectangle 元素。 接下來的步驟示範如何建立動畫,並將其套用至矩形的 Opacity 屬性。

下圖顯示如何 Rectangle StackPanel 在 XAML 中建立專案。

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

下圖顯示如何在程式碼中建立 Rectangle 元素 StackPanel

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. 不透明度值 1.0 會讓物件完全不透明,而且不透明度值 0.0 會使其完全隱藏。 若要將動畫從轉換 1.0 成, 0.0 您必須將其 From 屬性設定為 1.0 ,並將其 To 屬性設定為 0.0 。 下圖顯示如何 DoubleAnimation 在 XAML 中建立。

    <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
    
  2. 接下來,您必須指定 DurationDuration動畫的會指定從起始值移至其目的地值所需的時間長度。 下圖顯示如何 Duration 在 XAML 中將設定為五秒。

    <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))
    
  3. 先前的程式碼顯示從轉換成的 1.0 動畫 0.0 ,這會導致目標元素從完全不透明淡出以完全隱藏。 若要讓元素在即告消失之後淡回視野,請將 AutoReverse 動畫的屬性設定為 true 。 若要無限期地重複動畫,請將其 RepeatBehavior 屬性設定為 Forever 。 下圖顯示如何 AutoReverse RepeatBehavior 在 XAML 中設定和屬性。

    <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 並使用 TargetNameTargetProperty 附加屬性來指定要建立動畫的物件和屬性。

  1. 建立 Storyboard 並將動畫新增為其子系。 下圖顯示如何 Storyboard 在 XAML 中建立。

    <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)
    
  2. Storyboard必須知道要將動畫套用至何處。 使用 Storyboard.TargetName 附加屬性來指定要建立動畫的物件。 下圖顯示如何 DoubleAnimation 在 XAML 中將的目標名稱設定為 MyRectangle

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

    下圖顯示如何在程式碼中將的目標名稱設定 DoubleAnimationMyRectangle

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
    
    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
    
  3. 使用 TargetProperty 附加屬性可指定要建立動畫的屬性。 以下顯示如何將動畫設定為以 Opacity XAML 中的屬性為目標 Rectangle

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

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

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

如需 TargetProperty 語法和其他範例的詳細資訊,請參閱分鏡腳本 總覽

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

要在中套用和啟動的最簡單方式 Storyboard XAML 是使用事件觸發程式。 本節說明如何 Storyboard 在 XAML 中建立與觸發程式的關聯。

  1. 建立 BeginStoryboard 物件,並將您的腳本與其產生關聯。 BeginStoryboardTriggerAction 套用和啟動的型別 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>
    
  2. 建立 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>
    
  3. 將加入 EventTriggerTriggers 矩形的集合中。

    <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 在程式碼中將與事件處理常式產生關聯。

  1. 註冊矩形的 Loaded 事件。

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
    
    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded
    
  2. 宣告事件處理常式。 在事件處理常式中,使用方法來套用分鏡腳本 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>動畫

    稱為 "From/To/By" 或「基本」動畫,這些會以動畫顯示開始值到目的地值,或將位移值新增至其開始值。

    • 若要指定開始值,請設定動畫的 From 屬性。

    • 若要指定結束值,請設定動畫的 To 屬性。

    • 若要指定位移值,請設定動畫的 By 屬性。

    本概觀中的範例會使用這些動畫,因為最容易使用。 From/to/By 動畫在 From/To/By 動畫總覽中有詳細的說明。

  • <Type>>>animationusingkeyframes

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

  • <Type>AnimationUsingPath

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

  • <Type>AnimationBase

    抽象類別,當您執行它時,會將值繪製成動畫 <Type> 。 這個類別可作為 <Type> 動畫和 >>animationusingkeyframes 類別的基類 <Type> 。 只有當您想要建立您自己的自訂動畫時,才需要直接處理這些類別。 否則,請使用 <Type> 動畫或主要畫面格 <Type> 動畫。

在大部分的情況下,您會想要使用 <Type> 動畫類別,例如 DoubleAnimationColorAnimation

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

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

動畫是時間軸

所有的動畫類型都是繼承自 Timeline 類別; 因此,所有的動畫都是特製化的時間軸類型。 會 Timeline 定義一段時間。 您可以指定時間軸的 計時行為 :其 Duration 、重複出現的次數,甚至是加快時間的速度。

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

三個經常使用的計時屬性為 DurationAutoReverseRepeatBehavior

Duration 屬性

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

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

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

小時 :分鐘 :

下表顯示數個 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 ,然後使用該方法來宣告新的 Duration 結構 TimeSpan

如需有關 Duration 值和完整語法的詳細資訊 Extensible Application Markup Language (XAML) ,請參閱 Duration 結構。

AutoReverse

AutoReverse屬性(property)會指定時間軸到達其結尾之後是否向前播放 Duration 。 如果您將此動畫屬性設定為 true ,則動畫會在到達其結尾時反轉 Duration ,並從其結束值播放到其起始值。 依預設,這個屬性為 false

RepeatBehavior

RepeatBehavior屬性會指定時間軸的播放次數。 根據預設,時間軸有反覆運算計數 1.0 ,這表示它們會播放一次且完全不重複。

如需這些屬性和其他屬性的詳細資訊,請參閱 計時行為總覽

對屬性套用動畫

前幾節說明不同類型的動畫及其計時屬性。 本節說明如何對您想要以動畫顯示的屬性套用動畫。 Storyboard 物件提供一種將動畫套用至屬性的方式。 Storyboard容器時程表,可為其所包含的動畫提供目標資訊。

以物件和屬性為目標

Storyboard類別提供 TargetNameTargetProperty 附加屬性。 您對動畫設定這些屬性,就可以告訴動畫要以動畫顯示的內容。 不過,在以物件為目標顯示動畫之前,物件通常必須要有名稱。

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

  • 若要建立 FrameworkElement 動畫目標,您可以藉由設定其屬性來為其命名 Name 。 在程式碼中,您也必須使用 RegisterName 方法,向其所屬的頁面註冊專案名稱。

  • 若要讓 Freezable 物件成為動畫目標 XAML ,請使用 x:Name 指示詞為它指派名稱。 在程式碼中,您只需要使用 RegisterName 方法,即可向其所屬的頁面註冊物件。

接下來的章節提供在和程式碼中命名元素的範例 XAML 。 如需命名和目標的詳細資訊,請參閱分鏡腳本 總覽

套用和啟動分鏡腳本

若要在中啟動分鏡腳本 XAML ,請將它與建立關聯 EventTriggerEventTrigger是物件,描述當指定的事件發生時所要採取的動作。 其中一個動作可以是 BeginStoryboard 動作,您可以用來啟動您的腳本。 事件觸發程序在概念上類似事件處理常式,因為兩者都可讓您指定您的應用程式要如何回應特定事件。 與事件處理常式不同的是,事件觸發程式可以在中完整描述, XAML 不需要其他程式碼。

若要 Storyboard 在程式碼中啟動,您可以使用 EventTrigger 或使用 Begin 類別的方法 Storyboard

以互動方式控制分鏡腳本

先前的範例示範了如何 Storyboard 在事件發生時啟動。 您也可以在啟動後以互動方式控制 a 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 移回先前的位置。

如需資料系結動畫的範例,請參閱 主要曲線動畫範例。 如需動畫和計時系統運作方式的詳細資訊,請參閱 動畫和計時系統總覽

顯示動畫的其他方式

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

動畫範例

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

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

參考