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

Key-Frame Animation

In earlier articles in the WPF tutorial we've seen some of the simple animation features provided by WPF. We first saw linear animations that gradually change a property's value from a starting value to a final result, with the intermediate positions calculated without any additional coding. We extended the linear interpolation of values with acceleration and deceleration ratios and with easing functions, which provide natural effects such as bouncing and elastic animation. However, they still only permit a value to be animated between two values.

In this article we will look at key-frame animation. This gives you more control over the intermediate stages by allowing you to specify a series of values, known as key-frames. Each key-frame provides a value for a property and the time at which the property should reach that value. WPF essentially treats each pair of key-frames as an animation in its own right. However, grouping them in a key-frame animation adds extra features, such as the ability to uniformly distribute key-frames over the duration of an animation or to specify the length of time between key-frames as a percentage of the entire animation's duration.

Key-Frame Types

When you build a key-frame animation, you create a container that holds a series of key-frames. You can choose from three types of key-frame, though not all are available for all of the data types that can be animated. The three types are known as linear, discrete and spline:

Linear Key-Frames. Linear key-frames provide animation similar to that which we have seen in earlier articles. The property being animated moves from its current value to the target value over the specified period of time. The movement occurs at a constant rate. Linear key-frames cannot be used for animating Boolean values, matrices, objects or strings. The classes that control linear key-frames are named Linear[Type]KeyFrame. For example, LinearDoubleKeyFrame.

Discrete Key-Frames. Discrete key-frames change a property's value instantly at the time specified, with no interpolation. They are available for all types that can be animated using key-frames. The classes for discrete key-frames are named Discrete[Type]KeyFrame. For example, DiscreteBooleanKeyFrame.

Spline Key-Frames. Spline key-frames are the most complex. They allow you to create more natural animations. They use mathematics similar to that used when creating cubic Bézier curves to determine the relative position of a property's value over the period of change. The classes for spline key-frame animation types are named Spline[Type]KeyFrame. For example, SplineColorKeyFrame. Spline key-frames cannot be used with Booleans, matrices, objects or strings.

To demonstrate the use of key-frame animations, we need a sample application. Create a new WPF application in Visual Studio named, "KeyframeAnimationDemo". Once the solution is ready, replace the XAML of the main window with the code below:

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

    <Window.Resources>
        <Style x:Key="EllipseAnim" TargetType="Ellipse">
            <Setter Property="Width" Value="20"/>
            <Setter Property="Height" Value="20"/>
            <Setter Property="Fill" Value="Black"/>
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <TranslateTransform X="0" Y="0"/>
                </Setter.Value>
            </Setter>

            <Style.Triggers>
                <EventTrigger RoutedEvent="MouseDown">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation From="0" To="260" Duration="0:0:5"
                                Storyboard.TargetProperty
                                    ="RenderTransform.(TranslateTransform.X)"/>
                            <DoubleAnimation From="0" To="130" Duration="0:0:5"
                                Storyboard.TargetProperty
                                    ="RenderTransform.(TranslateTransform.Y)"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

    <Canvas x:Name="MyCanvas">
        <Ellipse x:Name="MyEllipse" Style="{StaticResource EllipseAnim}" Canvas.Top="30" />
    </Canvas>
</Window>

This example code is similar to that of the previous article. It creates a window containing an Ellipse. When you click the Ellipse, it moves to the right and downwards, following the path shown below. The animation does not yet use key-frames.

NB: The red dots show the path of the ellipse caused by the animation. They are not visible in the sample program.