在主动画循环中执行另一个绘制循环，持续5秒

Execute another draw loop for 5 seconds within the main animation loop?

本文关键字：循环 绘制 持续 5秒 另一个 执行 动画      更新时间：2023-09-26

我有一个带有animate()循环的"简单"游戏，它使用requestAnimationFrame():

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()后的代码

OK，似乎已经得到了它的工作，不得不调用cancelAnimationFrame(animate)之前调用我的drawCollision()代码-也移动了我的'游戏结束'代码内的else for if循环drawCollision

cancelAnimationFrame polyFill包含在以下位置的rAF中:http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

相关文章：