javascript - 如何在动画帧上使用减速算法？

Question

我想对正在通过请求动画帧运行的动画使用减速!我知道如何做速度，为了减速我找到了这个项目 https://github.com/gre/bezier-easing .我现在是 TIAS，但不确定该怎么做 https://github.com/gre/bezier-easing .我希望最后看到速度下降 velocity <= parseFloat(attrs.radialBarPercentage) .代码示例:

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

})();

Answer 1

我找到了适合我的解决方案:

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

})();