Click here to Skip to main content
15,314,594 members
Articles / Programming Languages / C#
Posted 1 Feb 2011

Tagged as


16 bookmarked

Silverlight Animations along Arbitrary Mathematical Paths via Easing

Rate me:
Please Sign up or sign in to vote.
4.90/5 (13 votes)
28 Aug 2011CPOL7 min read
Describes a simple algorithm for animating object movements along arbitrary paths


Almost two years ago, a very interesting article was published explaining how to create an animation along an arbitrary path in Silverlight Animation along a Path for Silverlight. It also provides DoubleAnimationUsingPath and PointAnimationUsingPath classes that are similar to the corresponding WPF classes (unlike WPF, Silverlight does not have this functionality by default).

The algorithm for creating animations used in the above article, however, is quite complex and involves approximating the path curve by a connected series of line segments (flattening).

The algorithm presented here is much simpler yet achieves the same results, using Silverlight built-in Easing functionality. My purpose is not to create DoubleAnimationUsingPath and PointAnimationUsingPath classes mimicking WPF functionality - even though it is possible to create them using this approach - but rather to show how to create an animation along any mathematically defined path (e.g. a curve, a connected series of curves, or a connected series of line segments).

Building up on this foundation, this article additionally shows how to create a dots-running-along-an-arbitrary-path visual effect.


The Demos

Let us start from the end. Here are the Silverlight demos that are built based on the code described in the article: Path Animation Demos.

Here are the demo snapshots:

Image 1

Image 2

Image 3

A Little Bit of Math

One of the mathematical definitions of Path states that a path on an X, Y vector plane is a set of points that satisfy the following equations: x = X(t) and y = Y(t), where X and Y are functions (for connected paths, they have to be continuous and for smooth paths they should have a continuous derivative). In the equations above, 't' is a real parameter. Sometimes 't' can be defined to be proportionate to the distance between the current point of the path and the origin of the Path along the path: in that case, the path is uniform in a sense that the length of a path from between values t1 and t2 only depends only on (t2-t1). Sometimes, however, uniform Path parameterization is not the most convenient and in this article I give examples with slightly non-uniform parameterization.

The above definition, together with the fact that we can use Easing functions for animating X and Y coordinates of e.g. translate transform of a Silverlight object, provide us with an easy way to create Silverlight animations along arbitrary mathematical paths without resorting to expensive techniques like approximation.

Math Path Samples

The simplest path is a linear path described by the following set of equations:

  • x = xFactor * t + xOffset;
  • y = yFactor * t + yOffset;

Here are the path equations describing a circular path:

  • x = cos(2pt) * scalingFactor
  • y = sin(2pt) * scalingFactor

In this case, 't' is the angle. To make this path elliptic, one just needs to have different scaling factors for 'x' and 'y' coordinates, but then the uniformity of the parameterization is going to be broken.

A Little Bit More Math (Easing Math)

Now, let us express the animations with Easing functions via math equations. I actually had to figure it out by conducting experiments (since I could not find it anywhere online). The following formula describes how an eased animation behaves in time:

v = (V2 - V1)/T * f(t/T) + V1 

Where 'v' is the resulting animation value, 't' is the time parameter, 'T' is the time period in question (either time between two frames in an animation with frames or time between 'To' and 'From' values in case of DoubleAnimation), V2 and V1 are the animation values at the end and the beginning of the animation correspondingly at the absence of Easing and 'f' is the Easing function. In the formula above, we assume a linear animation (not a spline one) and the default EasingMode.

In our code, below, we always set (From and To properties of DoubleAnimation) V1 = 0, V2 = 1. We also deal with normalized time, thus assuming that T = 1. Because of that, we can write:

v = f(t) 

where 't' is the normalized time and f(t) is the Easing function.

Using the code

Presented here are three Silverlight demos illustrating the above concepts.

Single Point Path Animation Demo

This demo shows how to create a single object animation along an arbitrary mathematical path with animations along elliptic and Bezier curves shown as examples. The demo appears under the title "Single Point Path Animation Demo" and the corresponding code is located under SinglePointPathAnimation VS 2010 solution.

The solution code also introduces some generic classes that facilitate creating such animations: GenericEasingFunction, OneDAnimation and TwoDAnimation.

GenericEasingFunction is a simple implementation of IEasingFunction interface that exposes EasingFunc property, allowing to set the Easing function as a delegate/lambda expression.

OneDAnimation class provides a way to set Easing function on a DoubleAnimation.

TwoDAnimation consists of two OneDAnimation objects corresponding to 'X' and 'Y' coordinate animations of a TranslateTransform.

Here is how the code is used to create an animation along an elliptic path:

// animation along an elliptic path
TwoDAnimation animation1 =
                new TwoDAnimation
                    TheTranslateTransform = TheTranslateTransform1,
                    XFunction = (t) => Math.Cos(t * (2.0 * Math.PI)) * 50,
                    YFunction = (t) => Math.Sin(t * (2.0 * Math.PI)) * 50 * 1.5

animation1.XAnimation.From = 0;
animation1.XAnimation.To = 1;
animation1.YAnimation.From = 0;
animation1.YAnimation.To = 1;

Storyboard sb1 = new Storyboard();
sb1.Duration = TimeSpan.FromSeconds(4);
sb1.RepeatBehavior = RepeatBehavior.Forever;

See MainPage.xaml.cs file.

Animation along a Bezier path is created in the same way, only with different XFunction and YFunction lambda expressions.

Multiple Point Animations along Arbitrary Paths

We want to create an animation effect where multiple objects are spread (preferably uniformly) along an arbitrary path and where the animation makes those objects move along the path in the same direction as shown in the Silverlight demo above. This is achieved by creating multiple objects along a path shifted by a Delta along the 't' parameter with respect to the previous object on the path. The objects will be moving along the path by Delta and then repeat the movement from their origin. This will create an illusion of multiple objects moving along the path all the way to the end.

The demos of multiple point animations appear under the "Multiple Point Animation Demo" title. The corresponding VS 2010 solution is titled MultiplePointsPathAnimation.

More generic code is developed under this solution as described below.

We clearly need a factory that produces multiple objects of the same type (since we need to place multiple objects along a path). ElementFactory is a very simple example of such a factory that creates red colored dots. It also adds the created elements to their parent panel.

These different objects on the path will clearly have different animation functions. These animation functions will be produced by the shifts of the animation function that defines the movement along the whole path. To create such functions, from one function, we employ the FuncWithShift class. Its constructor receives the original function and the shift value and its property ShiftedFunc returns the shifted function.

There is a class ShiftFuncFactory that uses FuncWithShift to generate multiple shifts of a function. It has a property CurrentShift which can be changed to manipulate the shift value, while its property ShiftedFunc is returning the resulting shifted function. ShiftFuncFactory class assumes that the shifted function will only operate when the time parameter changes from 0 to Delta (this is to account for the fact that the object should only move to where the next object was located in the beginning of the animation (it should not move all the way to the end of the path). ShiftFuncFactory class also has ExternalShift property which allows shifting the whole path (I use it in the "Running Letters" demo to shift the letters with respect to each other).

Finally, class ItemsAlongPathFactory actually builds the animations within its SetStoryboar function. It uses its XFunc and YFunc properties to set the path functions and uses ShiftFuncFactory functionality to build the corresponding function shifts.

Here is how we create a multiple point elliptic animation within MainPage.xaml.cs file:

// Elliptic path 
Func<double, /> xFunc1 =
                t => Math.Cos(t * (2.0 * Math.PI)) * 50;

Func<double, /> yFunc1 =
                t => Math.Sin(t * (2.0 * Math.PI)) * 50 * 1.5;

ItemsAlongPathFactory itemsFactory1 =
                new ItemsAlongPathFactory
    TheElementFactory =
	    new ElementFactory
	ThePanelToAddElementTo = Grid1
    DeltaShift = 0.1,
    XFunc = xFunc1,
    YFunc = yFunc1
Storyboard sb1 = new Storyboard();

sb1.Duration = TimeSpan.FromSeconds(0.1);
//sb.AutoReverse = true;
sb1.RepeatBehavior = RepeatBehavior.Forever;


Bezier path multiple point animation is created in the same way using different path functions.

Running Letters Demo

I used the code and concepts described above to create the "Running Letters" demo. The demo simply runs the red dots along the paths specified by "AWebPros" letters. The corresponding code is located in "RunningLetters" VS 2010 project.

Points of Interest

A new, simpler way of creating Silverlight animations along arbitrary mathematical paths using Easing functions has been described in this article. Additionally, this article applies this new approach to creating multiple objects along arbitrary paths animations.


  • 1st February, 2011: Initial post


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


About the Author

Nick Polyak
Architect AWebPros
United States United States
I am a software architect and a developer with great passion for new engineering solutions and finding and applying design patterns.

I am passionate about learning new ways of building software and sharing my knowledge with others.

I worked with many various languages including C#, Java and C++.

I have my Ph.D. from RPI.

here is my linkedin profile

Comments and Discussions

GeneralMy vote of 5 Pin
aszan11-Sep-14 11:45
Memberaszan11-Sep-14 11:45 
GeneralRe: My vote of 5 Pin
Nick Polyak12-Sep-14 5:48
mvaNick Polyak12-Sep-14 5:48 
GeneralMy vote of 5 Pin
gizi24-Apr-13 2:29
Membergizi24-Apr-13 2:29 
GeneralRe: My vote of 5 Pin
Nick Polyak28-Apr-13 16:12
mvaNick Polyak28-Apr-13 16:12 
GeneralRe: My vote of 5 Pin
gizi29-Apr-13 19:27
Membergizi29-Apr-13 19:27 
GeneralRe: My vote of 5 Pin
Nick Polyak30-Apr-13 1:02
mvaNick Polyak30-Apr-13 1:02 
GeneralRe: My vote of 5 Pin
gizi30-Apr-13 21:49
Membergizi30-Apr-13 21:49 
GeneralRe: My vote of 5 Pin
Nick Polyak1-May-13 3:37
mvaNick Polyak1-May-13 3:37 
QuestionCorrupted file? Pin
ramos.fabian26-Aug-11 10:51
Memberramos.fabian26-Aug-11 10:51 
AnswerRe: Corrupted file? Pin
Nick Polyak27-Aug-11 16:36
mvaNick Polyak27-Aug-11 16:36 
GeneralRe: Corrupted file? Pin
ramos.fabian28-Aug-11 11:42
Memberramos.fabian28-Aug-11 11:42 
AnswerRe: Corrupted file? Pin
Nick Polyak27-Aug-11 16:42
mvaNick Polyak27-Aug-11 16:42 
AnswerRe: Corrupted file? Pin
Nick Polyak28-Aug-11 5:59
mvaNick Polyak28-Aug-11 5:59 
QuestionOne query... Pin
Kunal Chowdhury «IN»1-Feb-11 18:09
professionalKunal Chowdhury «IN»1-Feb-11 18:09 
AnswerRe: One query... [modified] Pin
Nick Polyak1-Feb-11 18:26
mvaNick Polyak1-Feb-11 18:26 
AnswerRe: One query... Pin
Kunal Chowdhury «IN»1-Feb-11 18:32
professionalKunal Chowdhury «IN»1-Feb-11 18:32 
GeneralRe: One query... Pin
Nick Polyak1-Feb-11 18:49
mvaNick Polyak1-Feb-11 18:49 
GeneralRe: One query... Pin
Kunal Chowdhury «IN»1-Feb-11 18:58
professionalKunal Chowdhury «IN»1-Feb-11 18:58 
GeneralRe: One query... Pin
Nick Polyak1-Feb-11 19:05
mvaNick Polyak1-Feb-11 19:05 
GeneralRe: One query... Pin
Kunal Chowdhury «IN»1-Feb-11 19:22
professionalKunal Chowdhury «IN»1-Feb-11 19:22 
GeneralRe: One query... Pin
Nick Polyak1-Feb-11 19:40
mvaNick Polyak1-Feb-11 19:40 
GeneralRe: One query... Pin
Kunal Chowdhury «IN»1-Feb-11 19:43
professionalKunal Chowdhury «IN»1-Feb-11 19:43 
GeneralRe: One query... Pin
Nick Polyak1-Feb-11 19:46
mvaNick Polyak1-Feb-11 19:46 
GeneralRe: One query... Pin
Kunal Chowdhury «IN»2-Feb-11 5:00
professionalKunal Chowdhury «IN»2-Feb-11 5:00 
GeneralRe: One query... Pin
Nick Polyak2-Feb-11 7:04
mvaNick Polyak2-Feb-11 7:04 

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.