Übersicht über Pfadanimationen
In diesem Thema werden Pfadanimationen beschrieben, die Ihnen ermöglichen, mithilfe eines geometrischen Pfads Ausgabewerte zu generieren. Pfadanimationen eignen sich zum Verschieben und Drehen von Objekten auf komplexen Pfaden.
Voraussetzungen
Als Voraussetzung für dieses Thema sollten Sie mit WPF-Animationsfunktionen vertraut sein. Eine Einführung in Animationsfunktionen finden Sie unter Übersicht über Animationen.
Da Sie ein PathGeometry-Objekt zum Definieren einer Pfadanimation verwenden, sollten Sie außerdem mit PathGeometry und den verschiedenen Typen von PathSegment-Objekten 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 für eine From-, To- oder By-Animation) oder Keyframes zu verwenden (wie bei einer Keyframe-Animation), definieren Sie einen geometrischen Pfad und verwenden ihn zum Festlegen der PathGeometry-Eigenschaft der Pfadanimation. Die Pfadanimation liest im Verlauf die x-, y- und Winkelinformationen aus dem Pfad und generiert mithilfe dieser Informationen ihre Ausgabe.
Pfadanimationen sind sehr nützlich, um ein Objekt auf einem komplexen Pfad zu animieren. Eine Möglichkeit, ein Objekt entlang eines Pfads zu bewegen, besteht darin, eine MatrixTransform und einen MatrixAnimationUsingPath zu verwenden, um ein Objekt entlang eines komplexen Pfads zu transformieren. Das folgende Beispiel veranschaulicht diese Technik mithilfe des MatrixAnimationUsingPath-Objekts zum Animieren der Matrix-Eigenschaft einer MatrixTransform. Die MatrixTransform wird auf eine Schaltfläche angewendet und bewirkt, dass sie sich entlang eines gewundenen Pfads bewegt. Da die DoesRotateWithTangent-Eigenschaft auf true festgelegt ist, dreht sich das Rechteck entlang der Tangente des Pfads.
<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 zur Pfadmarkupsyntax. Das vollständige Beispiel finden Sie unter Beispiel für Pfadanimationen.
Sie können eine Pfadanimation auf eine Eigenschaft anwenden, indem Sie ein Storyboard in XAML und Code oder die BeginAnimation-Methode im Code verwenden. Sie können eine Pfadanimation darüber hinaus verwenden, um eine AnimationClock zu erstellen und auf eine oder mehrere Eigenschaften anzuwenden. Weitere Informationen zu den verschiedenen Methoden zum Anwenden von Animationen finden Sie in der Übersicht über die Verfahren zur Animation von Eigenschaften.
Pfadanimationstypen
Da Animationen Eigenschaftswerte generieren, gibt es für die einzelnen Eigenschaftentypen unterschiedliche Animationstypen. Zum Animieren einer Eigenschaft, die ein Double annimmt (wie etwa die X-Eigenschaft einer TranslateTransform), verwenden Sie eine Animation, die Double-Werte erzeugt. Zum Animieren einer Eigenschaft, die einen Point annimmt, verwenden Sie eine Animation, die Point-Werte erzeugt, und so weiter.
Pfadanimationsklassen gehören zum System.Windows.Media.Animation-Namespace und verwenden folgende Benennungskonvention:
<Typ> AnimationUsingPath
Wobei <Typ> der Wertetyp ist, den die Klasse animiert.
WPF bietet folgende Pfadanimationsklassen.
| Eigenschaftstyp | Entsprechende Pfadanimationsklasse | Beispiel |
|---|---|---|
| Double | DoubleAnimationUsingPath | Verschieben eines Objekts auf einem Pfad (Doppelanimation) |
| Matrix | MatrixAnimationUsingPath | Animieren eines Objekts auf einem Pfad (Matrixanimation) |
| Point | PointAnimationUsingPath | Animieren eines Objekts entlang eines Pfads (Punktanimation) |
Ein MatrixAnimationUsingPath generiert Matrix-Werte aus seiner PathGeometry. In Kombination mit einer MatrixTransform kann ein MatrixAnimationUsingPath ein Objekt entlang eines Pfads bewegen. Wenn Sie die DoesRotateWithTangent-Eigenschaft des MatrixAnimationUsingPath auf true festlegen, dreht er das Objekt außerdem in den Kurven des Pfads.
Ein PointAnimationUsingPath generiert Point-Werte aus den x- und y-Koordinaten seiner PathGeometry. Durch Verwenden eines PointAnimationUsingPath zum Animieren einer Eigenschaft, die Point-Werte annimmt, können Sie ein Objekt entlang eines Pfads bewegen. Ein PointAnimationUsingPath kann keine Objekte drehen.
Ein DoubleAnimationUsingPath generiert Double-Werte aus seiner PathGeometry. Durch Festlegen der Source-Eigenschaft können Sie angeben, ob der DoubleAnimationUsingPath die X-Koordinate, Y-Koordinate oder den Winkel des Pfads als Ausgabe verwendet. Sie können einen DoubleAnimationUsingPath verwenden, um ein Objekt zu drehen oder es entlang der X-Achse oder Y-Achse zu bewegen.
Pfadanimationseingabe
Jede Pfadanimationsklasse bietet eine PathGeometry-Eigenschaft zum Angeben ihrer Eingabe. Die Pfadanimation verwendet die PathGeometry zum Generieren ihrer Ausgabewerte. Mit der PathGeometry-Klasse können Sie mehrere komplexe Figuren beschreiben, die aus Bögen, Kurven und Linien bestehen.
Im Zentrum einer PathGeometry steht eine Sammlung von PathFigure-Objekten. Diese Objekte heißen so, weil jede Figur eine diskrete Form in der PathGeometry beschreibt. Jede PathFigure besteht aus einem oder mehreren PathSegment-Objekten, von denen jedes ein Segment der Figur beschreibt.
Es gibt viele Arten von Segmenten.
| Segmenttyp | BESCHREIBUNG |
|---|---|
| ArcSegment | Erstellt einen elliptischen Bogen zwischen zwei Punkten. |
| BezierSegment | Erstellt eine kubische Bézierkurve zwischen zwei Punkten. |
| LineSegment | Erstellt eine Linie zwischen zwei Punkten. |
| PolyBezierSegment | Erstellt eine Reihe kubischer Bézierkurven. |
| PolyLineSegment | Erstellt eine Reihe von Zeilen. |
| PolyQuadraticBezierSegment | Erstellt eine Reihe quadratischer Bézierkurven. |
| QuadraticBezierSegment | Erstellt eine quadratische Bézierkurve. |
Die Segmente in einer PathFigure werden zu einer einzelnen geometrischen Form kombiniert, die den Endpunkt eines Segments als Startpunkt des nächsten Segments verwendet. Die StartPoint-Eigenschaft einer PathFigure gibt den Punkt an, von dem aus das erste Segment gezeichnet wird. Jedes nachfolgende Segment beginnt am Endpunkt des vorherigen Segments. So kann z. B. 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,150erstellt wird.
Weitere Informationen zu PathGeometry-Objekten finden Sie in der Übersicht über die Geometrie.
In XAML können Sie außerdem eine besondere Kurzsyntax verwenden, um die Figures-Eigenschaft einer PathGeometry festzulegen. Weitere Informationen finden Sie in der Übersicht zur Pfadmarkupsyntax.
Weitere Informationen zur Pfadsyntax, die im XAML-Beispiel verwendet wird, finden Sie in der Übersicht zur Pfadmarkupsyntax.
Weitere Informationen
.NET Desktop feedback