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.

Example

The following example uses two DoubleAnimationUsingPath objects to move a rectangle along a geometric 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">
  <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
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

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 Animate an Object Along a Path (Matrix Animation).

See Also

Animation Overview
Path Animation How-to Topics