Übersicht über Pfadanimationen
In diesem Thema werden Pfadanimationen beschrieben, mit denen Sie Ausgabewerte mithilfe eines geometrischen Pfads generieren können. Pfadanimationen eignen sich zum Verschieben und Drehen von Objekten auf komplexen Pfaden.
Voraussetzungen
Für dieses Thema sollten Sie mit WPF-Animationsfeatures vertraut sein. Eine Einführung in Animationsfeatures finden Sie unter der Übersicht über Animationen.
Da Sie eine Pfadanimation mit einem PathGeometry-Objekt definieren, sollten Sie auch 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 als Eingabe eine PathGeometry verwendet. Anstatt (wie bei einer From/To/By-Animation) eine From-, To- oder By-Eigenschaft festzulegen oder (wie bei einer Keyframe-Animation) Keyframes zu verwenden, definieren Sie einen geometrischen Pfad und verwenden diesen, um die PathGeometry-Eigenschaft der Pfadanimation festzulegen. Beim Durchlaufen der Pfadanimation werden die x-, y- und Winkelinformationen des Pfads gelesen und diese Informationen zum Generieren der Ausgabe verwendet.
Pfadanimationen sind sehr nützlich, um ein Objekt auf einem komplexen Pfad zu animieren. Eine Möglichkeit, ein Objekt auf einem Pfad zu verschieben besteht darin, das Objekt mit einer MatrixTransform und einer MatrixAnimationUsingPath auf einem komplexen Pfad zu transformieren. Im folgenden Beispiel wird diese Technik veranschaulicht, indem mit dem MatrixAnimationUsingPath-Objekt die Matrix-Eigenschaft einer MatrixTransform animiert wird. Die MatrixTransform wird auf eine Schaltfläche angewendet und bewirkt, dass sie auf einem gekrümmten Pfad verschoben wird. Da die DoesRotateWithTangent-Eigenschaft auf true gesetzt ist, wird das Rechteck an der Tangente des Pfads entlang gedreht.
<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>
Imports System
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
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);
};
}
}
}
Weitere Informationen zur Pfadsyntax, die im XAML-Beispiel verwendet wird, finden Sie in der Übersicht unter Pfadmarkupsyntax. Das vollständige Beispiel finden Sie unter Beispiel zur Pfadanimation.
Sie können eine Pfadanimation auf eine Eigenschaft anwenden, indem Sie ein Storyboard in XAML und im Code verwenden oder die BeginAnimation-Methode im Code verwenden. Sie können mit einer Pfadanimation auch eine AnimationClock erstellen und sie auf eine oder mehrere Eigenschaften anwenden. Weitere Informationen zu den verschiedenen Anwendungsmethoden für Animationen finden Sie unter Ü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 einen Double-Wert entgegennimmt (wie zum Beispiel die X-Eigenschaft einer TranslateTransform), verwenden Sie eine Animation, die Double-Werte erzeugt. Zum Animieren einer Eigenschaft, die einen Point-Wert entgegennimmt, verwenden Sie eine Animation, die Point-Werte erzeugt usw.
Pfadanimationsklassen gehören zum System.Windows.Media.Animation-Namespace und verwenden die folgende Benennungskonvention:
*<Typ>*AnimationUsingPath
Wobei <Typ> für den Wertetyp steht, den die Klasse animiert.
WPF stellt die folgenden Pfadanimationsklassen bereit.
Eigenschaftentyp |
Zugehörige Pfadanimationsklasse |
Beispiel |
|---|---|---|
Gewusst wie: Verschieben eines Objekts auf einem Pfad (DoubleAnimation) |
||
Gewusst wie: Animieren eines Objekts auf einem Pfad (MatrixAnimation) |
||
Gewusst wie: Animieren eines Objekts entlang eines Pfads (PointAnimation) |
Ein MatrixAnimationUsingPath generiert Matrix-Werte aus seiner PathGeometry. Wenn sie mit einer MatrixTransform verwendet wird, kann eine MatrixAnimationUsingPath ein Objekt an einem Pfad verschieben. Wenn Sie die DoesRotateWithTangent-Eigenschaft der MatrixAnimationUsingPath auf true festlegen, wird das Objekt auf den Kurven des Pfads auch gedreht.
Eine PointAnimationUsingPath generiert Point-Werte aus den x- und y-Koordinaten seiner PathGeometry. Sie können ein Objekt auf einem Pfad verschieben, indem Sie eine Eigenschaft mit einer PointAnimationUsingPath animieren, die Point-Werte akzeptiert. Eine PointAnimationUsingPath kann Objekte nicht drehen.
Eine DoubleAnimationUsingPath generiert Double-Werte aus seiner PathGeometry. Durch Festlegen der Source-Eigenschaft können Sie angeben, ob die DoubleAnimationUsingPath die x-Koordinate, die y-Koordinate oder den Winkel des Pfads als Ausgabe verwendet. Sie können ein Objekt mit einer DoubleAnimationUsingPath drehen oder auf der x-Achse oder der y-Achse verschieben.
Pfadanimationseingabe
Jede Pfadanimationsklasse stellt eine PathGeometry-Eigenschaft zum Angeben seiner Eingaben bereit. Die Ausgabewerte der Pfadanimation werden mithilfe der PathGeometry generiert. Mit der PathGeometry-Klasse können Sie mehrere komplexe Figuren beschreiben, die aus Bögen, Kurven und Linien zusammengesetzt sind.
Eine PathGeometry besteht im Wesentlichen aus einer Sammlung von PathFigure-Objekten. Diese Objekte werden so genannt, da jede Figur eine eigenständige Form in der PathGeometry beschreibt. Jede PathFigure besteht aus mindestens einem PathSegment-Objekt, das einen Abschnitt der Figur beschreibt.
Es gibt viele verschiedene Arten von Segmenten.
Segmenttyp |
Beschreibung |
|---|---|
Erstellt einen elliptischen Bogen zwischen zwei Punkten. |
|
Erstellt eine kubische Bezierkurve zwischen zwei Punkten. |
|
Erstellt eine Linie zwischen zwei Punkten. |
|
Erstellt eine Reihe von kubischen Bezierkurven. |
|
Erstellt eine Reihe von Zeilen. |
|
Erstellt eine Reihe von quadratischen Bezierkurven. |
|
Erstellt eine quadratische Bezierkurve. |
Die Segmente einer PathFigure werden zu einer einzelnen geometrischen Form zusammengesetzt. Dabei wird der Endpunkt eines Segments als Startpunkt des nächsten Segments verwendet. Die StartPoint-Eigenschaft einer PathFigure gibt den Punkt an, an dem die Zeichnung des ersten Segments beginnt. Jedes nachfolgende Segment beginnt am Endpunkt des vorherigen Segments. Beispielsweise kann eine vertikale Linie von 10,50 nach 10,150 definiert werden, indem die StartPoint-Eigenschaft auf 10,50 festgelegt und ein LineSegment erstellt wird, dessen Point-Eigenschaft auf 10,150 festgelegt ist.
Weitere Informationen zu PathGeometry Objekten finden Sie unter Übersicht über die Geometrie.
In XAML können Sie die Figures-Eigenschaft einer PathGeometry auch mit einer speziellen abgekürzten Syntax festlegen. Weitere Informationen finden Sie in der Übersicht Pfadmarkupsyntax.
Weitere Informationen zur Pfadsyntax, die im XAML-Beispiel verwendet wird, finden Sie in der Übersicht Pfadmarkupsyntax.
Siehe auch
Konzepte
Übersicht über die Verfahren zur Animation von Eigenschaften