我有一个球以逐渐增加的速度下落的基本动画。
它最初以预期的速度在某种程度上按预期工作。所以在 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 后清除动画。
最佳答案
主要原因是您将 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);
});
});
您还可以通过更新其属性来重置球。
关于javascript - 如何用requestAnimationFrame优化js动画并引入delta?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21883398/