HTML5逐帧动画（多张图片）

Question

我一直在想这件事。我花了 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。

Answer 1

问题出在这里：

  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() 时重新定义它。