Question

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

它有点像预期的那样在最初具有预期的速度。所以在点击画布时我们可以重复动画，所以每次我们都可以看到球的速度不断增加。 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。为什么它始终以预期的速度工作？我更喜欢在球离开画布后清除动画。

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

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

Answer 2

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

注释掉这一行：

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

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

2 个答案: