路徑動畫概觀

本主題將介紹路徑動畫，它可讓您使用幾何路徑來產生輸出值。 路徑動畫很適合用來沿著複雜路徑移動和旋轉物件。

先決條件

若要了解本主題，您應該熟悉 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 命名空間，並使用下列命名慣例：

<類型>AnimationUsingPath

其中 <Type> 是該類別建立動畫的值類型。

WPF 提供下列路徑動畫類別。

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 物件，其中每一個物件都會描述圖表的線段。

區段的類型繁多。

PathFigure 中的線段會結合成單一幾何圖形，這個圖形會使用區段的結束點做為下一個線段的起始點。 StartPoint 的 PathFigure 屬性會指定繪製第一個線段的點。 每個後續區段都會從前一個區段的結束點開始。 例如，將 10,50 屬性設定為 10,150，並使用 StartPoint 的屬性設定 10,50 來建立 LineSegment，即可定義從 Point 到 10,150 的直立線符號。

如需有關 PathGeometry 物件的詳細資訊，請參閱幾何概觀。

在 XAML 中，您也可以使用特殊的縮寫語法來設定 Figures 的 PathGeometry 屬性。 如需詳細資訊，請參閱 路徑標記語法概觀。

如需 XAML 範例中所使用路徑語法的詳細資訊，請參閱路徑標記語法概觀。

另請參閱

• 路徑動畫範例
• 路徑標記語法
• 路徑動畫操作說明主題
• 動畫概觀
• 屬性動畫技術概觀