CODEWITHSUNDEEP
javascriptanimationphysicsbezierrequestanimationframe
punkbit
punkbit

Reputation: 7717

How to use a deceleration algorithm on a animation frame?

I'd like to use deceleration on a animation I'm running through request animation frame! I know how to do velocity, for deceleration I found this project https://github.com/gre/bezier-easing. I'm now TIAS, but not sure what to do https://github.com/gre/bezier-easing. I expect to see a decrease on speed at the end velocity <= parseFloat(attrs.radialBarPercentage). Code example:

var easing = BezierEasing(0, 0, 1, 0.5);

(function loop() {

    velocity  += (i + velocity) * friction;

    // attempts:
    //velocity = i - easing(i / 100);
    //velocity = (i + velocity) * easing(i / 100);

    if (velocity <= parseFloat(attrs.radialBarPercentage)) {
        $knob.val(velocity).trigger('change');
        i++;
        animationFrame.request(loop);
    }

})();

Upvotes: 3

Views: 431

Answers (1)

punkbit
punkbit

Reputation: 7717

I found the solution, working for me:

// http://cubic-bezier.com/#0.25,0.25,0,1
var easing = BezierEasing(0.25, 0.25, 0, 0.9),
            i = 0,
            stepIncrementAmount = 0.25;

(function loop() {

    // sorry about the * 100 but that's what $knob expects, scale range 0 > 100, and easing needs 0 to 1
    velocity = easing(i / 100) * 100;

    if (velocity <= parseFloat(attrs.radialBarPercentage)) {
        $knob.val(velocity).trigger('change');
        i += stepIncrementAmount;
        animationFrame.request(loop);
    }

})();

Upvotes: 2

Related Questions