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

All of the easing functions have three modes. You can choose from the following options by setting the EasingMode property to a value from the EasingMode enumeration:

• EaseIn. Applies the standard easing function for the entire duration of the animation.
• EaseOut. Applies the inverse of the standard function for the entire animation.
• EaseInOut. Applies the standard function to the first half of the animation, followed by the inverse function for the remainder of the time.

We can demonstrate the difference between the modes with the circle easing function, which is one of the simplest. This function applies a circular function to accelerate or decelerate the animation. Let's start by adding the easing to the animation of the Y property of the transform. We'll leave the X animation linear so that the easing function's effect is easy to see.

Replace the DoubleAnimation for the Y property with the code below. Note the use of the EasingFunction property of the animation class. We've set this to a CircleEase instance to use the circular easing function. In this case, we are using the EaseIn option to apply the standard function.

<DoubleAnimation From="0" To="130" Duration="0:0:5"
                 Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)">
    <DoubleAnimation.EasingFunction>
        <CircleEase EasingMode="EaseIn" />
    </DoubleAnimation.EasingFunction>
</DoubleAnimation>

The image below shows the new path for the animation. You can see that the animation starts with slower movement than the original. It accelerates throughout the duration of the animation to end at the target value after the specified duration.

Let's invert the easing function by changing the CircleEase to use the EaseOut option:

<CircleEase EasingMode="EaseOut" />

The result is shown below. You can see that the function is inverted when compared to the previous example.

Now let's look at the result of the EaseInOut option:

<CircleEase EasingMode="EaseOut" />

The easing function now combines the EaseIn and EaseOut versions, each applied over half of the range and duration of the animation.