I think i'm using this easing function wrong. Ease out functions should return larger changes to start, but I'm getting bigger jumps towards the end:
//Current value = Change
25 = 0
27.227575000000005 = 2.227575000000005
31.63817500000001 = 4.410600000000006
38.187700000000014 = 6.549525000000003
46.83250000000002 = 8.644800000000004
57.52937500000003 = 10.696875000000013
70.23557500000004 = 12.70620000000001
84.90880000000004 = 14.673225000000002
101.50720000000004 = 16.598399999999998
What am i doing wrong?
What I want:
https://jsfiddle.net/pqLddvzo/1/
function easeOutCubic(t, b, c, d) {
t /= d;
t--;
return c*(t*t*t + 1) + b;
}
var x = 25;
var i = 0;
while ( x < 100 && i < 500 )
{
let last = x;
//Calculate our new percentage
x = easeOutCubic( i, x, 75, 100 )
//The new value and the change in value
console.log( x + " = " + ( x - last ) );
//move to next step
i++;
}
//Also, why doesn't it take the full number of steps?
console.log( i );
The issue is that I was passing the value returned back into the next call as the "original" value:
x = easeOutCubic( i, x, 75, 100 );
Instead it should be:
x = easeOutCubic( i, 25, 75, 100 )
That field needs to remain unchanged. Only the first parameter should change on each call.