Cómo: Animar un objeto a lo largo de una trayectoria (animación doble)

En este ejemplo se muestra cómo usar la clase DoubleAnimationUsingPath para mover un objeto a lo largo de un trazado definido mediante PathGeometry.

Ejemplo

En el ejemplo siguiente se usan dos objetos DoubleAnimationUsingPath para mover un rectángulo a lo largo de un trazado geométrico:

• La primera clase DoubleAnimationUsingPath anima la propiedad X de la clase TranslateTransform aplicada al rectángulo. Hace que el rectángulo se mueva horizontalmente a lo largo del trazado.

• La segunda clase DoubleAnimationUsingPath anima la propiedad Y de la clase TranslateTransform aplicada al rectángulo. Hace que el rectángulo se mueva verticalmente a lo largo del trazado.

<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">
  <Page.Resources>
    
    <!-- This is the geometry creates the animation path. Because 
         this example uses it multiple times, it's declared as a resource and
         frozen to improve performance. -->
    <PathGeometry x:Key="AnimationPath"
      Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"
      PresentationOptions:Freeze="True" />
  </Page.Resources>
  
  <Canvas Width="400" Height="400">
   
    <!-- The object to animate. -->
    <Rectangle   
      Width="30" Height="30" Fill="Blue">
      <Rectangle.RenderTransform>
        <TranslateTransform x:Name="AnimatedTranslateTransform"  />   
      </Rectangle.RenderTransform> 
      
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Path.Loaded">
          <BeginStoryboard>
            <Storyboard RepeatBehavior="Forever">

              <!-- Animates the rectangle horizotally along the path. -->
              <DoubleAnimationUsingPath
                Storyboard.TargetName="AnimatedTranslateTransform"
                Storyboard.TargetProperty="X"
                PathGeometry="{StaticResource AnimationPath}"
                Source="X" 
                Duration="0:0:5"  />

              <!-- Animates the rectangle vertically along the path. -->
              <DoubleAnimationUsingPath
                Storyboard.TargetName="AnimatedTranslateTransform"
                Storyboard.TargetProperty="Y"
                PathGeometry="{StaticResource AnimationPath}"
                Source="Y" 
                Duration="0:0:5"  />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>
  </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
{

    public class DoubleAnimationUsingPathExample : Page
    {

        public DoubleAnimationUsingPathExample()
        {

            // Create a NameScope for the page so that
            // we can use Storyboards.
            NameScope.SetNameScope(this, new NameScope());

            // Create a rectangle.
            Rectangle aRectangle = new Rectangle();
            aRectangle.Width = 30;
            aRectangle.Height = 30;
            aRectangle.Fill = Brushes.Blue;

            // Create a transform. This transform
            // will be used to move the rectangle.
            TranslateTransform animatedTranslateTransform =
                new TranslateTransform();

            // Register the transform's name with the page
            // so that they it be targeted by a Storyboard.
            this.RegisterName("AnimatedTranslateTransform", animatedTranslateTransform);

            aRectangle.RenderTransform = animatedTranslateTransform;

            // Create a Canvas to contain the rectangle
            // and add it to the page.
            Canvas mainPanel = new Canvas();
            mainPanel.Width = 400;
            mainPanel.Height = 400;
            mainPanel.Children.Add(aRectangle);
            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 DoubleAnimationUsingPath to move the
            // rectangle horizontally along the path by animating
            // its TranslateTransform.
            DoubleAnimationUsingPath translateXAnimation =
                new DoubleAnimationUsingPath();
            translateXAnimation.PathGeometry = animationPath;
            translateXAnimation.Duration = TimeSpan.FromSeconds(5);

            // Set the Source property to X. This makes
            // the animation generate horizontal offset values from
            // the path information.
            translateXAnimation.Source = PathAnimationSource.X;

            // Set the animation to target the X property
            // of the TranslateTransform named "AnimatedTranslateTransform".
            Storyboard.SetTargetName(translateXAnimation, "AnimatedTranslateTransform");
            Storyboard.SetTargetProperty(translateXAnimation,
                new PropertyPath(TranslateTransform.XProperty));

            // Create a DoubleAnimationUsingPath to move the
            // rectangle vertically along the path by animating
            // its TranslateTransform.
            DoubleAnimationUsingPath translateYAnimation =
                new DoubleAnimationUsingPath();
            translateYAnimation.PathGeometry = animationPath;
            translateYAnimation.Duration = TimeSpan.FromSeconds(5);

            // Set the Source property to Y. This makes
            // the animation generate vertical offset values from
            // the path information.
            translateYAnimation.Source = PathAnimationSource.Y;

            // Set the animation to target the Y property
            // of the TranslateTransform named "AnimatedTranslateTransform".
            Storyboard.SetTargetName(translateYAnimation, "AnimatedTranslateTransform");
            Storyboard.SetTargetProperty(translateYAnimation,
                new PropertyPath(TranslateTransform.YProperty));

            // Create a Storyboard to contain and apply the animations.
            Storyboard pathAnimationStoryboard = new Storyboard();
            pathAnimationStoryboard.RepeatBehavior = RepeatBehavior.Forever;
            pathAnimationStoryboard.Children.Add(translateXAnimation);
            pathAnimationStoryboard.Children.Add(translateYAnimation);

            // Start the animations when the rectangle is loaded.
            aRectangle.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


    Public Class DoubleAnimationUsingPathExample
        Inherits Page

        Public Sub New()

            ' Create a NameScope for the page so that
            ' we can use Storyboards.
            NameScope.SetNameScope(Me, New NameScope())

            ' Create a rectangle.
            Dim aRectangle As New Rectangle()
            aRectangle.Width = 30
            aRectangle.Height = 30
            aRectangle.Fill = Brushes.Blue

            ' Create a transform. This transform
            ' will be used to move the rectangle.
            Dim animatedTranslateTransform As New TranslateTransform()

            ' Register the transform's name with the page
            ' so that they it be targeted by a Storyboard.
            Me.RegisterName("AnimatedTranslateTransform", animatedTranslateTransform)

            aRectangle.RenderTransform = animatedTranslateTransform

            ' Create a Canvas to contain the rectangle
            ' and add it to the page.
            Dim mainPanel As New Canvas()
            mainPanel.Width = 400
            mainPanel.Height = 400
            mainPanel.Children.Add(aRectangle)
            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 DoubleAnimationUsingPath to move the
            ' rectangle horizontally along the path by animating 
            ' its TranslateTransform.
            Dim translateXAnimation As New DoubleAnimationUsingPath()
            translateXAnimation.PathGeometry = animationPath
            translateXAnimation.Duration = TimeSpan.FromSeconds(5)

            ' Set the Source property to X. This makes
            ' the animation generate horizontal offset values from
            ' the path information. 
            translateXAnimation.Source = PathAnimationSource.X

            ' Set the animation to target the X property
            ' of the TranslateTransform named "AnimatedTranslateTransform".
            Storyboard.SetTargetName(translateXAnimation, "AnimatedTranslateTransform")
            Storyboard.SetTargetProperty(translateXAnimation, New PropertyPath(TranslateTransform.XProperty))

            ' Create a DoubleAnimationUsingPath to move the
            ' rectangle vertically along the path by animating 
            ' its TranslateTransform.
            Dim translateYAnimation As New DoubleAnimationUsingPath()
            translateYAnimation.PathGeometry = animationPath
            translateYAnimation.Duration = TimeSpan.FromSeconds(5)

            ' Set the Source property to Y. This makes
            ' the animation generate vertical offset values from
            ' the path information. 
            translateYAnimation.Source = PathAnimationSource.Y

            ' Set the animation to target the Y property
            ' of the TranslateTransform named "AnimatedTranslateTransform".
            Storyboard.SetTargetName(translateYAnimation, "AnimatedTranslateTransform")
            Storyboard.SetTargetProperty(translateYAnimation, New PropertyPath(TranslateTransform.YProperty))

            ' Create a Storyboard to contain and apply the animations.
            Dim pathAnimationStoryboard As New Storyboard()
            pathAnimationStoryboard.RepeatBehavior = RepeatBehavior.Forever
            pathAnimationStoryboard.Children.Add(translateXAnimation)
            pathAnimationStoryboard.Children.Add(translateYAnimation)

            ' Start the animations when the rectangle is loaded.
            AddHandler aRectangle.Loaded, Sub(sender As Object, e As RoutedEventArgs) pathAnimationStoryboard.Begin(Me)

        End Sub

    End Class

End Namespace

Para ver el ejemplo completo, vea el Ejemplo de animación de trazado.

Otra forma de mover un objeto mediante un trazado geométrico es usar un objeto MatrixAnimationUsingPath. Para obtener un ejemplo, vea Cómo: Animar un objeto a lo largo de una trayectoria (animación de matriz).

Vea también

• Información general sobre animaciones
• Temas "Cómo..." de animación de trazado