路徑動畫概觀
本主題將介紹路徑動畫，它可讓您使用幾何路徑來產生輸出值。 路徑動畫很適合用來沿著複雜路徑移動和旋轉物件。
必要條件
若要了解本主題，您應該熟悉 WPF 動畫功能。 如需動畫功能的簡介，請參閱 動畫概觀。
因為您使用 PathGeometry 物件來定義路徑動畫，所以您也應該熟悉 PathGeometry 和不同類型的 PathSegment 物件。 如需詳細資訊，請參閱 幾何概觀。
什麼是路徑動畫？
路徑動畫是 AnimationTimeline 的類型，會使用 PathGeometry 做為其輸入。 相對於 (針對 From/To/By 動畫) 設定 From、To 或 By 屬性，或 (針對主要畫面格動畫) 使用主要畫面格，您會定義幾何路徑並使用其設定路徑動畫的 PathGeometry 屬性。 路徑動畫進行時，它會讀取路徑中的 X、Y 和角度資訊，並使用該資訊產生其輸出。
路徑動畫非常適合用來沿著複雜路徑建立物件的動畫。 沿著路徑移動物件的其中一種方式，是使用 MatrixTransform 和 MatrixAnimationUsingPath，沿著複雜路徑轉換物件。 下列範例示範這項技術，方法是使用 MatrixAnimationUsingPath 物件以動畫顯示 Matrix 的 MatrixTransform 屬性。
MatrixTransform 會套用至按鈕並使其沿曲線路徑移動。
DoesRotateWithTangent 由於屬性設定為 true，因此矩形會沿著路徑的正切值旋轉。
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="PresentationOptions" Margin="20">
<Canvas Width="400" Height="400">
<!-- The Button that is animated across the screen by animating
the MatrixTransform applied to the button. -->
<Button MinWidth="100" Content="A Button">
<Button.RenderTransform>
<MatrixTransform x:Name="ButtonMatrixTransform">
<MatrixTransform.Matrix >
<Matrix />
</MatrixTransform.Matrix>
</MatrixTransform>
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Loaded">
<BeginStoryboard>
<Storyboard>
<MatrixAnimationUsingPath
Storyboard.TargetName="ButtonMatrixTransform"
Storyboard.TargetProperty="Matrix"
DoesRotateWithTangent="True"
Duration="0:0:5"
RepeatBehavior="Forever" >
<MatrixAnimationUsingPath.PathGeometry>
<PathGeometry
Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"
PresentationOptions:Freeze="True" />
</MatrixAnimationUsingPath.PathGeometry>
</MatrixAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Canvas>
</Page>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace SDKSample
{
/// <summary>
/// Shows how to animate an object along
/// a geometric path.
/// </summary>
public class MatrixAnimationUsingPathDoesRotateWithTangentExample : Page
{
public MatrixAnimationUsingPathDoesRotateWithTangentExample()
{
this.Margin = new Thickness(20);
// Create a NameScope for the page so that
// we can use Storyboards.
NameScope.SetNameScope(this, new NameScope());
// Create a button.
Button aButton = new Button();
aButton.MinWidth = 100;
aButton.Content = "A Button";
// Create a MatrixTransform. This transform
// will be used to move the button.
MatrixTransform buttonMatrixTransform = new MatrixTransform();
aButton.RenderTransform = buttonMatrixTransform;
// Register the transform's name with the page
// so that it can be targeted by a Storyboard.
this.RegisterName("ButtonMatrixTransform", buttonMatrixTransform);
// Create a Canvas to contain the button
// and add it to the page.
// Although this example uses a Canvas,
// any type of panel will work.
Canvas mainPanel = new Canvas();
mainPanel.Width = 400;
mainPanel.Height = 400;
mainPanel.Children.Add(aButton);
this.Content = mainPanel;
// Create the animation path.
PathGeometry animationPath = new PathGeometry();
PathFigure pFigure = new PathFigure();
pFigure.StartPoint = new Point(10, 100);
PolyBezierSegment pBezierSegment = new PolyBezierSegment();
pBezierSegment.Points.Add(new Point(35, 0));
pBezierSegment.Points.Add(new Point(135, 0));
pBezierSegment.Points.Add(new Point(160, 100));
pBezierSegment.Points.Add(new Point(180, 190));
pBezierSegment.Points.Add(new Point(285, 200));
pBezierSegment.Points.Add(new Point(310, 100));
pFigure.Segments.Add(pBezierSegment);
animationPath.Figures.Add(pFigure);
// Freeze the PathGeometry for performance benefits.
animationPath.Freeze();
// Create a MatrixAnimationUsingPath to move the
// button along the path by animating
// its MatrixTransform.
MatrixAnimationUsingPath matrixAnimation =
new MatrixAnimationUsingPath();
matrixAnimation.PathGeometry = animationPath;
matrixAnimation.Duration = TimeSpan.FromSeconds(5);
matrixAnimation.RepeatBehavior = RepeatBehavior.Forever;
// Set the animation's DoesRotateWithTangent property
// to true so that rotates the rectangle in addition
// to moving it.
matrixAnimation.DoesRotateWithTangent = true;
// Set the animation to target the Matrix property
// of the MatrixTransform named "ButtonMatrixTransform".
Storyboard.SetTargetName(matrixAnimation, "ButtonMatrixTransform");
Storyboard.SetTargetProperty(matrixAnimation,
new PropertyPath(MatrixTransform.MatrixProperty));
// Create a Storyboard to contain and apply the animation.
Storyboard pathAnimationStoryboard = new Storyboard();
pathAnimationStoryboard.Children.Add(matrixAnimation);
// Start the storyboard when the button is loaded.
aButton.Loaded += delegate(object sender, RoutedEventArgs e)
{
// Start the storyboard.
pathAnimationStoryboard.Begin(this);
};
}
}
}
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Navigation
Imports System.Windows.Shapes
Namespace SDKSample
''' <summary>
''' Shows how to animate an object along
''' a geometric path.
''' </summary>
Public Class MatrixAnimationUsingPathDoesRotateWithTangentExample
Inherits Page
Public Sub New()
Me.Margin = New Thickness(20)
' Create a NameScope for the page so that
' we can use Storyboards.
NameScope.SetNameScope(Me, New NameScope())
' Create a button.
Dim aButton As New Button()
aButton.MinWidth = 100
aButton.Content = "A Button"
' Create a MatrixTransform. This transform
' will be used to move the button.
Dim buttonMatrixTransform As New MatrixTransform()
aButton.RenderTransform = buttonMatrixTransform
' Register the transform's name with the page
' so that it can be targeted by a Storyboard.
Me.RegisterName("ButtonMatrixTransform", buttonMatrixTransform)
' Create a Canvas to contain the button
' and add it to the page.
' Although this example uses a Canvas,
' any type of panel will work.
Dim mainPanel As New Canvas()
mainPanel.Width = 400
mainPanel.Height = 400
mainPanel.Children.Add(aButton)
Me.Content = mainPanel
' Create the animation path.
Dim animationPath As New PathGeometry()
Dim pFigure As New PathFigure()
pFigure.StartPoint = New Point(10, 100)
Dim pBezierSegment As New PolyBezierSegment()
pBezierSegment.Points.Add(New Point(35, 0))
pBezierSegment.Points.Add(New Point(135, 0))
pBezierSegment.Points.Add(New Point(160, 100))
pBezierSegment.Points.Add(New Point(180, 190))
pBezierSegment.Points.Add(New Point(285, 200))
pBezierSegment.Points.Add(New Point(310, 100))
pFigure.Segments.Add(pBezierSegment)
animationPath.Figures.Add(pFigure)
' Freeze the PathGeometry for performance benefits.
animationPath.Freeze()
' Create a MatrixAnimationUsingPath to move the
' button along the path by animating
' its MatrixTransform.
Dim matrixAnimation As New MatrixAnimationUsingPath()
matrixAnimation.PathGeometry = animationPath
matrixAnimation.Duration = TimeSpan.FromSeconds(5)
matrixAnimation.RepeatBehavior = RepeatBehavior.Forever
' Set the animation's DoesRotateWithTangent property
' to true so that rotates the rectangle in addition
' to moving it.
matrixAnimation.DoesRotateWithTangent = True
' Set the animation to target the Matrix property
' of the MatrixTransform named "ButtonMatrixTransform".
Storyboard.SetTargetName(matrixAnimation, "ButtonMatrixTransform")
Storyboard.SetTargetProperty(matrixAnimation, New PropertyPath(MatrixTransform.MatrixProperty))
' Create a Storyboard to contain and apply the animation.
Dim pathAnimationStoryboard As New Storyboard()
pathAnimationStoryboard.Children.Add(matrixAnimation)
' Start the storyboard when the button is loaded.
AddHandler aButton.Loaded, Sub(sender As Object, e As RoutedEventArgs) pathAnimationStoryboard.Begin(Me)
End Sub
End Class
End Namespace
如需 XAML 範例中所使用路徑語法的詳細資訊，請參閱路徑標記語法概觀。 如需完整的範例，請參閱 路徑動畫範例。
您可以在 XAML 和程式碼中使用 Storyboard，或在程式碼中使用 BeginAnimation 方法，將路徑動畫套用至屬性。 您也可以使用路徑動畫建立 AnimationClock，然後將其套用至一或多個屬性。 如需套用動畫之不同方法的詳細資訊，請參閱 屬性動畫技術概觀。
路徑動畫類型
由於動畫會產生屬性值，因此針對不同的屬性類型會有不同的動畫類型。 若要以動畫顯示採用 Double 的屬性 (例如 X 的 TranslateTransform 屬性)，請使用會產生 Double 值的動畫。 若要以動畫顯示採用 Point 的屬性，您可以使用會產生 Point 值的動畫，依此類推。
路徑動畫類別屬於 System.Windows.Media.Animation 命名空間，並使用下列命名慣例：
<Type>AnimationUsingPath
其中 <Type> 是該類別建立動畫的值類型。
WPF 提供下列路徑動畫類別。
| 屬性類型 | 對應路徑動畫類別 | 範例 |
|---|---|---|
| Double | DoubleAnimationUsingPath | 沿著路徑建立物件的動畫 (Double 動畫) |
| Matrix | MatrixAnimationUsingPath | 沿著路徑建立物件的動畫 (矩陣動畫) |
| Point | PointAnimationUsingPath | 沿著路徑建立物件的動畫 (點動畫) |
MatrixAnimationUsingPath 會從其 Matrix 產生 PathGeometry 值。 搭配 MatrixTransform 使用時，MatrixAnimationUsingPath 可以沿著路徑移動物件。 如果您將 DoesRotateWithTangent 的 MatrixAnimationUsingPath 屬性設定為 true，則其也會沿著路徑的曲線旋轉物件。
PointAnimationUsingPath 會從其 Point 的 x 和 y 座標產生 PathGeometry 值。 您可以使用 PointAnimationUsingPath 以動畫顯示接受 Point 值的屬性，沿著路徑移動物件。 PointAnimationUsingPath 無法旋轉物件。
DoubleAnimationUsingPath 會從其 Double 產生 PathGeometry 值。 您可以設定 Source 屬性，指定 DoubleAnimationUsingPath 是使用 X 座標、Y 座標還是路徑的角度做為其輸出。 您可以使用 DoubleAnimationUsingPath 來旋轉物件，或沿著 X 軸或 Y 軸移動物件。
路徑動畫輸入
每個路徑動畫類別都會提供 PathGeometry 屬性來指定其輸入。 路徑動畫會使用 PathGeometry 來產生其輸出值。 PathGeometry 類別可讓您描述由弧線、曲線和線條所組成的複雜圖表。
PathGeometry 的核心是 PathFigure 物件的集合；這些物件如此命名，是因為每個圖表都會描述 PathGeometry 中的離散圖形。 每個 PathFigure 都包含一或多個 PathSegment 物件，其中每一個物件都會描述圖表的線段。
區段的類型繁多。
| 區段類型 | 描述 |
|---|---|
| ArcSegment | 在兩個點之間建立橢圓形弧線。 |
| BezierSegment | 在兩個點之間建立三次方貝茲曲線。 |
| LineSegment | 在兩個點之間建立線條。 |
| PolyBezierSegment | 建立一系列三次方貝茲曲線。 |
| PolyLineSegment | 建立一系列的線條。 |
| PolyQuadraticBezierSegment | 建立一系列二次方貝茲曲線。 |
| QuadraticBezierSegment | 建立二次方貝茲曲線。 |
PathFigure 中的線段會結合成單一幾何圖形，這個圖形會使用區段的結束點做為下一個線段的起始點。
StartPoint 的 PathFigure 屬性會指定繪製第一個線段的點。 每個後續區段都會從前一個區段的結束點開始。 例如，將 10,50 屬性設定為 10,150，並使用 StartPoint 的屬性設定 10,50 來建立 LineSegment，即可定義從 Point 到 10,150 的直立線符號。
如需有關 PathGeometry 物件的詳細資訊，請參閱幾何概觀。
在 XAML 中，您也可以使用特殊的縮寫語法來設定 Figures 的 PathGeometry 屬性。 如需詳細資訊，請參閱 路徑標記語法概觀。
如需 XAML 範例中所使用路徑語法的詳細資訊，請參閱路徑標記語法概觀。
