How to do deceleration algorithm on RequestAnimationFrame

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). And this is how I solve it:

// 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);
    }

})();
comments powered by Disqus