Přehled animací cesty
Toto téma představuje animace cest, které umožňují použití geometrické cesty ke generování výstupních hodnot. Animace cest jsou užitečné pro přesouvání a otáčení objektů podél složitých cest.
Předpoklady
Abyste pochopili toto téma, měli byste být obeznámeni s funkcemi animací WPF. Úvod k animačním funkcím najdete v přehledu animací.
Vzhledem k tomu, že k definování animace cesty použijete PathGeometry objekt, měli byste být také obeznámeni PathGeometry s různými typy PathSegment objektů. Další informace najdete v přehledu geometrie.
Co je animace cesty?
Animace cesty je typ AnimationTimeline , který jako vstup používá PathGeometry . Místo nastavení vlastnosti From, To nebo By (stejně jako u animace From/To/By) nebo použití klíčových snímků (jak se používá pro animaci s klíčem) definujete geometrické cesty a použijete ji k nastavení PathGeometry vlastnosti animace cesty. Při pokroku animace cesty čte informace o x, y a úhlu z cesty a používá k vygenerování výstupu.
Animace cest jsou velmi užitečné pro animaci objektu podél složité cesty. Jedním ze způsobů, jak přesunout objekt podél cesty, je použití objektu MatrixTransform a MatrixAnimationUsingPath transformace objektu podél komplexní cesty. Následující příklad ukazuje tuto techniku pomocí objektu MatrixAnimationUsingPath k animaci Matrix vlastnosti objektu MatrixTransform. Použije se MatrixTransform na tlačítko a způsobí, že se bude pohybovat podél zakřivené cesty. Vzhledem k tomu, že DoesRotateWithTangent vlastnost je nastavena na true, obdélník otočí podél tangens cesty.
<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
Další informace o syntaxi cesty, která se používá v příkladu XAML, naleznete v přehledu syntaxe značek cesty. Kompletní ukázku najdete v části Ukázka animace cesty.
Animaci cesty můžete použít u vlastnosti pomocí jazyka Storyboard XAML a kódu nebo pomocí BeginAnimation metody v kódu. Animaci cesty můžete použít také k vytvoření AnimationClock a použití na jednu nebo více vlastností. Další informace o různých metodách použití animací naleznete v tématu Přehled technik animace vlastností.
Typy animací cest
Protože animace generují hodnoty vlastností, existují různé typy animací pro různé typy vlastností. Chcete-li animovat vlastnost, která přebírá Double (například X vlastnost TranslateTransform), použijete animaci, která vytváří Double hodnoty. Pokud chcete animovat vlastnost, která přebírá Point, použijete animaci, která vytváří Point hodnoty atd.
Třídy animace cesty patří do System.Windows.Media.Animation oboru názvů a používají následující zásady vytváření názvů:
<Typ>AnimationUsingPath
Where <Type> je typ hodnoty, kterou třída animuje.
WPF poskytuje následující třídy animace cesty.
| Typ vlastnosti | Odpovídající třída animace cesty | Příklad |
|---|---|---|
| Double | DoubleAnimationUsingPath | Animace objektu podél cesty (dvojitá animace) |
| Matrix | MatrixAnimationUsingPath | Animace objektu podél cesty (animace matice) |
| Point | PointAnimationUsingPath | Animace objektu podél cesty (bodová animace) |
A MatrixAnimationUsingPath generuje Matrix hodnoty z jeho PathGeometry. Při použití s objektem MatrixTransformMatrixAnimationUsingPath , může přesunout objekt podél cesty. Pokud nastavíte DoesRotateWithTangent vlastnost MatrixAnimationUsingPath na true, otočí také objekt podél křivek cesty.
A PointAnimationUsingPath generuje Point hodnoty ze souřadnic x a y jeho PathGeometry. Pomocí PointAnimationUsingPath animace vlastnosti, která přebírá Point hodnoty, můžete přesunout objekt podél cesty. Objekty PointAnimationUsingPath nelze otočit.
A DoubleAnimationUsingPath generuje Double hodnoty z jeho PathGeometry. Source Nastavením vlastnosti můžete určit, zda DoubleAnimationUsingPath se jako výstup používá souřadnice x, souřadnice y nebo úhel cesty. Objekt můžete DoubleAnimationUsingPath otočit nebo ho přesunout podél osy x nebo osy y.
Vstup animace cesty
Každá třída animace cesty poskytuje PathGeometry vlastnost pro zadání jeho vstupu. Animace cesty používá PathGeometry k vygenerování výstupních hodnot. Třída PathGeometry umožňuje popsat několik složitých obrázků, které se skládají z oblouků, křivek a čar.
V srdci objektu PathGeometry je kolekce PathFigure objektů; tyto objekty jsou tak pojmenované, protože každý obrázek popisuje samostatný obrazec v objektu PathGeometry. Každý PathFigure se skládá z jednoho nebo více PathSegment objektů, z nichž každý popisuje segment obrázku.
Existuje mnoho typů segmentů.
| Typ segmentu | Popis |
|---|---|
| ArcSegment | Vytvoří eliptický oblouk mezi dvěma body. |
| BezierSegment | Vytvoří krychlovou bezierovou křivku mezi dvěma body. |
| LineSegment | Vytvoří čáru mezi dvěma body. |
| PolyBezierSegment | Vytvoří řadu krychlových bezierových křivek. |
| PolyLineSegment | Vytvoří řadu řádků. |
| PolyQuadraticBezierSegment | Vytvoří řadu kvadratických bezierových křivek. |
| QuadraticBezierSegment | Vytvoří kvadratickou bezierovou křivku. |
Segmenty v a PathFigure jsou sloučeny do jednoho geometrického tvaru, který používá koncový bod segmentu jako počáteční bod dalšího segmentu. Vlastnost StartPointPathFigure určuje bod, ze kterého je nakreslen první segment. Každý další segment začíná na koncovém bodu předchozího segmentu. Například svislou čáru z 10,50 do 10,150 lze definovat nastavením StartPoint vlastnosti 10,50 na a vytvořením LineSegment vlastnosti s Point nastavením 10,150vlastnosti .
Další informace o PathGeometry objektech naleznete v přehledu geometrie.
V JAZYCE XAML můžete také použít speciální zkrácenou syntaxi k nastavení Figures vlastnosti PathGeometry. Další informace najdete v tématu Přehled syntaxe značek cesty.
Další informace o syntaxi cesty, která se používá v příkladu XAML, naleznete v přehledu syntaxe značek cesty.
Viz také
.NET Desktop feedback
Váš názor
Připravujeme: V průběhu roku 2024 budeme postupně vyřazovat problémy z GitHub coby mechanismus zpětné vazby pro obsah a nahrazovat ho novým systémem zpětné vazby. Další informace naleznete v tématu: https://aka.ms/ContentUserFeedback.
Odeslat a zobrazit názory pro