How to: Animate an Object Along a Path (Double Animation)

This example shows how to use the DoubleAnimationUsingPath class to move an object along a path defined by a PathGeometry.

The following example uses two DoubleAnimationUsingPath objects to move a rectangle along a geometric path:


    <!-- 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" />

  <Canvas Width="400" Height="400">

    <!-- The object to animate. -->
      Width="30" Height="30" Fill="Blue">
        <TranslateTransform x:Name="AnimatedTranslateTransform"  />   

        <EventTrigger RoutedEvent="Path.Loaded">
            <Storyboard RepeatBehavior="Forever">

              <!-- Animates the rectangle horizotally along the path. -->
                PathGeometry="{StaticResource AnimationPath}"
                Duration="0:0:5"  />

              <!-- Animates the rectangle vertically along the path. -->
                PathGeometry="{StaticResource AnimationPath}"
                Duration="0:0:5"  />
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;
            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));

            // Freeze the PathGeometry for performance benefits.

            // 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");
                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");
                new PropertyPath(TranslateTransform.YProperty)); 

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

            // Start the animations when the rectangle is loaded.
            aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
                // Start the storyboard.




For the complete sample, see Path Animation Sample.

Another way to move an object using a geometric path is to use a MatrixAnimationUsingPath object. For an example, see How to: Animate an Object Along a Path (Matrix Animation).

Was this page helpful?
(1500 characters remaining)
Thank you for your feedback
© 2014 Microsoft