Animation Curves and Tweening; Understanding Animation Curves

These equations are by Robert Penner, you can find a document here that explains this in much greater detail:
www.robertpenner.com/easing/

The correct linear tween function looks like this:

float linear_tween(float t, float start, float end)
{
    if (t > 1.0f) return end;
    return t * end + (1.0f - t) * start;
}

t is the time since the start of animation started and it has to be between 0 and 1, start and end are the values that you want to interpolate between them…

To understand this equation you can so something very simple, assume start is 1 and end is 20, then at timestep 0 you will have:

0 * end + (1 – 0) * start => start

At time step 1 which is the end of your animation you get:

1 * end + (1 – 1) * start => end

And all the values between these are going to be interpolated linearly.

Now quadratic ease in function is where the changes in interpolated value are smaller in the beginning and larger at the end, how can we achieve this? We can do it by faking the time steps, if you we could somehow make it so that the time steps would look smaller to the linear tween function at the start of the animation and larger at the end, then we would achieve this, that way, in the beginning, the time steps look smaller so the function will change the value by just a little bit but at the end, the time steps look larger so the function will change the value by a larger amount.

The way to do this is very easy, the fact that the time step number is clamped to between 0 and 1 will help us in this case and this is the solution:

float quadratic_easein(float t, float start, float end)
{
    if (t > 1.0f) return end;
    return linear_tween(t * t, start, end);
}

When we multiply the time step by itself the numbers that are less than one get smaller, for example if you are at the time step 1/10th of a second:

1/10 * 1/10 => 1/100
2/10 * 2/10 => 4/100 (3/100 change)
3/10 * 3/10 => 9/100 (5/100 change)
4/10 * 4/10 => 16/100 (7/100 change)
…
8/10 * 8/10 => 64/100
9/10 * 9/10 => 81/100 (17/100 change)

Now let’s look at quadratic_easeout:

float quadratic_easeout(float t, float start, float end)
{
    if (t > 1.0f) return end;
    return linear_tween(2 * t - t * t, start, end);
}

Deriving 2*t – t*t is very easy knowing the fact above; to do this we need to reverse what happens above so we can do something:

t = 1 – t;

Now 1/10 becomes 9/10 so when we do:

t = t * t

The numbers are going to change more at the beginning of the time step but the problem is that now we converted 1/10 to 9/10 and t*t will result in 81/100 and that’s the end of our time step and the animation will play backwards, to fix it we need to do:

t = 1 – t

One more time so then 81/100 becomes 19/100, now let’s simplify this:

1 – t => 1 – t * t => 1 – ((1 – t) * (1 – t)) => 1 – (1 – t – t + t * t) => 2 * t – t * t

I hope this helps