Smooth decrease in number with acceleration or deceleration

Asked Aug 26 '19 at 17:47

Active Aug 26 '19 at 17:51

Viewed 329 times

I have coordinates, and I need them to decrease smoothly with a slowdown in the end. For example: 40, 20, 10, 5, 2.5, 1.25, 1.125, 0.925 and so on to ~0 The launch is quick, and the end is smooth.

I tried to use setInterval, and multiply by 0.9 each millisecond. But when it stops number is still either too much higher than the required number or too missed.

var friction = 5,
    frict = setInterval(function()
{
    sprite.position.x -= friction;
    if (sprite.position.x <= finishline.x)
    {
        friction *=0.9;
        if (friction < 0.05)
        {
            clearInterval(frict);
        }
    }
},5);

I expect the number 50 to smoothly drop to 0 in a short time and a noticeable smooth deceleration at the end.

edited Aug 26 '19 at 17:51

asked Aug 26 '19 at 17:47

AnimateMe

switch to a repeating setTimeout, setInterval's interval is fixed – Lawrence Cherone Aug 26 '19 at 17:49
4

maybe you can inspire from css easing formulas : http://gizma.com/easing/#l – Taki Aug 26 '19 at 17:51
@Taki Why on earth does a CSS easing demo need flash? – Etheryte Aug 26 '19 at 17:56
@Nit i guess it's an old website that uses flash, and re-reading my comment got me thinking that `Css easing` might be misleading, as `easing` is not restricted to css, it's used in action script too, – Taki Aug 26 '19 at 18:03

Smooth decrease in number with acceleration or deceleration

0 Answers0