如何使用 requestAnimationFrame 优化 js 动画并引入 delta？答案

【问题标题】：How to Optimize js animation with requestAnimationFrame and introduce delta?如何使用 requestAnimationFrame 优化 js 动画并引入 delta？
【发布时间】：2014-03-19 22:55:38
【问题描述】：

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

DEMO

它最初以预期的速度在某种程度上按预期工作。所以点击画布我们可以重复动画，所以每次我们可以看到球的速度不断增加。点击 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。为什么它最初以预期的速度工作？我更喜欢在球移出画布后清除动画。

【问题讨论】：

标签： javascript animation canvas html5-canvas frame-rate

【解决方案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

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

【讨论】：

+1。 @Sarath 你误解了requestAnimationFrame 的工作原理。这就像一个事件：您要求浏览器在下一帧调用animate。这就像一个异步循环，因为animate会再次请求浏览器在下一帧调用animate……当这个过程开始时，你所要做的就是修改ball的内容，它会自动绘制到下一帧。
我唯一的建议是使用球的重置方法，而不是每次点击都创建一个新球，因为创建一个新球会产生旧球的垃圾。就原始问题而言，需要重置速度和位置，而不仅仅是半径。可能过早地考虑过度优化，但牢记垃圾收集器永远不会有坏处。更新小提琴：jsfiddle.net/qYYmJ/4

【解决方案2】：

这是你的小提琴的一个分支：http://jsfiddle.net/8egrw/

注释掉这一行：

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

【讨论】：