Easing Guide

Easing is available starting in 4.0.

Introduction

Easing functions take a linear progression and change it to a non-linear one. This allows animations or changes in color to appear smooth by slowing as they approach their target value. Easing is (or will be) available for any number of changes that could happen throughout the engine. Easing functions can also be accessed by you directly to make a smooth custom animation of some kind. Easing can be used in any case where a value is changing to another value. For example, an object moving from one point to another, a sound changing volume over time, or even tiles that are gradually more blue as they are closer to a blue light. In every case the names of the easing functions are the same.

Direct Use

To call an easing function, you just need to call mEase() and pass it the name of the easing function and a value, like so:

%val = mEase(EaseInOut, 0.8);

The value you put in will be a linear progress from 0 to 1 and should not go outside of 0 to 1. The value you get back will also be from 0 to 1 but might go outside of 0 and 1 depending on the easing function you choose. This is important to remember if you are working with a value like color that can't go lower than 0 or above 1.

Now let's look at an example. Say you had a ball sprite that you wanted to move from (10,0) to (30, 0) but you wanted to back up a little and then shoot past the target position and back into it. Disclaimer: you would probably want to do this with an object that is not using collisions and you wouldn't want to do this with a large number of objects at once. This is just an example.

%ball.schedule(50, "playMoveAnimation", 0);

function SuperBall::playMoveAnimation(%this, %time)
{
	%time += 0.05;
	%progress = mEase(EaseInOutElastic, %time);
	%this.setPositionX(10 + (20 * %progress));

	if(%time < 1)
	{
		%this.schdule(50, "playMoveAnimation", %time);
	}
}

List of Easing Functions

Here's a complete list of easing functions that you can use in mEase() or other places that use easing.

• EaseIn - Starts slowly and accelerates to the end.
• EaseOut - Starts quickly and slows down as it approaches the target.
• EaseInOut - Starts and ends slowly.
• EaseInBack - Backs up a little before accelerating to the target. Note that this produces values less than zero.
• EaseOutBack - Passes the target and backs into it. Note that this produces values greater than one.
• EaseInOutBack - First backs up, then accelerates pass the target and backs into it. Note that this produces values less than zero and greater than one.
• EaseInElastic - Oscillates slightly before moving to the target. Note that this produces values less than zero.
• EaseOutElastic - Quickly moves to the target and then oscillates slightly as it settles into places. Note that this produces values greater than one.
• EaseInOutElastic - Oscillates slightly, moves to the target, and then settles into places. Note that this produces values less than zero and greater than one.
• EaseInBounce - Uses a gradually increasing bounce to reach the target.
• EaseOutBounce - Moves to the target and then bounces a few times when it arrives.
• EaseInOutBounce - Bounces to the target and then bounces a few times before coming to rest.

To learn more about easing functions and to see some graphs and animations for each, trying going to easings.net.