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