.NET 4.0+

WPF Animation - Key-Frame Animations

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

The one hundred and fifty-eighth part of the Windows Presentation Foundation Fundamentals tutorial describes key-frame animation. This type of animation moves a property between a series of values, with WPF providing automatic interpolation.

Creating a Key-Frame Animation

When you add a key-frame animation, you specify the duration, as with basic from/to animation. You also set the target property using the same Storyboard.TargetProperty attached property. However, you do not set any values in the main object. These are created as key-frame objects within the body of the animation's XAML element.

Let's convert the existing animation to a key-frame animation and look at the syntax. Start by replacing the animation of the TranslateTransform's Y property with the following XAML:

<DoubleAnimationUsingKeyFrames
    Duration="0:0:5"
    Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)">
    <LinearDoubleKeyFrame Value="130" KeyTime="0:0:5"/>
</DoubleAnimationUsingKeyFrames>

The first change is the use of the DoubleAnimationUsingKeyFrames element that defines the entire animation. The "UsingKeyFrames" suffix in the class name follows the standard naming convention for animations that support key-frames. Note that the animation still targets the same property and has a duration of five seconds.

The second change is the introduction of the LinearDoubleKeyFrame object. This specifies that the value of the property should be 130 after five seconds, and that the animation should occur at a constant rate. If you wanted to set an initial value, similar to specifying the From property of a basic animation, you could add another key-frame with a KeyTime of zero.

Run the program to see the results. As before, the ellipse moves to the left and downwards over a five second period. The movement is linear.

Of course, the main reason for using key-frame animations is to specify more than one value. Update the animation again to use four key-frames, as follows:

<DoubleAnimationUsingKeyFrames
    Duration="0:0:5"
    Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)">
    <LinearDoubleKeyFrame Value="0" KeyTime="0:0:1"/>
    <LinearDoubleKeyFrame Value="130" KeyTime="0:0:2"/>
    <LinearDoubleKeyFrame Value="65" KeyTime="0:0:4"/>
    <LinearDoubleKeyFrame Value="130" KeyTime="0:0:5"/>
</DoubleAnimationUsingKeyFrames>

The four key-frames are all linear so the movement between each pair of points happens at a constant rate. The resultant path for the ellipse is shown below.

Using Discrete Key-Frames

As described earlier, a discrete key-frame causes the value of a property to be changed instantly. Let's demonstrate this by including a discrete key-frame in the animation. We'll include linear key-frames too, showing how they can be combined in a single animation.

<DoubleAnimationUsingKeyFrames
        Duration="0:0:5"
        Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)">
    <LinearDoubleKeyFrame Value="0" KeyTime="0:0:1"/>
    <LinearDoubleKeyFrame Value="130" KeyTime="0:0:2"/>
    <DiscreteDoubleKeyFrame Value="65" KeyTime="0:0:4"/>
    <LinearDoubleKeyFrame Value="130" KeyTime="0:0:5"/>
</DoubleAnimationUsingKeyFrames>

The resultant path is illustrated below. Note the jump from 130 to 65 at the four-second point in the animation.