Vue d'ensemble des animations de tracés

Cette rubrique présente les animations de tracés qui vous permettent d’utiliser un tracé géométrique pour générer des valeurs de sortie. Les animations de tracés sont utiles pour déplacer et faire pivoter des objets le long des tracés complexes.

Prérequis

Pour comprendre cette rubrique, vous devez être familiarisé avec les fonctionnalités d’animations WPF. Pour une introduction aux fonctionnalités d’animation, consultez Vue d’ensemble de l’animation.

Étant donné que vous utilisez un objet pour définir une PathGeometry animation de chemin d’accès, vous devez également être familiarisé avec PathGeometry les différents types d’objets PathSegment . Pour plus d’informations, consultez Vue d’ensemble de Geometry.

Qu’est-ce qu’une animation de tracés ?

Une animation de chemin d’accès est un type qui AnimationTimeline utilise une PathGeometry entrée. Au lieu de définir une propriété From, To ou By (comme vous le faites pour une animation From/To/By) ou d’utiliser des images clés (comme vous l’utilisez pour une animation de trame clé), vous définissez un chemin géométrique et utilisez-le pour définir la PathGeometry propriété de l’animation de chemin d’accès. À mesure que l’animation de tracés avance, elle lit les informations relatives aux coordonnées x, y et à l’angle à partir du tracé et les utilise pour générer sa sortie.

Les animations de tracés sont très utiles pour animer un objet le long d’un tracé complexe. Une façon de déplacer un objet le long d’un chemin consiste à utiliser un MatrixTransform et un MatrixAnimationUsingPath pour transformer un objet le long d’un chemin complexe. L’exemple suivant illustre cette technique à l’aide de l’objet MatrixAnimationUsingPath pour animer la Matrix propriété d’un MatrixTransform. Il MatrixTransform est appliqué à un bouton et le fait se déplacer le long d’un chemin courbé. Étant donné que la DoesRotateWithTangent propriété est définie truesur , le rectangle pivote le long de la tangente du chemin.

<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

Pour plus d’informations sur la syntaxe de chemin d’accès utilisée dans l’exemple XAML, consultez la vue d’ensemble de la syntaxe de balisage de chemin d’accès. Pour l’exemple complet, consultez Animation de tracés, exemple.

Vous pouvez appliquer une animation de chemin d’accès à une propriété à l’aide d’un Storyboard code xaml et d’un code, ou à l’aide de la méthode dans le BeginAnimation code. Vous pouvez également utiliser une animation de chemin d’accès pour créer et AnimationClock l’appliquer à une ou plusieurs propriétés. Pour plus d’informations sur les différentes façons d’appliquer des animations, consultez Vue d’ensemble des techniques d’animation de propriétés.

Types d’animation de tracés

Étant donné que les animations génèrent des valeurs de propriété, il existe différents types d’animation pour différents types de propriété. Pour animer une propriété qui prend une Double (telle que la X propriété d’un TranslateTransform), vous utilisez une animation qui produit des Double valeurs. Pour animer une propriété qui prend un Point, vous utilisez une animation qui produit des Point valeurs, et ainsi de suite.

Les classes d’animation de chemin d’accès appartiennent à l’espace System.Windows.Media.Animation de noms et utilisent la convention d’affectation de noms suivante :

<Type> AnimationUsingPath

Où <Type> est le type de valeur que la classe anime.

WPF fournit les classes d’animation de chemin d’accès suivantes.

Un MatrixAnimationUsingPath génère des Matrix valeurs à partir de son PathGeometry. Lorsqu’il est utilisé avec un MatrixTransform, un MatrixAnimationUsingPath objet peut déplacer un objet le long d’un chemin d’accès. Si vous définissez la DoesRotateWithTangent propriété sur MatrixAnimationUsingPath true, elle fait également pivoter l’objet le long des courbes du chemin.

Un PointAnimationUsingPath génère des Point valeurs à partir des coordonnées x et y de son PathGeometry. À l’aide d’une PointAnimationUsingPath propriété qui prend Point des valeurs, vous pouvez déplacer un objet le long d’un chemin d’accès. Impossible PointAnimationUsingPath de faire pivoter des objets.

Un DoubleAnimationUsingPath génère des Double valeurs à partir de son PathGeometry. En définissant la Source propriété, vous pouvez spécifier si l’utilisation DoubleAnimationUsingPath de la coordonnée x, de la coordonnée y ou de l’angle du chemin d’accès comme sortie. Vous pouvez utiliser un DoubleAnimationUsingPath objet pour faire pivoter un objet ou le déplacer le long de l’axe x ou de l’axe y.

Entrée d’animation de tracés

Chaque classe d’animation de chemin fournit une PathGeometry propriété pour spécifier son entrée. L’animation de chemin utilise la PathGeometry méthode pour générer ses valeurs de sortie. La PathGeometry classe vous permet de décrire plusieurs figures complexes composées d’arcs, de courbes et de lignes.

Au cœur d’une PathGeometry collection d’objets PathFigure , ces objets sont ainsi nommés, car chaque figure décrit une forme discrète dans le PathGeometry. Chacun PathFigure se compose d’un ou PathSegment plusieurs objets, chacun décrivant un segment de la figure.

Il existe un grand nombre de segments.

Les segments d’un objet PathFigure sont combinés en une forme géométrique unique, qui utilise le point de fin d’un segment comme point de départ du segment suivant. La StartPoint propriété d’un PathFigure spécifie le point à partir duquel le premier segment est dessiné. Chaque segment suivant démarre à l’extrémité du segment précédent. Par exemple, une ligne verticale à partir de 10,50 laquelle 10,150 peut être définie en définissant la StartPoint propriété 10,50 sur et en créant un LineSegment avec un Point paramètre de propriété de 10,150.

Pour plus d’informations sur les objets, consultez la vue d’ensemble PathGeometry de Geometry.

En XAML, vous pouvez également utiliser une syntaxe abrégée spéciale pour définir la Figures propriété d’un PathGeometry. Pour plus d’informations, consultez la vue d’ensemble sur la syntaxe XAML pour les tracés.

Pour plus d’informations sur la syntaxe de chemin d’accès utilisée dans l’exemple XAML, consultez la vue d’ensemble de la syntaxe de balisage de chemin d’accès.

Voir aussi

• Animation de tracé, exemple
• Syntaxe XAML pour les tracés
• Guides pratiques relatifs aux animations de tracés
• Vue d’ensemble de l’animation
• Vue d’ensemble des techniques d’animation de propriétés