如何在动画帧上使用减速算法?

时间:2015-03-12 12:08:25

标签: javascript animation physics bezier requestanimationframe

我想在我正在运行请求动画帧的动画上使用减速!我知道如何做速度,为了减速我找到了这个项目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);
    }

})();

1 个答案:

答案 0 :(得分:2)

我找到了解决方案,为我工作:

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

})();