javascript - 在主动画循环中执行另一个绘制循环 5 秒？

Question

我有一个使用 requestAnimationFrame() 的 animate() 循环的“简单”游戏：

function animate(currentTime) {
  if(playGame) {
    requestAnimationFrame( animate );
  }

  if(isCollide) {
    endTime = currentTime + 5000;
    drawCollision(currentTime);
  }

}

我想运行 drawCollision() 代码 5 秒，所以我做了这样的事情：

function drawCollision(currentTime) {

  if(playCollide) {
    requestAnimationFrame( drawCollision );
  }

  if(currentTime < endTime) {
    drawImage(image, x, y, height, width, rotation);
  } else {
    playCollide = false;
  }

}

但是，两个 rAF 调用似乎同时运行？或者，在运行 drawCollision 时至少执行调用 drawCollision() 之后的代码。

Answer 1

好的，似乎已经让它工作了，必须cancelAnimationFrame(animate)在调用我的代码之前调用drawCollision()- 还将我的“游戏结束”代码移动到 else 中，用于 drawCollision 中的 if 循环。

polyFillcancelAnimationFrame包含在 rAF 中，可在以下网址找到：http: //www.paulirish.com/2011/requestanimationframe-for-smart-animating/