Introducción general a las animaciones de trayectorias

En este tema se presentan las animaciones de trayectos, que te permiten utilizar un trayecto geométrico para generar valores de salida. Las animaciones de trayectoria son útiles para mover y girar objetos a lo largo de rutas complejas.

Prerrequisitos

Para comprender este tema, debe estar familiarizado con las características de animaciones de WPF. Para obtener una introducción a las características de animación, consulte Información general sobre animaciones.

Dado que usa un objeto PathGeometry para definir una animación de trayectoria, también debe estar familiarizado con los distintos tipos de objetos PathGeometry de PathSegment. Para obtener más información, consulte Información general sobre geometría.

¿Qué es una animación de trayectoria?

Una animación de trayectoria es un tipo de AnimationTimeline que utiliza un PathGeometry como su entrada. En lugar de establecer una propiedad From, To o By (como se hace para una animación From/To/By) o usar cuadros clave (como se usa para una animación de cuadro clave), se define una trayectoria geométrica y se utiliza para establecer la PathGeometry propiedad de la animación de trayecto. A medida que avanza la animación de la trayectoria, lee la información de las coordenadas x, y y del ángulo de la trayectoria y usa esa información para generar su salida.

Las animaciones de trayectoria son muy útiles para mover un objeto a lo largo de un camino complejo. Una forma de mover un objeto a lo largo de una trayectoria es usar un MatrixTransform y un MatrixAnimationUsingPath para transformar la ruta de un objeto a lo largo de una trayectoria compleja. En el ejemplo siguiente se muestra esta técnica mediante el uso del MatrixAnimationUsingPath objeto para animar la Matrix propiedad de un MatrixTransform. MatrixTransform se aplica a un botón y hace que se mueva a lo largo de un trazado curvado. Dado que la propiedad DoesRotateWithTangent se establece en true, el rectángulo gira a lo largo de la tangente del camino.

<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

Para obtener más información sobre la sintaxis de ruta de acceso que se usa en el ejemplo XAML, consulta la información general sobre la sintaxis de marcado de ruta de acceso. Para obtener el ejemplo completo, vea Ejemplo de animación de trayectoria.

Puedes aplicar una animación de trayectoria a una propiedad mediante un Storyboard en XAML y código, o mediante el método BeginAnimation en el código. También puede usar una animación de ruta de acceso para crear un elemento AnimationClock y aplicarlo a una o varias propiedades. Para obtener más información sobre los diferentes métodos para aplicar animaciones, vea Información general sobre técnicas de animación de propiedades.

Tipos de animación de ruta

Dado que las animaciones generan valores de propiedad, hay diferentes tipos de animación para diferentes tipos de propiedad. Para animar una propiedad que requiere Double (como la propiedad X de un TranslateTransform objeto), se utiliza una animación que produce valores de tipo Double. Para animar una propiedad que toma un Point, se usa una animación que genera Point valores, y así sucesivamente.

Las clases de animación de trayectoria pertenecen al espacio de nombres System.Windows.Media.Animation y usan la siguiente convención de nomenclatura.

<Tipo>AnimationUsingPath

Donde <Type> es el tipo de valor que la clase anima.

WPF proporciona las siguientes clases de animación de trayectoria.

Un MatrixAnimationUsingPath genera Matrix valores a partir de su PathGeometry. Cuando se usa con un MatrixTransform, un MatrixAnimationUsingPath puede mover un objeto a lo largo de una trayectoria. Si establece la DoesRotateWithTangent propiedad de en MatrixAnimationUsingPathtrue, también gira el objeto a lo largo de las curvas de la ruta de acceso.

Un PointAnimationUsingPath genera valores Point a partir de las coordenadas x e y de su PathGeometry. Mediante el uso de PointAnimationUsingPath para animar una propiedad que toma valores de Point, puede mover un objeto a lo largo de una trayectoria. Un PointAnimationUsingPath no puede girar objetos.

Un DoubleAnimationUsingPath genera Double valores a partir de su PathGeometry. Al establecer la propiedad Source, puede especificar si DoubleAnimationUsingPath usa la coordenada x, la coordenada y o el ángulo de la trayectoria como resultado. Puede usar DoubleAnimationUsingPath para girar un objeto o moverlo a lo largo del eje X o del eje Y.

Entrada de animación de trayecto

Cada clase de animación de trayectoria proporciona una PathGeometry propiedad para especificar la entrada. La animación de trayectoria usa PathGeometry para generar sus valores de salida. La PathGeometry clase le permite describir varias figuras complejas compuestas de arcos, curvas y líneas.

En el corazón de un PathGeometry hay una colección de objetos PathFigure; estos objetos se llaman así porque cada figura describe una forma discreta en PathGeometry. Cada PathFigure consta de uno o más PathSegment objetos, y cada uno de ellos describe un segmento de la figura.

Hay muchos tipos de segmentos.

Los segmentos de un PathFigure se combinan en una sola forma geométrica, que usa el punto final de un segmento como punto inicial del siguiente segmento. La propiedad StartPoint de un PathFigure especifica el punto desde el que se dibuja el primer segmento. Cada segmento posterior comienza en el punto final del segmento anterior. Por ejemplo, se puede definir una línea vertical de 10,50 a 10,150 estableciendo la propiedad StartPoint en 10,50 y creando un LineSegment con la propiedad Point establecida en 10,150.

Para obtener más información sobre PathGeometry los objetos, vea La información general sobre geometría.

En XAML, también puedes usar una sintaxis abreviada especial para establecer la Figures propiedad de .PathGeometry Para obtener más información, consulte Introducción a la sintaxis de marcado de rutas .

Para obtener más información sobre la sintaxis de ruta de acceso que se usa en el ejemplo XAML, consulta la información general sobre la sintaxis de marcado de ruta de acceso.

Consulte también

• Ejemplo de animación de ruta
• Sintaxis de marcado de ruta
• Temas de guía sobre animación de trayectorias
• Visión general de animación
• Introducción a las técnicas de animación de propiedades