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

This example shows how to use a PointAnimationUsingPath object to animate a Point along a curved path.

Example

The following example moves an EllipseGeometry along a path defined by a PathGeometry. The ellipse geometry's Center property, which takes a Point value, specifies its position; to move the ellipse geometry, you animate its Center property. The example uses a PointAnimationUsingPath to animate the EllipseGeometry object's Center property.

<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">
  <Canvas Width="400" Height="400">
      
    <Path Fill="Blue" Margin="15,15,15,15">
      <Path.Data>

        <!-- The EllipseGemetry specifies the shape and position of the Ellipse. The
        Center property is animated, causing the Ellipse to animate across the screen-->
        <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
          Center="10,100" RadiusX="15" RadiusY="15" />
      </Path.Data>
      <Path.Triggers>
        <EventTrigger RoutedEvent="Path.Loaded">
          <BeginStoryboard Name="MyBeginStoryboard">
            <Storyboard>
              
              <!-- Animates the ellipse along the path. -->
              <PointAnimationUsingPath
                Storyboard.TargetName="MyAnimatedEllipseGeometry"
                Storyboard.TargetProperty="Center"
                Duration="0:0:5" 
                RepeatBehavior="Forever" >
                <PointAnimationUsingPath.PathGeometry>
                  <PathGeometry 
                    Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"
                    PresentationOptions:Freeze="True" />
                </PointAnimationUsingPath.PathGeometry>
              </PointAnimationUsingPath>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Path.Triggers>
    </Path>
  </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 PointAnimationUsingPathExample : Page
    {

        public PointAnimationUsingPathExample()
        {

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

            // Create the EllipseGeometry to animate.
            EllipseGeometry animatedEllipseGeometry =
                new EllipseGeometry(new Point(10, 100), 15, 15);

            // Register the EllipseGeometry's name with
            // the page so that it can be targeted by a
            // storyboard.
            this.RegisterName("AnimatedEllipseGeometry", animatedEllipseGeometry);

            // Create a Path element to display the geometry.
            Path ellipsePath = new Path();
            ellipsePath.Data = animatedEllipseGeometry;
            ellipsePath.Fill = Brushes.Blue;
            ellipsePath.Margin = new Thickness(15);

            // Create a Canvas to contain ellipsePath
            // and add it to the page.
            Canvas mainPanel = new Canvas();
            mainPanel.Width = 400;
            mainPanel.Height = 400;
            mainPanel.Children.Add(ellipsePath);
            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 PointAnimationgUsingPath to move
            // the EllipseGeometry along the animation path.
            PointAnimationUsingPath centerPointAnimation = 
                new PointAnimationUsingPath();
            centerPointAnimation.PathGeometry = animationPath;
            centerPointAnimation.Duration = TimeSpan.FromSeconds(5);
            centerPointAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Set the animation to target the Center property
            // of the EllipseGeometry named "AnimatedEllipseGeometry".
            Storyboard.SetTargetName(centerPointAnimation, "AnimatedEllipseGeometry");
            Storyboard.SetTargetProperty(centerPointAnimation, 
                new PropertyPath(EllipseGeometry.CenterProperty));
      
            // Create a Storyboard to contain and apply the animation.
            Storyboard pathAnimationStoryboard = new Storyboard();
            pathAnimationStoryboard.RepeatBehavior = RepeatBehavior.Forever;
            pathAnimationStoryboard.AutoReverse = true;
            pathAnimationStoryboard.Children.Add(centerPointAnimation);

            // Start the Storyboard when ellipsePath is loaded.
            ellipsePath.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 PointAnimationUsingPathExample
		Inherits Page

		Public Sub New()

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

			' Create the EllipseGeometry to animate.
			Dim animatedEllipseGeometry As New EllipseGeometry(New Point(10, 100), 15, 15)

			' Register the EllipseGeometry's name with
			' the page so that it can be targeted by a
			' storyboard.
			Me.RegisterName("AnimatedEllipseGeometry", animatedEllipseGeometry)

			' Create a Path element to display the geometry.
			Dim ellipsePath As New Path()
			ellipsePath.Data = animatedEllipseGeometry
			ellipsePath.Fill = Brushes.Blue
			ellipsePath.Margin = New Thickness(15)

			' Create a Canvas to contain ellipsePath
			' and add it to the page.
			Dim mainPanel As New Canvas()
			mainPanel.Width = 400
			mainPanel.Height = 400
			mainPanel.Children.Add(ellipsePath)
			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 PointAnimationgUsingPath to move
			' the EllipseGeometry along the animation path.
			Dim centerPointAnimation As New PointAnimationUsingPath()
			centerPointAnimation.PathGeometry = animationPath
			centerPointAnimation.Duration = TimeSpan.FromSeconds(5)
			centerPointAnimation.RepeatBehavior = RepeatBehavior.Forever

			' Set the animation to target the Center property
			' of the EllipseGeometry named "AnimatedEllipseGeometry".
			Storyboard.SetTargetName(centerPointAnimation, "AnimatedEllipseGeometry")
			Storyboard.SetTargetProperty(centerPointAnimation, New PropertyPath(EllipseGeometry.CenterProperty))

			' Create a Storyboard to contain and apply the animation.
			Dim pathAnimationStoryboard As New Storyboard()
			pathAnimationStoryboard.RepeatBehavior = RepeatBehavior.Forever
			pathAnimationStoryboard.AutoReverse = True
			pathAnimationStoryboard.Children.Add(centerPointAnimation)

			' Start the Storyboard when ellipsePath is loaded.
			AddHandler ellipsePath.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.

The code version of the preceding sample used a Storyboard to animate the EllipseGeometry, even though only one animation was applied. A Storyboard is often the easiest way to apply multiple animations because these animations can be controlled by the same Storyboard. However, an easier way to apply a single animation to a property when using code is to use the BeginAnimation method. For an example, see Animate a Property Without Using a Storyboard.

See Also

Path Animation Sample
Animation Overview
Path Animation How-to Topics