Path Animation

In recent articles we've seen simple from/to animation and key-frame animation. These allow you to change a property from one value to another, with the option of defining intermediate values as key-frames. In each case, WPF creates smooth animations by using interpolation functions to determine transitional positions. These types of animations are quick to code and can be very effective, especially when combined with easing functions for natural acceleration and deceleration during the animation.

The third type of animation is the path animation. It allows you to create a path geometry and animate properties so that they follow that geometry. The path can include straight lines, arcs and Bézier curves, joined together in any order, allowing very complicated animations.

You can apply a path animation to either a Point property or a Matrix. For points, the animation causes the point's co-ordinates to follow the path over a given duration. With a matrix, you can also rotate the animated element as it tracks along the path.

To demonstrate, we'll create a simple example that animates a shape along a path made from lines and arcs. To begin, create a new WPF application is Visual Studio. Name the solution, "PathAnimationDemo". Once the environment is ready, replace the XAML of the main window with the code below:

The XAML creates a window containing a Canvas with one child. The child is a shape made from a Path object. It appears as a small, rocket shape, as shown below. Note that the style for the rocket includes a matrix transformation with a default matrix. This matrix will be the target for the animation.

Adding a Path Animation

Adding the path animation is achieved in much the same manner as with other animation types. We'll create an event trigger that fires when the rocket is clicked. This contains a storyboard that holds the animation. In this case, as we are animating the matrix, we'll use a MatrixAnimationUsingPath animation. As before, we need to tell it which property to animate, using the Storyboard.TargetProperty attribute, and the duration for the entire animation. In addition, we need to create the path geometry in the PathGeometry.Figures property.

Add the following Style.Triggers element to the style for the shape. You can see that the target property is the matrix being animated. The duration is five seconds and the path geometry defines a single figure. That figure contains two lines and two arcs.

Run the program and click the rocket to see the results. You should see it follow the path geometry. The image below shows the final position of the shape. The red dots show the path followed.

When you run the program and animate the rocket you will see that the shape remains unchanged for the duration of the animation. The rocket always points to the right. Sometimes, with a path animation, it is better to rotate the animated object to point along the path at all times. Handily, WPF supports automatic rotation. All you need to do is set the DoesRotateWithTangent property to true.

Update the animation element to add the rotation property, as follows: