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.
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;
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
Then move to higher order functions, such as a quadratic one:
f(x) = x * x
Of course you can create the out and in-out versions of these using the definitions.
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.