Silverlight Animations along Arbitrary Mathematical Paths via Easing

• Download source code - 25.91 KB

Introduction

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.

Background

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:

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);
animation1.SetStoryboard(sb1);
sb1.RepeatBehavior = RepeatBehavior.Forever;
sb1.Begin();

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);
itemsFactory1.SetStoryboard(sb1);
//sb.AutoReverse = true;
sb1.RepeatBehavior = RepeatBehavior.Forever;

sb1.Begin();

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.

History

• 1^st February, 2011: Initial post