Tweening and Easing

by Martin Thomas

Tweening (inbe-tween-ing) is the process of generating intermediate states between a start state and an end state. For example, if you drop a ball it won’t immediately stop when it reaches the ground, but it will bounce some until it comes to rest. If you consider the ball’s Y axis position, you can establish a function that describes the ball’s motion from A (your hand) to B (the ground) as a function of time (x). Tweening functions usually take a value between 0 and 1, and output a value usually between 0 and 1.

Tweening functions

Tween on!

Types of tweens

There are three types of tween functions:

-in-tweens, that go slow first, then after about x=0.5 they quickly converge to 1.

-out-tweens, that behave the opposite way: move quickly until about x=0.5, then slowly converge to 1

-in-out-tweens, that combine the two: start slow, go fast at around x=0.5, then converge slowly to 1. We also establish a requirement that at x=0.5 f(x)=0.5 should hold.

Defining tween functions

Based on this, we can define the in-tween function as:

y = f(x)

To get the out-tween function from the in-tween, we need to start fast, so we’ll need to flip the time input (x = 1 – x), but this would result in starting with y=1, so we’ll need to flip the overall output too:

y = 1 – f(1 – x)

The in-out-tween function will be the combination of the in and out function, sort of stitching together the two functions at x=0.5.

If x<0.5 then we’ll need the in-tween function. However if we’d use it as-is, we wouldn’t get f(x)=0.5 at x=0.5. So we need to squeeze the function along the x axis, x = 2 * x, and we also need to halve the amplitude, so that at x=0.5 f(x)=0.5.

If x>=0.5 then we’ll need the out-function. Again, we’ll need to modify it to get the desired output: continuity at x=0.5, slow convergence to y=1. Therefore we need to start with x=0: x = x – 0.5, and again squeeze the function along the x axis: x = (x – 0.5) * 2. Then we need to halve the amplitude f(x) = f(x) * 0.5, and add 0.5 to it to have it start at 0.5.

Putting it together this is how the generic in-out function will look like:

if( x < 0.5 )
{
y = f( x * 2 ) * 0.5;
}
else
{
y = ( 1 – f( 1 – ((x – 0.5) * 2) ) ) * 0.5 + 0.5;
}

Using the generic tween definition to create tweening functions

We can start with a linear function:

f(x) = x

f(x) = x

Linear tween function

Then move to higher order functions, such as a quadratic one:

f(x) = x * x

f(x) = x * x

Quadratic tween function

Of course you can create the out and in-out versions of these using the definitions.

Quadratic out-function

Quadratic out-function

Quadratic in-out function

Quadratic in-out function

Note that you can also use generic splines and curves to create custom tween functions, but that’s a whole another story.

You can find lots of examples of these here: https://github.com/sole/tween.js

ps.: Happy holidays 🙂 Stay tuned in 2015.

Advertisements