建立屬性動畫技術概觀

更新：2007 年 11 月

本主題說明建立屬性動畫的各種方法：腳本、本機動畫、時鐘以及單格動畫。

必要條件

若要了解本主題，您應該熟悉動畫概觀中說明的基本動畫功能。

各種建立動畫的方法

因為屬性動畫會在許多不同的情況下建立，所以 WPF 會提供多種建立屬性動畫的方法。

下表指出每種方法是否適用於個別執行個體 (Per-Instance)、樣式、控制項樣板或資料範本，是否適用於 XAML，以及是否可以讓您以互動方式控制動畫。「個別執行個體」是指將動畫或腳本直接套用至物件執行個體 (而非樣式、控制項樣板或資料範本) 的技術。

動畫技術	案例	支援 XAML	可以用互動方式控制
腳本動畫	個別執行個體、Style、ControlTemplate、DataTemplate	是	可以
本機動畫	個別執行個體	否	不可以
時鐘動畫	個別執行個體	否	可以
單格動畫	個別執行個體	否	N/A

腳本動畫

當您想要在 XAML 中定義並套用動畫、在動畫開始之後以互動方式進行控制、建立複雜的動畫樹狀結構，或者在 Style, ControlTemplate 或 DataTemplate 中建立動畫時，請使用 Storyboard。要以 Storyboard 建立動畫的物件，必須是 FrameworkElement 或 FrameworkContentElement，或者必須用來設定 FrameworkElement 或 FrameworkContentElement。如需詳細資訊，請參閱腳本概觀。

Storyboard 是一種特殊的容器 Timeline，提供所含動畫的目標資訊。若要以 Storyboard 建立動畫，請完成下列三個步驟。

1. 宣告 Storyboard 以及一個或多個動畫。

2. 使用 TargetName 和 TargetProperty附加屬性指定每個動畫的目標物件和屬性。

3. (限程式碼) 定義 FrameworkElement 或 FrameworkContentElement 的 NameScope。註冊物件名稱，以該 FrameworkElement 或 FrameworkContentElement 建立動畫。

4. 開始 Storyboard。

開始 Storyboard 會將動畫套用至要建立動畫的屬性並啟動。有兩種方法可以開始 Storyboard：您可以使用 Storyboard 類別提供的 Begin 方法，或使用 BeginStoryboard 動作。在 XAML 中，唯一可以建立動畫的方法是使用 BeginStoryboard 動作。BeginStoryboard 動作可以用在 EventTrigger、屬性 Trigger 或 DataTrigger 中。

下表顯示每種 Storyboard 開始技術適用的不同位置：個別執行個體、樣式、控制項樣板及資料範本。

開始使用腳本的方法…	個別執行個體	樣式	控制項樣板	資料範本	範例
BeginStoryboard 和 EventTrigger	是	是	是	是	HOW TO：使用腳本建立屬性的動畫
BeginStoryboard 和屬性 Trigger	否	是	是	是	HOW TO：當屬性值變更時觸發動畫
BeginStoryboard 和 DataTrigger	否	是	是	是	HOW TO：資料變更時觸發動畫
Begin 方法	是	否	否	否	HOW TO：使用腳本建立屬性的動畫

如需 Storyboard 物件的詳細資訊，請參閱腳本概觀。

本機動畫

本機動畫提供便利的方式，來以任何 Animatable 物件的相依性屬性建立動畫。當您想要將單一動畫套用至屬性，而且不需要在動畫開始之後以互動方式控制時，請使用本機動畫。不像 Storyboard 動畫，本機動畫會以與 FrameworkElement 或 FrameworkContentElement 無關的物件建立物件的動畫。您也不需要針對此型別的動畫定義 NameScope。

本機動畫只能在程式碼中使用，並且不能在樣式、控制項樣板或資料範本中定義。本機動畫在開始之後，就不能以互動方式控制。

若要使用本機動畫建立動畫，請完成下列步驟。

1. 建立 AnimationTimeline 物件。

2. 使用您要建立動畫之物件的 BeginAnimation 方法，將 AnimationTimeline 套用至您指定的屬性。

下列範例顯示如何將 Button 的寬度和背景色彩顯示為動畫。

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
'''This sample demonstrates how to apply non-storyboard animations to a property.
'''To animate in markup, you must use storyboards.
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

Imports System
Imports System.Windows
Imports System.Windows.Navigation
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Imports System.Windows.Controls

Namespace Microsoft.Samples.Animation.LocalAnimations

    ' Create the demonstration.
    Public Class LocalAnimationExample
        Inherits Page

        Public Sub New()

            WindowTitle = "Animate Property Example"
            Dim myStackPanel As New StackPanel()
            myStackPanel.Margin = New Thickness(20)

            ' Create and set the Button.
            Dim aButton As New Button()
            aButton.Content = "A Button"

            ' Animate the Button's Width.
            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 75
            myDoubleAnimation.To = 300
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
            myDoubleAnimation.AutoReverse = True
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

            ' Apply the animation to the button's Width property.
            aButton.BeginAnimation(Button.WidthProperty, myDoubleAnimation)

            ' Create and animate a Brush to set the button's Background.
            Dim myBrush As New SolidColorBrush()
            myBrush.Color = Colors.Blue

            Dim myColorAnimation As New ColorAnimation()
            myColorAnimation.From = Colors.Blue
            myColorAnimation.To = Colors.Red
            myColorAnimation.Duration = New Duration(TimeSpan.FromMilliseconds(7000))
            myColorAnimation.AutoReverse = True
            myColorAnimation.RepeatBehavior = RepeatBehavior.Forever

            ' Apply the animation to the brush's Color property.
            myBrush.BeginAnimation(SolidColorBrush.ColorProperty, myColorAnimation)
            aButton.Background = myBrush

            ' Add the Button to the panel.
            myStackPanel.Children.Add(aButton)
            Me.Content = myStackPanel
        End Sub
    End Class
End Namespace

/*

   This sample demonstrates how to apply non-storyboard animations to a property.
   To animate in markup, you must use storyboards.

*/

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

namespace Microsoft.Samples.Animation.LocalAnimations
{

    // Create the demonstration.
    public class LocalAnimationExample : Page 
    {




        public LocalAnimationExample()
        {


            WindowTitle = "Local Animation Example";
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(20);                     


            // Create and set the Button.
            Button aButton = new Button();
            aButton.Content = "A Button";

            // Animate the Button's Width.
            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 75;
            myDoubleAnimation.To = 300;
            myDoubleAnimation.Duration =  new Duration(TimeSpan.FromSeconds(5));
            myDoubleAnimation.AutoReverse = true;
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Apply the animation to the button's Width property.
            aButton.BeginAnimation(Button.WidthProperty, myDoubleAnimation);       

            // Create and animate a Brush to set the button's Background.
            SolidColorBrush myBrush = new SolidColorBrush();
            myBrush.Color = Colors.Blue;            

            ColorAnimation myColorAnimation = new ColorAnimation();
            myColorAnimation.From = Colors.Blue;
            myColorAnimation.To = Colors.Red;
            myColorAnimation.Duration =  new Duration(TimeSpan.FromMilliseconds(7000));
            myColorAnimation.AutoReverse = true;
            myColorAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Apply the animation to the brush's Color property.
            myBrush.BeginAnimation(SolidColorBrush.ColorProperty, myColorAnimation);           
            aButton.Background = myBrush;

            // Add the Button to the panel.
            myStackPanel.Children.Add(aButton);
            this.Content = myStackPanel;
        }
    }

}

時鐘動畫

當您想要以動畫顯示但不使用 Storyboard 時，以及想要建立複雜的時間樹狀結構或在動畫開始之後以互動方式控制時，就可以使用 Clock 物件。您可以使用 Clock 物件，將任何 Animatable 物件的相依性屬性做成動畫。

您無法直接在樣式、控制項樣板或資料範本中使用 Clock 物件建立動畫 (動畫和計時系統確實會在樣式、控制項樣板及資料範本中使用 Clock 物件建立動畫，但是必須從 Storyboard 為您建立 Clock 物件。如需 Storyboard 物件與 Clock 物件之間關係的詳細資訊，請參閱動畫和計時系統概觀)。

若要將單一 Clock 套用至屬性，請完成下列步驟。

1. 建立 AnimationTimeline 物件。

2. 使用 AnimationTimeline 的 CreateClock 方法建立 AnimationClock。

3. 使用要建立動畫之物件的 ApplyAnimationClock 方法，將 AnimationClock 套用至您指定的屬性。

下列範例顯示如何建立 AnimationClock 並將其套用至兩個類似的屬性。

/*
    This example shows how to create and apply
    an AnimationClock.
*/

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


namespace Microsoft.Samples.Animation.TimingBehaviors
{
    public class AnimationClockExample : Page
    {

        ScaleTransform myScaleTransform;

        public AnimationClockExample()
        {

            this.WindowTitle = "Opacity Animation Example";
            this.Background = Brushes.White;
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(20);

            // Create a button that with a ScaleTransform.
            // The ScaleTransform will animate when the
            // button is clicked.
            Button myButton = new Button();
            myButton.Margin = new Thickness(50);
            myButton.HorizontalAlignment = HorizontalAlignment.Left;
            myButton.Content = "Click Me";           
            myScaleTransform = new ScaleTransform(1,1);
            myButton.RenderTransform = myScaleTransform;


            // Associate an event handler with the
            // button's Click event.
            myButton.Click += new RoutedEventHandler(myButton_Clicked);

            myStackPanel.Children.Add(myButton);
            this.Content = myStackPanel;
        }

        // Create and apply and animation when the button is clicked.
        private void myButton_Clicked(object sender, RoutedEventArgs e)
        {

            // Create a DoubleAnimation to animate the
            // ScaleTransform.
            DoubleAnimation myAnimation = 
                new DoubleAnimation(
                    1, // "From" value
                    5, // "To" value 
                    new Duration(TimeSpan.FromSeconds(5))
                );
            myAnimation.AutoReverse = true;

            // Create a clock the for the animation.
            AnimationClock myClock = myAnimation.CreateClock();            

            // Associate the clock the ScaleX and
            // ScaleY properties of the button's
            // ScaleTransform.
            myScaleTransform.ApplyAnimationClock(
                ScaleTransform.ScaleXProperty, myClock);
            myScaleTransform.ApplyAnimationClock(
                ScaleTransform.ScaleYProperty, myClock);
        }
    }
}

若要建立時間樹狀結構並使用它來建立屬性動畫，請完成下列步驟。

1. 使用 ParallelTimeline 和 AnimationTimeline 物件建立時間樹狀結構。

2. 使用根 ParallelTimeline 的 CreateClock 建立 ClockGroup。

3. 逐一查看 ClockGroup 的 Children，並套用其子 Clock 物件。針對每個 AnimationClock 子系，使用要建立動畫之物件的 ApplyAnimationClock 方法，將 AnimationClock 套用至您指定的屬性

如需 Clock 物件的詳細資訊，請參閱動畫和計時系統概觀。

單格動畫：略過動畫和計時系統

當您需要完全略過 WPF 動畫系統時，請使用這個方法。這個方法的其中一個案例就是物理動畫，動畫中的每個步驟都需要根據上一組物件互動重新計算物件。

單格動畫無法在樣式、控制項樣板或資料範本內定義。

若要逐格建立動畫，請註冊物件的 Rendering 事件 (這個物件包含您要建立動畫的物件)。每遇到一個畫面格就會呼叫一次這個事件處理常式方法。每次 WPF 封送處理視覺化樹狀結構中保留的呈現資料到複合樹狀結構時，就會呼叫事件處理常式方法。

請在您的事件處理常式中，執行動畫效果需要的任何計算，並且以這些值設定您要建立動畫之物件的屬性。

若要取得目前畫面格的展示時間，與這個事件關聯的 EventArgs 可以轉型為 RenderingEventArgs，提供 RenderingTime 屬性供您用來取得目前畫面格的呈現時間。

如需詳細資訊，請參閱 Rendering 頁面。如需範例，請參閱單格動畫範例。

請參閱

概念

動畫概觀

腳本概觀

動畫和計時系統概觀

相依性屬性概觀