屬性動畫技術概觀
本主題說明建立屬性動畫的不同方法︰分鏡腳本、本機動畫、時鐘與每一畫面格動畫。
必要條件
若要了解本主題，您應該要熟悉動畫概觀中所述的基本動畫功能。
建立動畫的不同方式
因為動畫屬性有許多不同案例，WPF 提供數種方法來建立屬性的動畫效果。
針對每個方法，下表指出是否可以在個別實例、樣式、控制項範本或資料範本中使用;是否可以在 XAML 中使用;以及方法是否可讓您以互動方式控制動畫。 「每個執行個體」指的是將動畫或分鏡腳本直接套用至物件之執行個體，而非樣式、控制項範本或資料範本的技術。
| 動畫技術 | 案例 | 支援 XAML | 以互動方式控制 |
|---|---|---|---|
| 分鏡腳本動畫 | 每個實例、、 Style 、 ControlTemplateDataTemplate | Yes | Yes |
| 本機動畫 | 每個執行個體 | No | No |
| 時鐘動畫 | 每個執行個體 | No | Yes |
| 每一畫面格動畫 | 每個執行個體 | No | N/A |
分鏡腳本動畫
Storyboard當您想要在 XAML 中定義並套用動畫、在動畫開始之後以互動方式控制動畫、建立複雜的動畫樹狀結構，或在 或 DataTemplate 中 StyleControlTemplate 建立動畫。 若要讓 物件以 Storyboard 動畫顯示 ，它必須是 FrameworkElement 或 FrameworkContentElement ，或是必須用來設定 FrameworkElement 或 FrameworkContentElement 。 如需詳細資訊，請參閱分鏡腳本概觀。
Storyboard是一種特殊的容器 Timeline 類型，可為它所包含的動畫提供目標資訊。 若要使用 Storyboard 產生動畫效果，請完成下列三個步驟。
Storyboard宣告 和一或多個動畫。
TargetName使用 和 TargetProperty 附加屬性來指定每個動畫的目標物件和屬性。
（僅限程式碼）NameScope定義 或 FrameworkContentElement 的 FrameworkElement 。 註冊物件名稱，以使用該 FrameworkElement 或 FrameworkContentElement 產生動畫效果。
Storyboard開始 。
開始會將 Storyboard 動畫套用至動畫的屬性，並加以啟動。 有兩種方式可以開始 Storyboard ：您可以使用 Begin 類別所提供的 Storyboard 方法，或使用 BeginStoryboard 動作。 在 XAML 中產生動畫效果的唯一 BeginStoryboard 方法是使用動作。 BeginStoryboard動作可用於 EventTrigger 、屬性 Trigger 或 DataTrigger 。
下表顯示支援每個 Storyboard 開始技術的不同位置：每個實例、樣式、控制項範本和資料範本。
| 開始分鏡腳本的方法… | 每個執行個體 | 樣式 | 控制項範本 | DataTemplate \(英文\) | 範例 |
|---|---|---|---|---|---|
| BeginStoryboard 和 EventTrigger | Yes | Yes | Yes | Yes | 使用分鏡腳本建立屬性的動畫 |
| BeginStoryboard 和 屬性 Trigger | No | 是 | Yes | Yes | 在屬性值變更時觸發動畫 |
| BeginStoryboard 和 DataTrigger | No | 是 | Yes | Yes | 操作說明︰在資料變更時觸發動畫 |
| Begin 方法 | 是 | 否 | No | No | 使用分鏡腳本建立屬性的動畫 |
如需物件的詳細資訊 Storyboard ，請參閱 分鏡腳本概觀 。
本機動畫
本機動畫提供方便的方式，讓任何 Animatable 物件的相依性屬性產生動畫效果。 當您想要將單一動畫套用至屬性，且您不需要在動畫啟動後以互動方式控制動畫時，請使用本機動畫。 Storyboard不同于動畫，本機動畫可以建立與 或 FrameworkContentElement 相關聯 FrameworkElement 之物件的動畫效果。 您也不需要為此類型的動畫定義 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
時鐘動畫
Clock當您想要在不使用 的情況下 Storyboard 產生動畫效果，而且想要在它們啟動時建立複雜的計時樹狀結構或以互動方式控制動畫時，請使用 物件。 您可以使用 Clock 物件，以動畫顯示任何 Animatable 物件的相依性屬性。
您無法直接使用 Clock 物件，在樣式、控制項範本或資料範本中產生動畫效果。 （動畫和計時系統實際上會使用 Clock 物件在樣式、控制項範本和資料範本中產生動畫效果，但它必須從 Storyboard 建立這些 Clock 物件。如需物件與物件之間 Storyboard 關聯性的詳細資訊，請參閱 動畫和計時系統概觀 Clock 。）
若要將單 Clock 一套用至屬性，請完成下列步驟。
建立 AnimationTimeline 物件。
CreateClock使用 的 AnimationTimeline 方法來建立 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 物件來建立計時樹狀結構。
CreateClock使用根 ParallelTimeline 的 來建立 ClockGroup 。
逐一 Children 查看 的 ClockGroup ，並套用其子 Clock 物件。 針對每個 AnimationClock 子系，請使用 ApplyAnimationClock 您想要建立動畫效果的物件方法，將 套用 AnimationClock 至您指定的屬性
如需時鐘物件的詳細資訊，請參閱動畫和計時系統概觀。
每一畫面格動畫：略過動畫和計時系統
當您需要完全略過 WPF 動畫系統時，請使用此方法。 此方法的一個案例為物理動畫，其中動畫的每個步驟需要根據最後一組物件互動來重新計算物件。
每一畫面格動畫無法在樣式、控制項範本或資料範本中定義。
若要以動畫顯示畫面，您可以註冊 Rendering 包含您要建立動畫效果之物件的 物件事件。 系統會針對每個畫面呼叫一次此事件處理常式方法。 每次 WPF 將視覺化樹狀結構中保存的轉譯資料封送處理至組合樹狀結構時，都會呼叫事件處理常式方法。
在事件處理常式中，執行動畫效果所需的任何計算，並使用這些值設定您想要建立動畫的物件屬性。
若要取得目前畫面的呈現時間， EventArgs 與此事件相關聯的 可以轉換成 RenderingEventArgs ，以提供 RenderingTime 屬性，讓您可用來取得目前畫面的轉譯時間。
如需詳細資訊，請參閱 Rendering 頁面。
另請參閱
意見反應
即將登場：在 2024 年，我們將逐步淘汰 GitHub 問題作為內容的意見反應機制，並將它取代為新的意見反應系統。 如需詳細資訊，請參閱：https://aka.ms/ContentUserFeedback。
提交並檢視相關的意見反應