路徑動畫概觀
本主題將介紹路徑動畫，它可讓您使用幾何路徑來產生輸出值。 路徑動畫很適合用來沿著複雜路徑移動和旋轉物件。
必要條件
若要瞭解本主題，您應該熟悉 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="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 和程式碼中使用 ，或使用 BeginAnimation 程式碼中的 方法，將路徑動畫套用至屬性 Storyboard 。 您也可以使用路徑動畫來建立 AnimationClock ，並將它套用至一或多個屬性。 如需套用動畫之不同方法的詳細資訊，請參閱 屬性動畫技術概觀。
路徑動畫類型
由於動畫會產生屬性值，因此針對不同的屬性類型會有不同的動畫類型。 若要以動畫顯示接受 Double 的屬性（例如 X 的 TranslateTransform 屬性），您可以使用產生 Double 值的動畫。 若要以動畫顯示採用 Point 的屬性，您可以使用產生 Point 值的動畫等等。
路徑動畫類別屬於 命名空間， System.Windows.Media.Animation 並使用下列命名慣例：
<類型>AnimationUsingPath
其中 < Type > 是類別動畫的數值型別。
WPF 提供下列路徑動畫類別。
| 屬性類型 | 對應路徑動畫類別 | 範例 |
|---|---|---|
| Double | DoubleAnimationUsingPath | 沿著路徑建立物件的動畫 (Double 動畫) |
| Matrix | MatrixAnimationUsingPath | 沿著路徑建立物件的動畫 (矩陣動畫) |
| Point | PointAnimationUsingPath | 沿著路徑建立物件的動畫 (點動畫) |
MatrixAnimationUsingPath從其 PathGeometry 產生 Matrix 值。 搭配 MatrixTransform 使用 時， MatrixAnimationUsingPath 可以沿著路徑移動物件。 如果您將 DoesRotateWithTangent 的 MatrixAnimationUsingPath 屬性設定為 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 物件，其中每一個物件都會描述圖形的區段。
區段的類型繁多。
| 區段類型 | 描述 |
|---|---|
| ArcSegment | 在兩個點之間建立橢圓形弧線。 |
| BezierSegment | 在兩個點之間建立三次方貝茲曲線。 |
| LineSegment | 在兩個點之間建立線條。 |
| PolyBezierSegment | 建立一系列三次方貝茲曲線。 |
| PolyLineSegment | 建立一系列的線條。 |
| PolyQuadraticBezierSegment | 建立一系列二次方貝茲曲線。 |
| QuadraticBezierSegment | 建立二次方貝茲曲線。 |
中的 PathFigure 區段會合並成單一幾何圖形，它會使用線段的終點做為下一個線段的起點。 的 StartPointPathFigure 屬性會指定繪製第一個線段的點。 每個後續區段都會從前一個區段的結束點開始。 例如，將 屬性設定 StartPoint 為 ，並使用 的 屬性設定 10,150 來建立 LineSegmentPoint ，即可定義從 10,50 到 10,150 的垂直 10,50 線。
如需物件的詳細資訊 PathGeometry ，請參閱 Geometry 概觀 。
在 XAML 中，您也可以使用特殊的縮寫語法來設定 Figures 的 PathGeometry 屬性。 如需詳細資訊，請參閱 路徑標記語法概觀。
如需 XAML 範例中使用的路徑語法詳細資訊，請參閱 路徑標記語法 概觀。
另請參閱
意見反應
即將登場：在 2024 年，我們將逐步淘汰 GitHub 問題作為內容的意見反應機制，並將它取代為新的意見反應系統。 如需詳細資訊，請參閱：https://aka.ms/ContentUserFeedback。
提交並檢視相關的意見反應