.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.

Using Spline Key-Frames

Spline key-frames use a cubic Bézier curve to calculate the value of the target property at any point during the animation. To understand the calculation, consider the image below.

The grid represents the ratios for the time of the animation up to the key-frame and the distance between the previous value and the current one. The red line is the Bézier curve generated by two control points, shown as arrows. As the curve is based upon ratios, the grid is always defined as the area between the co-ordinates (0,0) and (1,1).

In the image, a numeric value animated using the control points would move towards the destination value for approximately one third of the duration before reversing. At around two thirds of the time of the animation, it would change direction again and accelerate towards the final value.

When you create a spline animation, you add an extra property named, "KeySpline". This holds the two control points as two pairs of co-ordinates. The control points can cause the property value to extend outside of the range defined by the start and end values. However, a Bézier curve that moves outside of the boundaries on the time dimension, which is the horizontal axis in the image above, will cause an exception.

Let's add a spline key-frame to our animation:

<DoubleAnimationUsingKeyFrames
        Duration="0:0:5"
    Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)">
    <LinearDoubleKeyFrame Value="0" KeyTime="0:0:1"/>
    <SplineDoubleKeyFrame Value="130" KeyTime="0:0:4" KeySpline="0.3,-0.5 0.7,1.5"/>
    <LinearDoubleKeyFrame Value="130" KeyTime="0:0:5"/>
</DoubleAnimationUsingKeyFrames>

The change causes the following animation path:

Percentage Durations

When you use key-frame animations you can define the timing for key-frames in several ways. So far, we've used TimeSpan values, defined as strings in the KeyTime properties. Another option is to specify a percentage value between zero and 100, followed by the percent symbol (%). This uses a percentage of the duration of the entire animation for the key-frame time. If the animation's duration is amended, the key-frame positions move accordingly.

Replace the sample animation with the following XAML.

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

This animation uses the 10%, 90% and 100% positions for its key-frames. As the entire animation is five seconds long, the key-frames occur at 0.5, 4.5 and 5 seconds.