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

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.

Curved Easing Functions

There are a number of basic easing functions that accelerate or decelerate the animation for its entire duration. They include the CircleEase function that we've seen above and QuadraticEase, CubicEase, QuarticEase, QuinticEase and SineEase. The first four base the progress of the animation upon a power of the time. The fifth uses a sine function to calculate the intermediate values.

Most easings use a fixed function. However, some easing functions have additional properties. For example, ExponentialEase accelerates or decelerates the animation based upon an exponential function. You can set the exponent value using the Exponent property; higher values mean less acceleration at the start of the standard function's animation and higher acceleration later. PowerEase allows you to base the easing on any power, including those of QuadraticEase, etc. The power is set using the Power property.

To demonstrate, change the easing function for the transform's Y property, as follows, to use an exponential easing function with an exponent of one:

<ExponentialEase EasingMode="EaseIn" Exponent="1"/>

The path of the ellipse is as shown below:

WPF Animation Exponential Easing with exponent of 1

Try increasing the Exponent value to ten:

<ExponentialEase EasingMode="EaseIn" Exponent="10"/>

The higher value causes the acceleration to be concentrated at the end of the animation:

WPF Animation Exponential Easing with exponent of 10

Back Ease

The previous examples show simple easing functions. They modify the speed at which a property changes but not the range through which it moves or the direction of its travel. BackEase is more interesting because it does cause the property's value to move outside of the range defined by the starting and ending values.

Depending upon the easing mode selected, the value can start to move in the opposite direction to normal, before reversing and heading towards the final value. It can also move beyond the target before returning. You can control how far past the start and end values the animation moves using the Amplitude property, which must be greater than or equal to one.

Try changing the easing function to a BackEase using EaseInOut mode:

<BackEase EasingMode="EaseInOut"/>

Run the program to see the results. With the mode set to apply both the standard and inverse functions, the initial movement is upwards, instead of downwards. The ellipse moves below the target value before changing direction and stopping at the specified end position.

WPF Animation BackEase function

NB: As the value moves outside of the range defined by the start and end values, it is possible for a property to be set to an invalid value. This can cause an exception to be thrown.

7 May 2015