.NET 4.0+

WPF Animation - Path Animations

by Richard Carr, published at http://www.blackwasp.co.uk/WPFPathAnimation.aspx

The one hundred and fifty-ninth part of the Windows Presentation Foundation Fundamentals tutorial is the final instalment to consider animation. This article describes path animation, which moves elements using complex path geometries.

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:

<Window x:Class="PathAnimationDemo.MainWindow"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Path Animation Demo" Height="250" Width="300">

    <Window.Resources>
        <Style x:Key="AnimationStyle" TargetType="Path">
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <MatrixTransform/>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Canvas>
        <Path Stroke="Black" StrokeThickness="1" Fill="Blue"
              Data="M0,0 L5,0 L10,5 L20,5 L25,10 L20,15 L10,15 L5,20 L0,20 L3,10Z"
              Canvas.Top="10"
              Style="{StaticResource AnimationStyle}" />
    </Canvas>
</Window>

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.

<Style.Triggers>
    <EventTrigger RoutedEvent="MouseDown">
        <BeginStoryboard>
            <Storyboard>
                <MatrixAnimationUsingPath
                    Storyboard.TargetProperty="RenderTransform.(MatrixTransform.Matrix)"
                    Duration="0:0:5">
                    <MatrixAnimationUsingPath.PathGeometry>
                        <PathGeometry Figures="M0,0 L50,0 A100,100 0 0 1 150,100
                                               A50,50 0 1 1 100,50 L200,50" />
                    </MatrixAnimationUsingPath.PathGeometry>
                </MatrixAnimationUsingPath>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Style.Triggers>

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:

<MatrixAnimationUsingPath Storyboard.TargetProperty="RenderTransform.(MatrixTransform.Matrix)"
                          Duration="0:0:5" DoesRotateWithTangent="True">

Try running the program and starting the animation. The rocket should rotate whilst following the path, for a more realistic result.