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

Bounce Ease

Another interesting easing function is provided by BounceEase. This easing function creates a bouncing effect. When used with EaseIn, the amplitude increases with each bounce, with the final bounce stopping at the target value. With EaseOut, the value rapidly accelerates from the start value to the end value, then bounces back towards the start value. Each subsequent bounce is smaller.

Change the easing function to BounceEase with the EaseOut mode.

<BounceEase EasingMode="EaseOut"/>

Run the program to see the results. The ellipse should appear to bounce as it travels to the right, before settling at the final position.

WPF Animation BounceEase function

There are two properties that you can use to affect the easing function. Bounces sets the number of bounces that will occur instead of the default number of three. Bounciness determines how far the value will bounce back between each bounce. This defaults to two, indicating that each bounce is double the size of the previous, or half the size for the inverse function.

Modify the easing function to increase the number of bounces and decrease the bounciness, as follows:

<BounceEase EasingMode="EaseOut" Bounces="4" Bounciness="1.5"/>

The resultant animation causes the ellipse to follow the path shown below:

WPF Animation BounceEase function with additional properties

Elastic Ease

As the name suggests, ElasticEase creates animations that simulate elastic movement. The value moves away from the original value, then springs back towards, and past, the starting value. This oscillation continues until the final value is reached. When easing in, the oscillations grow in size. With EaseOut, the amplitude reduces with each oscillation.

Try changing the easing function for the animation of the transform's Y property, as follows:

<ElasticEase EasingMode="EaseOut"/>

With the default, inverse function, the path is as shown below:

WPF Animation ElasticEase function

You can modify the number of oscillations from the default value of three using the Oscillations property. You can also affect the size increase for each oscillation using Springiness.

Let's increase the oscillation count and the springiness:

<ElasticEase EasingMode="EaseOut" Oscillations="5" Springiness="6"/>

The animation now follows the path shown in the final image.

WPF Animation ElasticEase function with additional properties

7 May 2015