Przegląd Animacja ścieżki

W tym temacie przedstawiono animacje ścieżek, które umożliwiają używanie ścieżki geometrycznej do generowania wartości wyjściowych. Animacje ścieżek są przydatne do przenoszenia i obracania obiektów wzdłuż złożonych ścieżek.

Wymagania wstępne

Aby zrozumieć ten temat, należy zapoznać się z funkcjami animacji WPF. Aby zapoznać się z wprowadzeniem do funkcji animacji, zobacz Omówienie animacji.

Ponieważ używasz PathGeometry obiektu do definiowania animacji ścieżki, należy również zapoznać się z różnymi typami PathGeometryPathSegment obiektów. Aby uzyskać więcej informacji, zobacz Geometry Overview (Omówienie geometrii).

Co to jest animacja ścieżki?

Animacja ścieżki jest typem AnimationTimeline , który używa elementu PathGeometry jako danych wejściowych. Zamiast ustawiać właściwość From, To lub By (tak jak w przypadku animacji From/To/By) lub przy użyciu klatek kluczowych (w przypadku animacji klatek kluczowych) należy zdefiniować ścieżkę geometryczną i użyć jej do ustawienia PathGeometry właściwości animacji ścieżki. W miarę postępu animacji ścieżki odczytuje informacje x, y i kąta ze ścieżki i używa tych informacji do wygenerowania danych wyjściowych.

Animacje ścieżek są bardzo przydatne do animowania obiektu wzdłuż złożonej ścieżki. Jednym ze sposobów przenoszenia obiektu wzdłuż ścieżki jest użycie obiektu MatrixTransform i , MatrixAnimationUsingPath aby przekształcić obiekt wzdłuż złożonej ścieżki. W poniższym przykładzie pokazano tę technikę przy użyciu MatrixAnimationUsingPath obiektu w celu animowania Matrix właściwości obiektu MatrixTransform. Element MatrixTransform jest stosowany do przycisku i powoduje, że porusza się wzdłuż ścieżki zakrzywionej. DoesRotateWithTangent Ponieważ właściwość jest ustawiona na true, prostokąt obraca się wzdłuż tangensu ścieżki.

<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

Aby uzyskać więcej informacji na temat składni ścieżki używanej w przykładzie XAML, zobacz Omówienie składni znaczników ścieżki . Pełny przykład można znaleźć w temacie Path Animation Sample (Przykład animacji ścieżki).

Animację ścieżki można zastosować do właściwości przy użyciu Storyboard elementu w języku XAML i kodzie lub przy użyciu BeginAnimation metody w kodzie. Możesz również użyć animacji ścieżki, aby utworzyć obiekt AnimationClock i zastosować go do co najmniej jednej właściwości. Aby uzyskać więcej informacji na temat różnych metod stosowania animacji, zobacz Omówienie technik animacji właściwości.

Typy animacji ścieżki

Ponieważ animacje generują wartości właściwości, istnieją różne typy animacji dla różnych typów właściwości. Aby animować właściwość , która przyjmuje Double wartość (taką jak X właściwość obiektu TranslateTransform), należy użyć animacji, która generuje Double wartości. Aby animować właściwość, która przyjmuje Pointelement , należy użyć animacji, która generuje Point wartości itd.

Klasy animacji ścieżki należą do System.Windows.Media.Animation przestrzeni nazw i używają następującej konwencji nazewnictwa:

<Typ>AnimationUsingPath

Gdzie <Type> to typ wartości, którą animuje klasa.

WPF udostępnia następujące klasy animacji ścieżki.

Typ właściwości	Odpowiednia klasa animacji ścieżki	Przykład
Double	DoubleAnimationUsingPath	Animowanie obiektu na ścieżce (animacja double)
Matrix	MatrixAnimationUsingPath	Animowanie obiektu na ścieżce (animacja Matrix)
Point	PointAnimationUsingPath	Animowanie obiektu na ścieżce (animacja punktu)

Element generuje MatrixAnimationUsingPathMatrix wartości na podstawie elementu PathGeometry. W przypadku użycia z elementem MatrixTransformobiekt MatrixAnimationUsingPath może przenosić obiekt wzdłuż ścieżki. Jeśli ustawisz DoesRotateWithTangent właściwość na MatrixAnimationUsingPathtruewartość , również obraca obiekt wzdłuż krzywych ścieżki.

Obiekt PointAnimationUsingPath generuje Point wartości na podstawie współrzędnych x i y jego PathGeometrywartości . Używając elementu PointAnimationUsingPath do animowania właściwości, która przyjmuje Point wartości, można przenieść obiekt wzdłuż ścieżki. Obiekt PointAnimationUsingPath nie może obracać się.

Element generuje DoubleAnimationUsingPathDouble wartości na podstawie elementu PathGeometry. Ustawiając Source właściwość, można określić, czy DoubleAnimationUsingPath jako dane wyjściowe używa współrzędnych x, współrzędnych y, czy kąta ścieżki. Można użyć obiektu DoubleAnimationUsingPath , aby obrócić obiekt lub przenieść go wzdłuż osi x lub osi y.

Dane wejściowe animacji ścieżki

Każda klasa animacji ścieżki udostępnia PathGeometry właściwość określającą jego dane wejściowe. Animacja ścieżki używa elementu , PathGeometry aby wygenerować wartości wyjściowe. Klasa PathGeometry umożliwia opisywanie wielu złożonych postaci składających się z łuków, krzywych i linii.

W centrum obiektu PathGeometry jest kolekcją PathFigure obiektów; te obiekty są tak nazwane, ponieważ każdy rysunek opisuje dyskretny kształt w obiekcie PathGeometry. Każdy z nich PathFigure składa się z co najmniej jednego PathSegment obiektu, z których każdy opisuje segment rysunku.

Istnieje wiele typów segmentów.

Typ segmentu	opis
ArcSegment	Tworzy wielokropek łuku między dwoma punktami.
BezierSegment	Tworzy krzywą beziera sześcienną między dwoma punktami.
LineSegment	Tworzy linię między dwoma punktami.
PolyBezierSegment	Tworzy serię sześciennych krzywych Beziera.
PolyLineSegment	Tworzy serię wierszy.
PolyQuadraticBezierSegment	Tworzy serię krzywych Beziera kwadratowego.
QuadraticBezierSegment	Tworzy krzywą Beziera kwadratowego.

Segmenty w obiekcie PathFigure są łączone w jeden kształt geometryczny, który używa punktu końcowego segmentu jako punktu początkowego następnego segmentu. Właściwość StartPoint obiektu PathFigure określa punkt, z którego jest rysowany pierwszy segment. Każdy kolejny segment rozpoczyna się od punktu końcowego poprzedniego segmentu. Można na przykład zdefiniować pionową linię z 10,50 do 10,150 , ustawiając StartPoint właściwość na 10,50 i tworząc element LineSegment z ustawieniem Point10,150właściwości .

Aby uzyskać więcej informacji na temat PathGeometry obiektów, zobacz Geometry Overview (Omówienie geometrii).

W języku XAML można również użyć specjalnej skróconej składni, aby ustawić Figures właściwość PathGeometry. Aby uzyskać więcej informacji, zobacz Path Markup Syntax overview (Omówienie składni znaczników ścieżki).

Aby uzyskać więcej informacji na temat składni ścieżki używanej w przykładzie XAML, zobacz Omówienie składni znaczników ścieżki .

Zobacz też

• Przykład animacji ścieżki
• Składnia znacznikowania ścieżki
• Animacja ścieżki — tematy z instrukcjami
• Animacja — przegląd
• Techniki animacji właściwości — przegląd