Question

On this great web page I found a list of easing algorithms that can add nice visual appeal to my webpages.

Despite, I found there brief mention of the function arguments (see below), the algorithm does not behave as I would wish. Can I kindly ask for explanation on what values/ranges should be entered into the arguments of the function below mentioned?

Argument list:

• t: current time – should here be values 0…1, or real number of the current frame?
• b: start value – I assume, a start X or Y coordinate of the object being moved
• c: change in value – can here be number 1 all the time for all the frames?
• d: duration – the number of frames altogether?

Math.easeOutCubic = function (t, b, c, d) {
    t /= d;
    t--;
    return c*(t*t*t + 1) + b;
};

Should the values be incrementally added to the last value obtained from the function, or should they be added to the initial 0 position?

Answer 1

You’re right, d is for duration and t is current time. Therefore, t should be from 0 to d.

c is a total change, should be equal to end value – start value.

• For t = 0 we have c*(-1 + 1) + b or b
• For t = d we have c*(0 + 1) + b or b + c

Function would be the same for any fps, it’s up to you how frequently update position and call the function.