Panoramica sulle animazioni percorso
In questo argomento vengono illustrate le animazioni di percorso, che consentono di utilizzare un percorso geometrico per generare valori di output. Questa funzionalità è utile per lo spostamento e la rotazione di oggetti lungo percorsi complessi.
Prerequisiti
Per comprendere questo argomento, è necessario avere familiarità con le funzionalità di animazione di WPF. Per un'introduzione alle funzionalità di animazione, vedere Cenni preliminari sull'animazione.
Poiché per definire un'animazione percorso si utilizza un oggetto PathGeometry, è necessario avere familiarità anche con PathGeometry e con i diversi tipi di oggetti PathSegment. Per ulteriori informazioni, vedere Cenni preliminari sulle classi Geometry.
Definizione di animazione percorso
Un'animazione percorso è un tipo di AnimationTimeline che utilizza un oggetto PathGeometry come input. Anziché impostare una proprietà From, To o By (come per le animazioni From/To/By) o di utilizzare i fotogrammi chiave (come per le animazioni con fotogrammi chiave), è necessario definire un percorso geometrico e utilizzarlo per impostare la proprietà PathGeometry dell'animazione percorso. Con l'avanzamento dell'animazione percorso, le informazioni relative a x, y e all'angolo di rotazione vengono lette dal percorso e utilizzate per generare l'output.
Le animazioni percorso sono estremamente utili per animare un oggetto lungo un percorso complesso. Per spostare un oggetto lungo un percorso, è possibile utilizzare MatrixTransform e MatrixAnimationUsingPath per trasformare un oggetto lungo un percorso complesso. Nell'esempio seguente viene illustrata questa tecnica utilizzando l'oggetto MatrixAnimationUsingPath per animare la proprietà Matrix di un oggetto MatrixTransform. L'oggetto MatrixTransform viene applicato a un pulsante e ne determina lo spostamento lungo un percorso curvo. Poiché la proprietà DoesRotateWithTangent è impostata su true, il rettangolo ruota lungo la tangente del percorso.
<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);
};
}
}
}
Per ulteriori informazioni sulla sintassi del percorso utilizzata nell'esempio di XAML, vedere i cenni preliminari su Sintassi di markup del percorso. Per l'esempio completo, vedere Esempio di animazione percorso.
È possibile applicare un'animazione percorso a una proprietà utilizzando un oggetto Storyboard in XAML e nel codice oppure utilizzando il metodo BeginAnimation nel codice. È anche possibile utilizzare un'animazione percorso per creare un oggetto AnimationClock e applicarlo a una o più proprietà. Per ulteriori informazioni sui diversi metodi per l'applicazione delle animazioni, vedere Cenni preliminari sulle tecniche di animazione delle proprietà.
Tipi di animazione percorso
Poiché le animazioni generano valori di proprietà, sono disponibili tipi di animazione diversi per i diversi tipi di proprietà. Per animare una proprietà che accetta Double, ad esempio la proprietà X di un elemento TranslateTransform, utilizzare un'animazione che produce valori Double. Per animare una proprietà che accetta Point, utilizzare un'animazione che produce valori Point e così via.
Le classi di animazione percorso appartengono allo spazio dei nomi System.Windows.Media.Animation e utilizzano la convenzione di denominazione seguente:
*<Tipo>*AnimationUsingPath
Dove <Tipo> è il tipo di valore animato dalla classe.
In WPF sono disponibili le classi di animazione percorso seguenti.
Tipo proprietà |
Classe di animazione percorso corrispondente |
Esempio |
|---|---|---|
Procedura: animare un oggetto lungo un percorso (animazione Double) |
||
Procedura: animare un oggetto lungo un percorso (animazione Matrix) |
||
Procedura: animare un oggetto lungo un percorso (animazione Point) |
Un oggetto MatrixAnimationUsingPath genera i valori Matrix dalla relativa proprietà PathGeometry. Se utilizzato con MatrixTransform, MatrixAnimationUsingPath può spostare un oggetto lungo un percorso. Se si imposta la proprietà DoesRotateWithTangent di MatrixAnimationUsingPath su true, l'oggetto viene anche ruotato lungo le curve del percorso.
Un oggetto PointAnimationUsingPath genera i valori Point dalle coordinate x e y della relativa proprietà PathGeometry. Utilizzando PointAnimationUsingPath per animare una proprietà che accetta valori Point, è possibile spostare un oggetto lungo un percorso. PointAnimationUsingPath non può ruotare oggetti.
Un oggetto DoubleAnimationUsingPath genera i valori Double dalla relativa proprietà PathGeometry. Impostando la proprietà Source, è possibile specificare se DoubleAnimationUsingPath utilizza la coordinata x, il coordinata y, o l'angolo del percorso come output. È possibile utilizzare DoubleAnimationUsingPath per ruotare un oggetto o spostarlo lungo l'asse x o l'asse y.
Input dell'animazione percorso
Ogni classe di animazione percorso fornisce una proprietà PathGeometry per specificare il relativo input. L'animazione percorso utilizza PathGeometry per generare i relativi valori di output. La classe PathGeometry consente di descrivere più figure complesse costituite da archi, curve e linee.
L'oggetto PathGeometry è basato su un insieme di oggetti PathFigure, denominati in questo modo perché ogni figura descrive una forma discreta in PathGeometry. Ogni oggetto PathFigure è costituito da uno o più oggetti PathSegment, ognuno dei quali descrive un segmento della figura.
Esistono diversi tipi di segmento.
Tipo di segmento |
Descrizione |
|---|---|
Crea un arco ellittico tra due punti. |
|
Crea una curva di Bezier cubica tra due punti. |
|
Crea una linea tra due punti. |
|
Crea una serie di curve di Bezier cubiche. |
|
Crea una serie di linee. |
|
Crea una serie di curve di Bezier quadratiche. |
|
Crea una curva di Bezier quadratica. |
I segmenti di PathFigure vengono combinati in una singola forma geometrica, che utilizza il punto finale di un segmento come punto iniziale del segmento successivo. La proprietà StartPoint di PathFigure specifica il punto da cui viene tracciato il primo segmento. Ogni segmento successivo inizia dal punto finale di quello precedente. Ad esempio, una linea verticale da 10,50 a 10,150 può essere definita impostando la proprietà StartPoint su 10,50 e creando un oggetto LineSegment con la proprietà Point impostata su 10,150.
Per ulteriori informazioni sugli oggetti PathGeometry, vedere Cenni preliminari sulle classi Geometry.
In XAML è anche possibile utilizzare una sintassi abbreviata speciale per impostare la proprietà Figures di un oggetto PathGeometry. Per ulteriori informazioni, vedere Sintassi di markup del percorso.
Per ulteriori informazioni sulla sintassi del percorso utilizzata nell'esempio di XAML, vedere Sintassi di markup del percorso.
Vedere anche
Concetti
Sintassi di markup del percorso
Cenni preliminari sull'animazione
Cenni preliminari sulle tecniche di animazione delle proprietà