Pfadanimationen – Übersicht

In diesem Thema werden Pfadanimationen vorgestellt, mit denen Sie einen geometrischen Pfad zum Generieren von Ausgabewerten verwenden können. Pfadanimationen eignen sich zum Verschieben und Drehen von Objekten entlang komplexer Pfade.

Voraussetzungen

Um dieses Thema zu verstehen, sollten Sie mit WPF-Animationsfeatures vertraut sein. Eine Einführung in Animationsfeatures finden Sie in der Animationsübersicht.

Da Sie ein PathGeometry Objekt zum Definieren einer Pfadanimation verwenden, sollten Sie auch mit PathGeometry den verschiedenen Objekttypen PathSegment vertraut sein. Weitere Informationen finden Sie unter Übersicht über die Geometrie.

Was ist eine Pfadanimation?

Eine Pfadanimation ist ein Typ von AnimationTimeline, der eine PathGeometry als Eingabe verwendet. Anstatt eine From-, To- oder By-Eigenschaft festzulegen (wie bei einer From/To/By-Animation) oder Keyframes zu verwenden (wie bei einer Keyframeanimation), definieren Sie einen geometrischen Pfad und verwenden Sie ihn, um die PathGeometry Eigenschaft der Pfadanimation festzulegen. Wenn die Pfadanimation fortschreitet, liest sie die x-, y- und Winkelinformationen aus dem Pfad und verwendet diese Informationen, um die Ausgabe zu generieren.

Pfadanimationen sind sehr nützlich zum Animieren eines Objekts entlang eines komplexen Pfads. Eine Möglichkeit, ein Objekt entlang eines Pfads zu bewegen, besteht darin, ein MatrixTransform und ein MatrixAnimationUsingPath zu verwenden, um ein Objekt entlang eines komplexen Pfads zu transformieren. Im folgenden Beispiel wird diese Technik veranschaulicht, indem das MatrixAnimationUsingPath Objekt verwendet wird, um die Matrix Eigenschaft eines Objekts MatrixTransformzu animieren. Die MatrixTransform wird auf eine Schaltfläche angewendet und bewirkt, dass sie sich entlang eines gekrümmten Pfads bewegt. Da die DoesRotateWithTangent-Eigenschaft auf truefestgelegt ist, wird das Rechteck entlang der Tangente des Pfads gedreht.

<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

Weitere Informationen zur Pfadsyntax, die im XAML-Beispiel verwendet wird, finden Sie in der Übersicht über die Pfadmarkierungssyntax . Das vollständige Beispiel finden Sie unter Beispiel für Pfadanimationen.

Sie können eine Pfadanimation auf eine Eigenschaft anwenden, indem Sie einen Storyboard XAML-Code oder die BeginAnimation Methode im Code verwenden. Sie können auch eine Pfadanimation verwenden, um ein AnimationClock zu erstellen und auf eine oder mehrere Eigenschaften anzuwenden. Weitere Informationen zu den verschiedenen Methoden zum Anwenden von Animationen finden Sie unter Property Animation Techniques Overview.

Pfadanimationstypen

Da Animationen Eigenschaftswerte generieren, gibt es unterschiedliche Animationstypen für unterschiedliche Eigenschaftstypen. Zum Animieren einer Eigenschaft, die eine Double (z. B. die X-Eigenschaft einer TranslateTransform) akzeptiert, verwenden Sie eine Animation, die Double-Werte erzeugt. Zum Animieren einer Eigenschaft, die ein Point nimmt, verwenden Sie eine Animation, die Point-Werte erzeugt, und so weiter.

Pfadanimationsklassen gehören zum System.Windows.Media.Animation Namespace und verwenden die folgende Benennungskonvention:

<Art>AnimationUsingPath

Wo <Typ> der Typ des Werts ist, den die Klasse animiert.

WPF stellt die folgenden Pfadanimationsklassen bereit.

Ein MatrixAnimationUsingPath generiert Matrix Werte aus seinem PathGeometry. Bei Verwendung mit einem MatrixTransformObjekt kann ein MatrixAnimationUsingPath Objekt entlang eines Pfads verschoben werden. Wenn Sie die DoesRotateWithTangent Eigenschaft des MatrixAnimationUsingPath Objekts auf "" truefestlegen, wird das Objekt auch entlang der Kurven des Pfads gedreht.

Ein PointAnimationUsingPath generiert Point Werte aus den x- und y-Koordinaten seiner PathGeometry. Durch die Verwendung von PointAnimationUsingPath zur Animation einer Eigenschaft, die Point Werte akzeptiert, können Sie ein Objekt entlang eines Pfades bewegen. PointAnimationUsingPath kann Objekte nicht drehen.

Ein DoubleAnimationUsingPath generiert Double Werte aus seinem PathGeometry. Durch Festlegen der Source Eigenschaft können Sie angeben, ob die DoubleAnimationUsingPath x-Koordinate, die Y-Koordinate oder der Winkel des Pfads als Ausgabe verwendet wird. Sie können ein DoubleAnimationUsingPath Objekt drehen oder es entlang der x-Achse oder der y-Achse verschieben.

Pfadanimationseingabe

Jede Pfadanimationsklasse stellt eine PathGeometry Eigenschaft zum Angeben der Eingabe bereit. Die Pfadanimation verwendet die PathGeometry, um ihre Ausgabewerte zu generieren. Mit der PathGeometry Klasse können Sie mehrere komplexe Figuren beschreiben, die aus Bögen, Kurven und Linien bestehen.

Im Zentrum eines PathGeometry steht eine Sammlung von PathFigure Objekten; diese Objekte sind so benannt, weil jede Figur eine diskrete Form in PathGeometry beschreibt. Jedes PathFigure besteht aus einem oder PathSegment mehreren Objekten, von denen jedes ein Segment der Abbildung beschreibt.

Es gibt viele Arten von Segmenten.

Die Segmente in a PathFigure werden in einer einzigen geometrischen Form kombiniert, die den Endpunkt eines Abschnitts als Ausgangspunkt des nächsten Abschnitts verwendet. Die StartPoint Eigenschaft eines PathFigure Objekts gibt den Punkt an, von dem das erste Segment gezeichnet wird. Jedes nachfolgende Segment beginnt am Endpunkt des vorherigen Abschnitts. Beispielsweise kann eine vertikale Linie von 10,50 zu 10,150 definiert werden, indem die StartPoint-Eigenschaft auf 10,50 festgelegt und ein LineSegment mit einer Point-Eigenschaftseinstellung von 10,150 erstellt wird.

Weitere Informationen zu PathGeometry Objekten finden Sie unter "Geometry Overview".

In XAML können Sie auch eine spezielle abgekürzte Syntax verwenden, um die Figures-Eigenschaft eines PathGeometry festzulegen. Weitere Informationen finden Sie unter Pfadmarkierungssyntax (Übersicht).

Weitere Informationen zur Pfadsyntax, die im XAML-Beispiel verwendet wird, finden Sie in der Übersicht über die Pfadmarkierungssyntax .

Siehe auch

• Beispiel für Pfadanimation
• Pfadmarkupsyntax
• Hilfe & Anleitung zur Pfadanimation
• Übersicht über Animationen
• Übersicht über die Verfahren zur Animation von Eigenschaften