動畫概觀
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 物件繼承自 DependencyObjectTabControl 。 這些項目的大部分屬性是相依性屬性。
您幾乎可以在任何地方 (包括在樣式和控制項範本中) 使用動畫。 動畫不必是視覺物件。如果不屬於使用者介面部分的物件符合本節所描述的準則,也可以以動畫顯示這些物件。
範例︰讓元素淡入又淡出畫面
這個範例示範如何使用 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.0
0.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.0
0.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 並使用 和 TargetNameTargetProperty 附加屬性來指定要產生動畫效果的物件和屬性。
建立 並 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 | 以 動畫顯示 WidthDockPanel 的 或 Height 的 Button 。 |
Point | PointAnimation | PointAnimationUsingKeyFrames | PointAnimationUsingPath | 以動畫顯示 Center 的位置 EllipseGeometry 。 |
String | 無 | StringAnimationUsingKeyFrames | 無 | 以 動畫顯示 TextTextBlock 的 或 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 指定的 物件和 TargetPropertyDoubleAnimation 屬性。 在此情況下,計時系統會將時鐘套用至 Opacity 名為 「MyRectangle」 的物件屬性。
雖然也會為 Storyboard 建立時鐘,但時鐘不會套用至任何屬性。 其用途是控制其子時鐘,這是針對 建立的 DoubleAnimation 時鐘。
若要讓動畫反映出資料繫結或動畫變更,就必須重新產生動畫的時鐘。 時鐘不會自動產生。 若要讓動畫反映變更,請使用 BeginStoryboard 或 Begin 方法重新套用其分鏡腳本。 當您使用其中一種方法時,動畫會重新啟動。 在程式碼中 Seek ,您可以使用 方法將分鏡腳本移回其先前的位置。
如需資料繫結動畫的範例,請參閱主要曲線動畫範例 (英文)。 如需動畫和計時系統如何運作的詳細資訊,請參閱動畫和計時系統概觀。
顯示動畫的其他方式
本概觀中的範例示範如何使用分鏡腳本顯示動畫。 當您使用程式碼時,可以使用其他幾種方式顯示動畫。 如需詳細資訊,請參閱屬性動畫技術概觀。
動畫範例
下列範例可以幫助您開始將動畫加入至您的應用程式。
-
示範不同 From/To/By 設定。
-
示範您可以控制動畫計時行為的不同方式。 此範例也示範如何資料繫結動畫的目的地值。
[相關主題]
標題 | 描述 |
---|---|
動畫和計時系統概觀 | 描述計時系統 Timeline 如何使用 和 Clock 類別,讓您建立動畫。 |
動畫祕訣和訣竅 | 列出解決動畫問題 (例如效能) 的有用祕訣。 |
自訂動畫概觀 | 描述如何使用主要畫面格、動畫類別或每個畫面格回呼來擴充動畫系統。 |
From/To/By 動畫概觀 | 描述如何建立在兩個值之間轉換的動畫。 |
主要畫面格動畫概觀 | 描述如何建立有多個目標值的動畫,包括控制插補方法的能力。 |
Easing 函式 | 說明如何對動畫套用數學公式以獲得實際的行為,例如彈跳。 |
路徑動畫概觀 | 描述如何沿著複雜路徑移動或旋轉物件。 |
屬性動畫技術概觀 | 描述使用分鏡腳本的屬性動畫、本機動畫、時鐘和每個畫面格動畫。 |
分鏡腳本概觀 | 描述如何使用有多個時間軸的分鏡腳本建立複雜的動畫。 |
計時行為概觀 | 描述 Timeline 動畫中使用的類型和屬性。 |
計時事件概觀 | 描述 和 Clock 物件上 Timeline 可用的事件,以在時間軸中的點執行程式碼,例如開始、暫停、繼續、略過或停止。 |
操作說明主題 | 包含在應用程式中使用動畫及時間軸的程式碼範例。 |
時鐘操作說明主題 | 包含在應用程式中使用 Clock 物件的程式碼範例。 |
主要畫面格操作說明主題 | 包含在應用程式中使用主要畫面格動畫的程式碼範例。 |
路徑動畫操作說明主題 | 包含在應用程式中使用路徑動畫的程式碼範例。 |
參考
意見反應
https://aka.ms/ContentUserFeedback。
即將登場:在 2024 年,我們將逐步淘汰 GitHub 問題作為內容的意見反應機制,並將它取代為新的意見反應系統。 如需詳細資訊,請參閱:提交並檢視相關的意見反應