屬性動畫技術概觀

發行項
10/14/2024

本主題說明建立屬性動畫的不同方法︰分鏡腳本、本機動畫、時鐘與每一畫面格動畫。

必要條件

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

建立動畫的不同方式

因為有許多建立動畫屬性的不同案例，WPF 提供了數種建立動畫屬性的方法。

針對每一種方法，下表會指出方法是否能用於每個執行個體、樣式、控制項範本或資料範本；它是否能用於 XAML，以及該方法是否能讓您以互動方式控制動畫。「每個執行個體」指的是將動畫或分鏡腳本直接套用至物件之執行個體，而非樣式、控制項範本或資料範本的技術。

動畫技術	案例	支援 XAML	以互動方式控制
分鏡腳本動畫	每個執行個體，Style、ControlTemplate、DataTemplate	Yes	Yes
本機動畫	每個執行個體	No	No
時鐘動畫	每個執行個體	No	Yes
每一畫面格動畫	每個執行個體	No	N/A

分鏡腳本動畫

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

Storyboard (部分機器翻譯) 是一種容器 Timeline 的特殊類型，可為其所包括的動畫提供目標資訊。若要使用 Storyboard 產生動畫效果，請完成下列三個步驟。

宣告 Storyboard 和一或多個動畫。
使用 TargetName 和 TargetProperty 附加屬性來指定每個動畫的目標物件和屬性。
(僅限程式碼) 針對 FrameworkElement 或 FrameworkContentElement 定義 NameScope。註冊物件名稱，以使用該 FrameworkElement 或 FrameworkContentElement 產生動畫效果。
開始 Storyboard。

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

下表顯示支援每種 Storyboard (部分機器翻譯) 開始技術的不同位置：每個執行個體、樣式、控制項範本，以及資料範本。

開始分鏡腳本的方法…	每個執行個體	樣式	控制項範本	DataTemplate \(英文\)	範例
BeginStoryboard (部分機器翻譯) 和 EventTrigger (部分機器翻譯)	Yes	.是	.是	Yes	使用分鏡腳本建立屬性的動畫
BeginStoryboard (部分機器翻譯) 和 Trigger (部分機器翻譯) 屬性	No	.是	.是	Yes	在屬性值變更時觸發動畫
BeginStoryboard (部分機器翻譯) 和 DataTrigger (部分機器翻譯)	No	.是	.是	Yes	操作說明︰在資料變更時觸發動畫
Begin 方法	是	無	無	No	使用分鏡腳本建立屬性的動畫

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

本機動畫

本機動畫提供方便的方式，讓任何 Animatable 物件的相依性屬性產生動畫效果。當您想要將單一動畫套用至屬性，且您不需要在動畫啟動後以互動方式控制動畫時，請使用本機動畫。不同於 Storyboard 動畫，本機動畫可以建立與 FrameworkElement 或 FrameworkContentElement 相關聯之物件的動畫效果。您也不需要針對這個類型的動畫定義 NameScope。

本機動畫只能在程式碼中使用，且無法在樣式、控制項範本或資料範本中定義。本機動畫啟動後，您無法以互動方式控制它。

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

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

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

/*

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

*/

using namespace System;
using namespace System::Windows;
using namespace System::Windows::Navigation;
using namespace System::Windows::Media;
using namespace System::Windows::Media::Animation;
using namespace System::Windows::Shapes;
using namespace System::Windows::Controls;


namespace Microsoft {
   namespace Samples {
      namespace Animation {
         namespace LocalAnimations {
            // Create the demonstration.
            public ref class LocalAnimationExample : Page {

            public: 
               LocalAnimationExample ()
               {
                  WindowTitle = "Local Animation Example";
                  StackPanel^ myStackPanel = gcnew StackPanel();
                  myStackPanel->Margin = Thickness(20);

                  // Create and set the Button.
                  Button^ aButton = gcnew Button();
                  aButton->Content = "A Button";

                  // Animate the Button's Width.
                  DoubleAnimation^ myDoubleAnimation = gcnew DoubleAnimation();
                  myDoubleAnimation->From = 75;
                  myDoubleAnimation->To = 300;
                  myDoubleAnimation->Duration = 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 = gcnew SolidColorBrush();
                  myBrush->Color = Colors::Blue;

                  ColorAnimation^ myColorAnimation = gcnew ColorAnimation();
                  myColorAnimation->From = Colors::Blue;
                  myColorAnimation->To = Colors::Red;
                  myColorAnimation->Duration = 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;
               };
            };
         }
      }
   }
}

/*

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

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

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

時鐘動畫

當您想要在不使用 Storyboard 的情況下產生動畫效果，且想要在動畫啟動時建立複雜的計時樹狀結構或以互動方式控制動畫時，請使用 Clock 物件。您可以使用 Clock 物件，以動畫顯示任何 Animatable 物件的相依性屬性。

您無法直接使用 Clock 物件，在樣式、控制項範本或資料範本中產生動畫效果。 (動畫和計時系統實際上會使用 Clock 物件，在樣式、控制項範本和資料範本中產生動畫效果，但它必須從 Storyboard 建立那些 Clock物件。如需 Storyboard 物件與 Clock 物件之間關聯性的詳細資訊，請參閱動畫和計時系統概觀。)

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

建立 AnimationTimeline 物件。
使用 AnimationTimeline 的 CreateClock 方法建立 AnimationClock。
使用您想要建立動畫效果之物件的 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);
        }
    }
}

'
'    This example shows how to create and apply
'    an AnimationClock.
'


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


Namespace Microsoft.Samples.Animation.TimingBehaviors
    Public Class AnimationClockExample
        Inherits Page

        Private ReadOnly myScaleTransform As ScaleTransform

        Public Sub New()

            WindowTitle = "Opacity Animation Example"
            Background = Brushes.White
            Dim myStackPanel As New StackPanel With {
                .Margin = New Thickness(20)
            }

                ' Create a button that with a ScaleTransform.
                ' The ScaleTransform will animate when the
                ' button is clicked.
            Dim myButton As New Button With {
                .Margin = New Thickness(50),
                .HorizontalAlignment = HorizontalAlignment.Left,
                .Content = "Click Me"
            }
            myScaleTransform = New ScaleTransform(1,1)
            myButton.RenderTransform = myScaleTransform


            ' Associate an event handler with the
            ' button's Click event.
            AddHandler myButton.Click, AddressOf myButton_Clicked

            myStackPanel.Children.Add(myButton)
            Content = myStackPanel
        End Sub

        ' Create and apply and animation when the button is clicked.
        Private Sub myButton_Clicked(sender As Object, e As RoutedEventArgs)

            ' Create a DoubleAnimation to animate the
            ' ScaleTransform.
            Dim myAnimation As New DoubleAnimation(1, 5, New Duration(TimeSpan.FromSeconds(5))) With {
                .AutoReverse = True
            } ' "To" value -  "From" value

            ' Create a clock the for the animation.
            Dim myClock As AnimationClock = 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)
        End Sub
    End Class
End Namespace

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

使用 ParallelTimeline 和 AnimationTimeline 物件來建立計時樹狀結構。
使用根 ParallelTimeline 的 CreateClock 建立 ClockGroup。
逐一查看的 ClockGroup 的 Children，並套用其子 Clock 物件。針對每個 AnimationClock 子系，請使用您想要建立動畫效果之物件的 ApplyAnimationClock 方法，將 AnimationClock 套用至您指定的屬性

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

每一畫面格動畫：略過動畫和計時系統

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

每一畫面格動畫無法在樣式、控制項範本或資料範本中定義。

若要逐格產生動畫，您必須註冊物件 (其中包含您想要以動畫顯示的物件) 的 Rendering 事件。系統會針對每個畫面呼叫一次此事件處理常式方法。 WPF 每次封送處理視覺化樹狀結構中已保存的轉譯資料，跨越到組合樹狀結構時，就會呼叫您的事件處理常式方法。

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

若要取得目前畫面格的呈現時間，與此事件相關聯的 EventArgs 可以轉換成 RenderingEventArgs，這會為您提供可用來取得目前畫面格轉譯時間的 RenderingTime 屬性。

如需詳細資訊，請參閱 Rendering 頁面。

共用方式為