Panoramica sulle animazioni tracciatoPath Animations Overview

Questo argomento presenta le animazioni tracciato, che consentono di usare un tracciato geometrico per generare valori di output.This topic introduces path animations, which enable you to use a geometric path to generate output values. Le animazioni tracciato sono utili per lo spostamento e rotazione di oggetti lungo tracciati complessi.Path animations are useful for moving and rotating objects along complex paths.

PrerequisitiPrerequisites

Per comprendere questo argomento, è necessario conoscere con WPFWPF le funzionalità di animazione.To understand this topic, you should be familiar with WPFWPF animations features. Per un'introduzione alle funzionalità di animazione, vedere il panoramica dell'animazione.For an introduction to animation features, see the Animation Overview.

Poiché si utilizza un PathGeometry oggetto per definire un'animazione percorso, è necessario inoltre conoscere con PathGeometry e i diversi tipi di PathSegment oggetti.Because you use a PathGeometry object to define a path animation, you should also be familiar with PathGeometry and the different types of PathSegment objects. Per ulteriori informazioni, vedere il Geometry Overview.For more information, see the Geometry Overview.

Che cos'è un'animazione tracciato?What Is a Path Animation?

Un'animazione percorso è un tipo di AnimationTimeline che utilizza un PathGeometry come input.A path animation is a type of AnimationTimeline that uses a PathGeometry as its input. Anziché impostare da, a o dalla proprietà (come avviene per da/a/da animazione) oppure usando i fotogrammi chiave (come si utilizza per un'animazione con fotogramma chiave), si definisce un percorso geometrico e utilizzarlo per impostare il PathGeometry proprietà dell'animazione percorso.Instead of setting a From, To, or By property (as you do for a From/To/By animation) or using key frames (as you use for a key-frame animation), you define a geometric path and use it to set the PathGeometry property of the path animation. Con l'avanzamento dell'animazione tracciato, le informazioni relative a x, y e all'angolo vengono lette dal tracciato e usate per generare l'output.As the path animation progresses, it reads the x, y, and angle information from the path and uses that information to generate its output.

Le animazioni tracciato sono estremamente utili per aggiungere un'animazione a un oggetto lungo un tracciato complesso.Path animations are very useful for animating an object along a complex path. Per spostare un oggetto lungo un percorso consiste nell'usare un MatrixTransform e MatrixAnimationUsingPath per trasformare un oggetto lungo un percorso complesso.One way to move an object along a path is to use a MatrixTransform and a MatrixAnimationUsingPath to transform an object along a complex path. L'esempio seguente illustra questa tecnica utilizzando il MatrixAnimationUsingPath oggetto da cui iniziare l'animazione di Matrix proprietà di un MatrixTransform.The following example demonstrates this technique by using the MatrixAnimationUsingPath object to animate the Matrix property of a MatrixTransform. Il MatrixTransform viene applicato a un pulsante e determina lo spostamento lungo un percorso curvo.The MatrixTransform is applied to a button and causes it to move along a curved path. Poiché il DoesRotateWithTangent è impostata su true, il rettangolo ruota lungo la tangente del percorso.Because the DoesRotateWithTangent property is set to true, the rectangle rotates along the tangent of the path.

<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
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

Per ulteriori informazioni sulla sintassi del percorso che viene utilizzata per la XAMLXAML esempio, vedere il sintassi del percorso di Markup Panoramica.For more information about the path syntax that is used in the XAMLXAML example, see the Path Markup Syntax overview. Per l'esempio completo, vedere percorso animazione esempio.For the complete sample, see Path Animation Sample.

È possibile applicare un'animazione percorso a una proprietà tramite un Storyboard in XAMLXAML e nel codice o tramite il BeginAnimation metodo nel codice.You can apply a path animation to a property by using a Storyboard in XAMLXAML and code, or by using the BeginAnimation method in code. È inoltre possibile utilizzare un'animazione percorso per creare un AnimationClock e applicarlo a una o più proprietà.You can also use a path animation to create an AnimationClock and apply it to one or more properties. Per ulteriori informazioni sui diversi metodi per l'applicazione di animazioni, vedere Property Animation Techniques Overview.For more information about the different methods for applying animations, see Property Animation Techniques Overview.

Tipi di animazione tracciatoPath Animation Types

Poiché le animazioni generano valori di proprietà, esistono diversi tipi di animazione per i diversi tipi di proprietà.Because animations generate property values, there are different animation types for different property types. Per aggiungere un'animazione a una proprietà che accetta un Double (ad esempio il X proprietà di un TranslateTransform), si utilizza un'animazione che produce Double valori.To animate a property that takes a Double (such as the X property of a TranslateTransform), you use an animation that produces Double values. Per aggiungere un'animazione a una proprietà che accetta un Point, si utilizza un'animazione che produce Point valori e così via.To animate a property that takes a Point, you use an animation that produces Point values, and so on.

Le classi di animazione percorso appartengono al System.Windows.Media.Animation dello spazio dei nomi e utilizzare la convenzione di denominazione seguente:Path animation classes belong to the System.Windows.Media.Animation namespace and use the following naming convention:

<Tipo> AnimationUsingPath<Type> AnimationUsingPath

Dove <Tipo> è il tipo di valore cui è stata aggiunta un'animazione dalla classe.Where <Type> is the type of value that the class animates.

WPFWPF offre le classi di animazione tracciato seguenti. provides the following path animation classes.

Tipo di proprietàProperty type Classe di animazione tracciato corrispondenteCorresponding path animation class EsempioExample
Double DoubleAnimationUsingPath Animare un oggetto lungo un tracciato (animazione Double)Animate an Object Along a Path (Double Animation)
Matrix MatrixAnimationUsingPath Animare un oggetto lungo un tracciato (animazione Matrix)Animate an Object Along a Path (Matrix Animation)
Point PointAnimationUsingPath Animare un oggetto lungo un tracciato (animazione Point)Animate an Object Along a Path (Point Animation)

Oggetto MatrixAnimationUsingPath genera Matrix i valori relativi PathGeometry.A MatrixAnimationUsingPath generates Matrix values from its PathGeometry. Quando si utilizza un MatrixTransform, MatrixAnimationUsingPath può spostare un oggetto lungo un percorso.When used with a MatrixTransform, a MatrixAnimationUsingPath can move an object along a path. Se si imposta la DoesRotateWithTangent proprietà del MatrixAnimationUsingPath a true, anche l'oggetto ruotato lungo la curva delle curve del percorso.If you set the DoesRotateWithTangent property of the MatrixAnimationUsingPath to true, it also rotates the object along the curves of the path.

Oggetto PointAnimationUsingPath genera Point valori dalle coordinate x e y della relativa PathGeometry.A PointAnimationUsingPath generates Point values from the x- and y-coordinates of its PathGeometry. Utilizzando un PointAnimationUsingPath per aggiungere un'animazione a una proprietà che accetta Point valori, è possibile spostare un oggetto lungo un percorso.By using a PointAnimationUsingPath to animate a property that takes Point values, you can move an object along a path. Oggetto PointAnimationUsingPath non è possibile ruotare gli oggetti.A PointAnimationUsingPath cannot rotate objects.

Oggetto DoubleAnimationUsingPath genera Double i valori relativi PathGeometry.A DoubleAnimationUsingPath generates Double values from its PathGeometry. Impostando il Source proprietà, è possibile specificare se il DoubleAnimationUsingPath utilizza la coordinata x, coordinata y o l'angolo del percorso come output.By setting the Source property, you can specify whether the DoubleAnimationUsingPath uses the x-coordinate, y-coordinate, or angle of the path as its output. È possibile utilizzare un DoubleAnimationUsingPath ruotare un oggetto o lo spostamento lungo l'asse x o asse y.You can use a DoubleAnimationUsingPath to rotate an object or move it along the x-axis or y-axis.

Input dell'animazione tracciatoPath Animation Input

Ogni classe di animazione percorso fornisce un PathGeometry proprietà per specificare il relativo input.Each path animation class provides a PathGeometry property for specifying its input. L'animazione percorso utilizza il PathGeometry per generare i valori di output.The path animation uses the PathGeometry to generate its output values. La PathGeometry classe consente di descrivere figure più complesse sono composte da archi, curve e linee.The PathGeometry class lets you describe multiple complex figures that are composed of arcs, curves, and lines.

Il fulcro di un PathGeometry è una raccolta di PathFigure oggetti; questi oggetti vengono così denominate perché ogni figura descrive una forma discreta nel PathGeometry.At the heart of a PathGeometry is a collection of PathFigure objects; these objects are so named because each figure describes a discrete shape in the PathGeometry. Ogni PathFigure è costituito da uno o più PathSegment oggetti, ognuno dei quali descrive un segmento della figura.Each PathFigure consists of one or more PathSegment objects, each of which describes a segment of the figure.

Esistono diversi tipi di segmenti.There are many types of segments.

Tipo di segmentoSegment Type DescrizioneDescription
ArcSegment Crea un arco ellittico tra due punti.Creates an elliptical arc between two points.
BezierSegment Crea una curva di Bézier cubica tra due punti.Creates a cubic Bezier curve between two points.
LineSegment Crea una linea tra due punti.Creates a line between two points.
PolyBezierSegment Crea una serie di curve di Bézier cubiche.Creates a series of cubic Bezier curves.
PolyLineSegment Crea una serie di linee.Creates a series of lines.
PolyQuadraticBezierSegment Crea una serie di curve di Bézier quadratiche.Creates a series of quadratic Bezier curves.
QuadraticBezierSegment Crea una curva di Bézier quadratica.Creates a quadratic Bezier curve.

I segmenti in un PathFigure vengono combinate in una singola forma geometrica, che utilizza il punto finale di un segmento come punto iniziale del segmento successivo.The segments in a PathFigure are combined into a single geometric shape, which uses the end point of a segment as the start point of the next segment. Il StartPoint proprietà di un PathFigure specifica il punto da cui viene disegnato il primo segmento.The StartPoint property of a PathFigure specifies the point from which the first segment is drawn. Ogni segmento successivo inizia in corrispondenza del punto finale del segmento precedente.Each subsequent segment starts at the end point of the previous segment. Ad esempio, una linea verticale da 10,50 per 10,150 possono essere definite tramite l'impostazione di StartPoint proprietà 10,50 e la creazione di un LineSegment con un Point impostazione della proprietà 10,150.For example, a vertical line from 10,50 to 10,150 can be defined by setting the StartPoint property to 10,50 and creating a LineSegment with a Point property setting of 10,150.

Per ulteriori informazioni su PathGeometry degli oggetti, vedere il Geometry Overview.For more information about PathGeometry objects, see the Geometry Overview.

In XAMLXAML, è inoltre possibile utilizzare una sintassi abbreviata speciale per impostare il Figures proprietà di un PathGeometry.In XAMLXAML, you can also use a special abbreviated syntax to set the Figures property of a PathGeometry. Per ulteriori informazioni, vedere sintassi del percorso di Markup Panoramica.For more information, see Path Markup Syntax overview.

Per ulteriori informazioni sulla sintassi del percorso che viene utilizzata per la XAMLXAML esempio, vedere il sintassi del percorso di Markup Panoramica.For more information about the path syntax that is used in the XAMLXAML example, see the Path Markup Syntax overview.

Vedere ancheSee Also

Path Animation Sample (Esempio di animazione tracciato)Path Animation Sample
Sintassi di markup del percorsoPath Markup Syntax
Procedure relative all'animazione percorsoPath Animation How-to Topics
Cenni preliminari sull'animazioneAnimation Overview
Cenni preliminari sulle tecniche di animazione delle proprietàProperty Animation Techniques Overview