路徑動畫概觀
本主題將介紹路徑動畫，這種動畫可讓您使用幾何路徑產生輸出值。 路徑動畫很適合用來沿著複雜路徑移動和旋轉物件。
必要條件
若要了解本主題，您應該熟悉 WPF 動畫功能。 如需動畫功能的簡介，請參閱動畫概觀。
由於您會使用 PathGeometry 物件來定義路徑動畫，因此也應該熟悉 PathGeometry 和不同類型的 PathSegment 物件。 如需詳細資訊，請參閱 幾何概觀。
什麼是路徑動畫
路徑動畫是一種 AnimationTimeline，會使用 PathGeometry 做為其輸出。 您不會設定 From、To 或 By 屬性 (如 From/To/By 動畫) 或使用主要畫面格 (如主要畫面格動畫)，而是定義幾何路徑並用它來設定路徑動畫的 PathGeometry 屬性。 隨著路徑動畫進行，它會從路徑讀取 X、Y 和角度資訊，然後使用這些資訊產生其輸出。
路徑動畫很適合用來沿著複雜路徑顯示物件的動畫。 沿著路徑移動物件的一種方法是使用 MatrixTransform 和 MatrixAnimationUsingPath 沿著複雜路徑轉換物件。 下列範例即示範這種方法，使用 MatrixAnimationUsingPath 物件將 MatrixTransform 的 Matrix 屬性顯示為動畫。 MatrixTransform 會套用到按鈕，讓它沿著曲線路徑移動。 由於 DoesRotateWithTangent 屬性設為 true，矩形會沿著路徑的正切旋轉。
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:PresentationOptions="https://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:mc="https://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>
Imports System
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
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);
};
}
}
}
如需 XAML 範例所用路徑語法的詳細資訊，請參閱路徑標記語法概觀。如需完整範例，請參閱路徑動畫範例 (英文)。
要將路徑動畫套用到屬性，可以在 XAML 和程式碼中使用 Storyboard，或在程式碼中使用 BeginAnimation 方法。 您也可以使用路徑動畫建立 AnimationClock，然後將它套用到一或多個屬性。 如需套用動畫之不同方法的詳細資訊，請參閱建立屬性動畫技術概觀。
路徑動畫型別
由於動畫會產生屬性值，因此屬性型別不同，動畫型別也不同。 如果要讓使用 Double 的屬性 (例如 TranslateTransform 的 X 屬性) 顯示動畫，請使用會產生 Double 值的動畫。 如果要讓使用 Point 的屬性顯示動畫，請使用會產生 Point 值的動畫，依此類推。
路徑動畫類別屬於 System.Windows.Media.Animation 命名空間，使用下列命名慣例：
*<型別>*AnimationUsingPath
其中 <Type> 是類別顯示為動畫之值的型別。
WPF 提供下列路徑動畫類別。
屬性型別 |
對應的路徑動畫類別 |
範例 |
|---|---|---|
MatrixAnimationUsingPath 會從其 PathGeometry 產生 Matrix 值。 當與 MatrixTransform 一起使用時，MatrixAnimationUsingPath 可將物件移著路徑移動。 如果將 MatrixAnimationUsingPath 的 DoesRotateWithTangent 屬性設為 true，則它也會沿著路徑的曲線旋轉物件。
PointAnimationUsingPath 會從其 PathGeometry 的 X 和 Y 座標產生 Point 值。 藉由使用 PointAnimationUsingPath 讓使用 Point 值的屬性顯示動畫，您可以將物件沿著路徑移動。 PointAnimationUsingPath 無法旋轉物件。
DoubleAnimationUsingPath 會從其 PathGeometry 產生 Double 值。 藉由設定 Source 屬性，您可以指定 DoubleAnimationUsingPath 要使用路徑的 X 座標、Y 座標或角度做為其輸出。 您可以使用 DoubleAnimationUsingPath 沿著 X 軸或 Y 軸旋轉或移動物件。
路徑動畫輸出
每個路徑動畫類別都提供 PathGeometry 屬性可指定其輸出。 路徑動畫會使用 PathGeometry 產生輸出值。 PathGeometry 類別可讓您描述由弧形、曲線和線條的多個複雜圖形。
PathGeometry 的核心是一組 PathFigure 物件，這些物件會如此命名，是因為每個圖形都會描述 PathGeometry 中的不同形狀。 每個 PathFigure 都包含一或多個 PathSegment 物件，而每個物件都描述圖形的某一個區段。
區段有許多種。
區段類型 |
說明 |
|---|---|
在兩點之間建立橢圓弧形。 |
|
在兩點之間建立立方貝茲曲線。 |
|
在兩點之間建立線條。 |
|
建立一系列的立方貝茲曲線。 |
|
建立一系列線條。 |
|
建立一系列二次貝茲曲線。 |
|
建立一條二次貝茲曲線。 |
PathFigure 中的區段可以合併成單一幾何形狀，使用一個區段的終點做為下一個區段的起點。 PathFigure 的 StartPoint 屬性會指定繪製第一個區段的起點。 後續的區段再從前一個區段的終點開始。 例如，要定義 10,50 到 10,150 的垂直線，可以將 StartPoint 屬性設為 10,50，然後建立 LineSegment，並將其 Point 屬性設為 10,150。
如需 PathGeometry 物件的詳細資訊，請參閱幾何概觀。
在 XAML 中，您也可以使用特殊的縮寫語法，來設定 PathGeometry 的 Figures 屬性。 如需詳細資訊，請參閱路徑標記語法概觀。
如需 XAML 範例所用路徑語法的詳細資訊，請參閱路徑標記語法概觀。