Click here to Skip to main content
15,124,906 members
Articles / Programming Languages / C#
Posted 9 Nov 2008


69 bookmarked

Animation Along a Path for Silverlight

Rate me:
Please Sign up or sign in to vote.
4.89/5 (18 votes)
4 Mar 2009CPOL4 min read
Animates an object along a geometric path


Silverlight provides a good animation foundation, but lacks a convenient method to animate an object along an arbitrary geometric path. Windows Presentation Foundation, which is a superset of Silverlight, provides the animation classes, DoubleAnimationUsingPath and PointAnimationUsingPath. With these classes, it is easy to animate an object along a geometric path. This article provides the equivalent animation classes for Silverlight. I suspect future versions of Silverlight will provide this functionality, but until then, the code provided here will do the job.



Currently, Silverlight does not provide animation classes for animating an object along an arbitrary geometric path, but Silverlight does provide key frame animation classes. With the key frame animation classes, you specify beginning and ending values, and then the animation class uses interpolation to calculate all the values in between. A collection of key frames can be assembled together to describe a motion path, but manually building these key frames for each motion path is tedious.

To programmatically generate the key frames describing the motion path, a method to ‘flatten’ the geometric path is needed. Flattening basically means the geometry is described by a series of line segments. The figure below shows an example of a flattened Bezier segment. Once we have the flattened path, then we can easily build the key frames for the storyboard.


About the Code


The heart of the code is contained in the ‘PathAnimation’ project. In this project, the abstract BaseAnimationUsingPath class defines a number of dependency properties to control the animation (see below). Notice that this class inherits form DependencyObject rather than a Silverlight animation class. This is because most of the animation classes in Silverlight are sealed, and not extendable like the WPF animation classes. This has implications for the usage of the DoubleAnimationUsingPath and PointAnimationUsingPath animation classes, like they cannot be added to a Storyboard! They can be added as a Resource or created in the code-behind (example provided in the demo app).


The other important project here is ‘PathGeometryHelper’. This project implements the path flattening routine. Charles Petzold developed a path flattening method in his article and gave permission to reuse the code. Charles’ method was written for WPF, and so it needed to be ported to Silverlight. In porting this code to Silverlight, more missing functionality was found. Namely, Silverlight lacks some methods in the Matrix class. Also, Silverlight has no Vector class. Equivalent functionality for these classes (and a few others) has been provided in the ‘MatrixMathHelpers’ project.

An important point to make about the flattening routine is the ‘Tolerance’ parameter. This parameter has been exposed all the way up to the path animation classes. Basically, this parameter controls the number of segments used to approximate the original geometry path. The tolerance value must be greater than zero. A smaller tolerance value will yield greater accuracy (i.e., more line segments), and a larger value will yield less accuracy (i.e., poorer approximation of the geometry path). It is not recommended to make the tolerance too small because this will cause more key frames to be added to the storyboard, slow down the animation, and use too much memory. Play with the demo app and see how adjusting the tolerance affects the accuracy, but be careful not to set the value too small!

Another important piece of code is contained in PathConverter.cs. Currently, Silverlight has no built-in functionality to convert the mini-language string into a PathGeometry, but thankfully, a converter has been provided and included here in PathConverter.cs. With this handy converter, we can feed the animation classes arbitrarily complicated geometries created with Blend or other tools.

Using the Code

Two classes have been provided to animate an object along a geometric path: DoubleAnimationUsingPath and PointAnimationUsingPath. Both share a number of common dependency properties. These properties are equivalent to the Silverlight provided animation properties, so they should be familiar:

  • BeginTime: The time when the animation should start
  • Duration: The duration/length of the animation
  • AutoReverse: Reverses the animation at end when true
  • FillBehavior: Holds the value at the end of the animation, or resets to the value before the animation started
  • RepeatBehavior: Number of times to repeat
  • PathGeometry: Specifies the geometry that the object will follow when animating
  • TargetProperty: The property to animate
  • Target: The name of the object to animate
  • Tolerance: Controls the accuracy of the path flattening; must be greater than zero; smaller values give more accuracy

In addition to the properties above, all of the standard animation methods: Begin, Stop, Pause, Resume, and Seek have been provided.

DoubleAnimationUsingPath will only animate object properties of type double (e.g., height, width, X, Y, etc.). This animation class has one additional dependency property: Source. The Source property specifies to use either the X or Y output value of the PathGeometry to drive the animation.

As discussed in the previous section, the animation classes provided here cannot be used in a Storyboard like other Silverlight animation classes. They can, though, be added as a Resource or created in the code-behind (see the demo app for an example).


  • 9th November, 2008: Initial post
  • 4th March, 2009: Code updates
    • Add Completed Event to Animation classes
    • Added Angle to DoubleAnimationUsingPath


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior)
United States United States
I work in the Bay Area primarily developing software on the Windows platform using C++, .NET/C#, WPF, and Silverlight.

Comments and Discussions

QuestionImage cropping using Drawcontext Pin
Ramakrishnan Ramar19-Jun-18 2:46
MemberRamakrishnan Ramar19-Jun-18 2:46 
GeneralThanks Pin
czltking9-Jul-13 5:10
Memberczltking9-Jul-13 5:10 
QuestionEasing function Pin
Thomas sebire26-Nov-12 6:16
MemberThomas sebire26-Nov-12 6:16 
AnswerRe: Easing function Pin
Thomas sebire27-Nov-12 0:30
MemberThomas sebire27-Nov-12 0:30 
NewsPort for Windows 8 Pin
sentropie23-Nov-12 7:38
Membersentropie23-Nov-12 7:38 
GeneralRe: Port for Windows 8 Pin
lneir25-Nov-12 7:11
Memberlneir25-Nov-12 7:11 
GeneralRe: Port for Windows 8 Pin
Thomas sebire26-Nov-12 3:47
MemberThomas sebire26-Nov-12 3:47 
GeneralMy vote of 5 Pin
sureshkumartvr24-Jul-12 23:21
Membersureshkumartvr24-Jul-12 23:21 
Bugfgdgdgdfg Pin
Member 344411223-Aug-11 23:16
MemberMember 344411223-Aug-11 23:16 
GeneralAnother article on a similar topic (animations along arbitrary paths using Easing functionality) Pin
Nick Polyak1-Feb-11 20:56
professionalNick Polyak1-Feb-11 20:56 
GeneralI need code or instructions to animate object along a path Pin
zameer211-Apr-10 14:09
Memberzameer211-Apr-10 14:09 
Generaltest Pin
rahul jain23-Oct-09 15:48
Memberrahul jain23-Oct-09 15:48 
QuestionArcs flattening problem Pin
Member 94717921-Sep-09 5:55
MemberMember 94717921-Sep-09 5:55 
AnswerRe: Arcs flattening problem Pin
lneir21-Sep-09 18:59
Memberlneir21-Sep-09 18:59 
GeneralSilverlight 3 Pin
jboggs7710-May-09 13:38
Memberjboggs7710-May-09 13:38 
GeneralRe: Silverlight 3 Pin
lneir25-May-09 15:33
Memberlneir25-May-09 15:33 
GeneralI added some feature (Angluar Animation) Pin
Won Dong2-Mar-09 12:26
MemberWon Dong2-Mar-09 12:26 
GeneralRe: I added some feature (Angluar Animation) Pin
lneir2-Mar-09 19:24
Memberlneir2-Mar-09 19:24 
GeneralCompleted Event Pin
dahlbyk11-Dec-08 16:59
Memberdahlbyk11-Dec-08 16:59 
GeneralRe: Completed Event Pin
lneir3-Mar-09 19:46
Memberlneir3-Mar-09 19:46 
QuestionExcellent! One question Pin
Giancarlo Aguilera4-Dec-08 14:01
MemberGiancarlo Aguilera4-Dec-08 14:01 
AnswerRe: Excellent! One question Pin
lneir4-Dec-08 14:23
Memberlneir4-Dec-08 14:23 
GeneralIncreasing the speed of the animation Pin
Member 12327883-Dec-08 6:05
MemberMember 12327883-Dec-08 6:05 
GeneralRe: Increasing the speed of the animation Pin
lneir3-Dec-08 7:15
Memberlneir3-Dec-08 7:15 
GeneralExcellent Pin
Mohammad Dayyan26-Nov-08 10:07
MemberMohammad Dayyan26-Nov-08 10:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.