BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Animation - Key-Frame Animations

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.

Uniform Durations

Another option for timing key-frames is to use the Uniform option. This ensures that the time between key-frames is constant. For example, the following example has three uniform key-frames so each causes changes for one third of the duration of the entire animation.

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

The resultant path for the ellipse is shown below. You can see that each step lasts for the same amount of time.

WPF Key-Frame animation with uniform timings

Paced Animation

The final option for timing key-frames is to use the Paced option. A paced animation calculates the end timing for a key-frame based upon the distance it has travelled between the start and end points. If the value at a key-frame is one third of the way between the start and end values, that part of the animation will end after one third of the duration of the animation. If all of the key-frames are linear, this leads to a completely linear animation.

To demonstrate, update the animation, as follows:

<DoubleAnimationUsingKeyFrames
    Duration="0:0:5"
    Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)">
    <LinearDoubleKeyFrame Value="0" KeyTime="Paced"/>
    <LinearDoubleKeyFrame Value="10" KeyTime="Paced"/>
    <SplineDoubleKeyFrame Value="50" KeyTime="Paced" KeySpline="0,1 1,0"/>
    <SplineDoubleKeyFrame Value="100" KeyTime="Paced" KeySpline="1,0 0,1"/>
    <LinearDoubleKeyFrame Value="130" KeyTime="Paced"/>
</DoubleAnimationUsingKeyFrames>

The path of the animation is quite complex. However, you should be able to see that if you were to join the start and end points with a straight line, each key-frame end point would be intersected by that line.

WPF Key-Frame paced animation

11 May 2015