Question

此动画应在10秒后停止播放（停止下雪）。我在底部添加了一个函数，但它实际上在10秒后启动动画，而不是在10秒后停止动画。

我只希望它总共播放10秒钟，然后马上开始，看看我的代码，看看我的意思。

setTimeout(function() {
createSnow(20);
loop();
}, 10000)

这是一个代码，看看我的意思： https://codepen.io/celli/pen/XzzjRW

Answer 1

您要做的是创建一个＆＃34;计时器＆＃34;，找出您开始时和当前时间之间的差异。

我不确定你是否想要createSnow(20)在循环内部，所以我把它放在之前，作为初始化。

createSnow(20);

const start = new Date();
while(new Date() - start < 10000) {
  loop();
}

Answer 2

你很亲密。你只需要一种方法告诉系统停止动画循环。请参阅我的codepen：https://codepen.io/intervalia/pen/zPPoBZ

我添加了一个变量来指示是否应该进行动画：

var animating = true;

停止动画的例程：

function stopAnimation() {
  animating = false;
  //Add something in here to clear the screen
}

动画循环中的验证检查：

function loop() {
  if (animating) {
    draw();
    update();
    animFrame(loop);
  }
}

并更改了超时以关闭动画：

createSnow(150);
loop();

setTimeout(stopAnimation, 10000);

酷动画!!

Answer 3

使用cancelAnimationFrame。

样本用法

声明cancelAnimFrame：

var cancelAnimFrame =
  window.cancelAnimationFrame ||
  window.mozcancelAnimationFrame ||
  window.webkitcancelAnimationFrame ||
  window.mscancelAnimationFrame;

更新loop功能：

var animId;
function loop() {
  draw();
  update();
  animId = animFrame(loop);
}

并使用animId停止动画。（如前所述，开始下雪应该超出setTimeout。）

createSnow(20);
loop();
setTimeout(function() {
  cancelAnimFrame(animId)
}, 1000)

Answer 4

您需要更改的唯一内容是对代码进行一些更改，请参阅以下代码：

x[i][j]

停止javascript循环，setTimeout

4 个答案:

样本用法