Javascript HTML5逐帧动画（多幅图像）

我一直在为这事发疯。我花了3个小时尝试不同的方法，并在网上找到解决方案，但我仍然没有修复它。 我有两个单独的图像（不是精灵表），它们需要一个接一个地显示，作为动画，无限。以下是我的最新代码：

var canvas, context, imageOne, imageTwo, animation;    

function init(){
  canvas = document.getElementById("canvas");
  context = canvas.getContext("2d");

  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  imageOne = new Image();
  imageTwo = new Image();

  imageOne.src = "catone.png";
  imageTwo.src = "cattwo.png";

  // Just to make sure both images are loaded
  setTimeout(function() { requestAnimationFrame(main);}, 3000);
}

function main(){

  animation = {

    clearCanvas: function(){
      context.clearRect(0, 0, canvas.width, canvas.height);
    },

    renderImageOne: function(){
      context.drawImage(imageOne, 100, 100);
    },

    renderImageTwo: function(){
      context.drawImage(imageTwo, 100, 100);
    }

  };

  animation.renderImageOne();

  // I also tried calling animation.clearCanvas();
  context.clearRect(0, 0, canvas.width, canvas.height);

  animation.renderImageTwo();

  // I put this here to confirm that the browser has entered the function, and that it hasn't stopped after animation.renderImageTwo();
  console.log("cats");
  requestAnimationFrame(main);
}

init();

但问题是，只显示一个图像，并且它不移动。我在控制台中看不到任何错误或警告。我还确信HTML和JavaScript连接正确，图像路径正确。因此，在任何情况下，仅显示第一个函数中的图像。示例：animation.renderImageOne（）；显示catone，但如果我将其替换为animation.renderImageTwo（）；它显示cattwo。

问题在于：

  animation.renderImageOne();

  // I also tried calling animation.clearCanvas();
  context.clearRect(0, 0, canvas.width, canvas.height);

  animation.renderImageTwo();

它是在画第一个图像，清理画布，然后画第二个图像，然后画到屏幕上。让你只看到第二张图片。您需要一个变量来替换值，并使用该变量来确定应绘制的图片：

var canvas, context, imageOne, imageTwo, animation;   
var imageToDraw = "one";

然后：

function main() {

  ...

  if(imageToDraw == "one") {
      animation.renderImageOne();
      imageToDraw = "two";
  }
  else if(imageToDraw == "two") {
      animation.renderImageTwo();
      imageToDraw = "one";
  }

  ...
}

---

注意：您不需要在

main（）

中定义

animation

，您可以将其移动到全局范围。这样你就不用每次调用

main（）

时都重新定义它了。我想知道使用字符串是否是设置“交流发电机”的最有效方法，但无论如何要向上投票：-）@kaido我想这样读可能更容易，我明白你的意思，使用布尔值可能是更好的主意。虽然它确实提供了使用两个以上图像的机会。是的，事实上，如果有很多图像要替换，最好使用数组和递增变量，我在注释中的布尔值仅适用于这一特定的2状态切换。但我明白你的可读性，我认为这是最适合OP的。