javascript - 如何用requestAnimationFrame优化js动画并引入delta？

Question

我有一个球以逐渐增加的速度下落的基本动画。

DEMO

它最初以预期的速度在某种程度上按预期工作。所以在 Canvas 上单击我们可以重复动画，所以每次我们都可以看到球速不断增加。 5-6 次点击后球高速移动。

帧速率和每帧的预期单位移动也是问题。 ？

<强>1。如何减少/优化循环调用？，并在每次点击时获得恒定的速度。

我不想更改 Ball 模型中的值，但必须减少 ball.update() 的时间。

var ball = new Ball(10,10,20);

function animate() {    
    ctx.fillStyle = "#CCC";
    ctx.fillStyle = "#CCC";
    ctx.fillRect(0, 0, 500, 500);    
    ball.update();
    ball.draw(ctx);
    requestAnimationFrame(animate); // add timestamp to optimize ?
}

点击重置动画是这样的

$("#element").on('click', function () {
      ball = new Ball(10,10,20)
      requestAnimationFrame(animate);
});

和2。为什么它以预期的速度初始工作？我更喜欢在球移出 Canvas 后清除动画。

Answer 1

主要原因是您将 setTimeout 与 requestAnimationFrame 结合使用，这有点违背了它的目的。

不仅您的 rAF 是由不准确的计时器触发的，而且当 rAF 启动时，您不确定您是否会获得该轮的帧，这会产生不稳定的结果。

更改这些行:

setTimeout(function () {
    animationId = requestAnimationFrame(animate);
}, 1000/60);

到

//setTimeout(function () {
animationId = requestAnimationFrame(animate);
//}, 1000/60);

然后像 Greg 的回答一样重置你的球。无需再次调用 rAF，因为它已经在运行:

$(function(){    
    requestAnimationFrame(animate);    
    $("#element").on('click', function () {
      ball = new Ball(10,10,20);
    });
});

Modified fiddle

您还可以通过更新其属性来重置球。