.NET 4.0+

WPF Animation - Easing Functions

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

The one hundred and fifty-seventh part of the Windows Presentation Foundation Fundamentals tutorial continues to look at animation. This article describes easing functions, which allow basic animations to be adjusted for more natural or interesting appearance.

Easing

In the previous article we looked at the basic animations, which allow you to change a change a property from one value to another. WPF uses automatic interpolation to calculate all of the intermediate values. We looked at the most basic, linear animation. We also considered acceleration and deceleration ratios, which make movements appear more natural.

Another way to affect the interpolation is to apply an easing function. Easing functions accelerate and decelerate the animation in more complex ways than the simple ratios. They can be as simple as a circular easing function, which increases the acceleration throughout the animation. They can also be quite complex, such as the back easing function, which causes a value to overshoot its target, reverse direction and return.

In this article we'll describe the easing functions provided by WPF and create example animations that use some of the more common options. To begin, create a new WPF application in Visual Studio. Name the new solution, "AnimationEasingDemo". Once prepared, replace the XAML of the main window with the code below:

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

    <Window.Resources>
        <Style x:Key="EllipseEasing" 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>
    </Window.Resources>

    <Canvas>
        <Ellipse Style="{StaticResource EllipseEasing}" Canvas.Top="30" />
    </Canvas>

</Window>

The above XAML creates a window containing a Canvas and a small Ellipse. You can see that the style for the ellipse includes setting the RenderTransform to a TranslateTransform that initially does not move the shape. We'll animate this transform when the ellipse is clicked. To do so, add the following event trigger and animations to the style:

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

Run the program to see the results. Initially the ellipse will appear near the top-left of the window. Click it to trigger the animation. It will move downwards and to the right at a constant speed.

The image below shows the final position for the ellipse. The red dots, which do not appear in the actual example, show the path that the shape travels.