路徑動畫概觀
更新：2007 年 11 月
本主題將介紹路徑動畫，這種動畫可讓您使用幾何路徑產生輸出值。路徑動畫很適合用來沿著複雜路徑移動和旋轉物件。
本主題包含下列章節。
必要條件
若要了解本主題，您應該熟悉 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>
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 命名空間，使用下列命名慣例：
*<Type>*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 範例所用路徑語法的詳細資訊，請參閱路徑標記語法概觀。