使用 JavaScript 使用一堆 png 文件制作类似 gif 的动画？

Question

尽管我尽了一切努力从一堆 png 文件中制作出高质量的类似 gif 的动画，但我仍然遇到错误...我遇到了很多错误，例如 "document.getElementById is not a function" 和 "Uncaught TypeError: Cannot set property 'src' of null"。我决定在这里问我做错了什么。这是我在某个地方找到的旧代码，我一直在尝试使用它：

<script>

var min = 1;
var max = 12;
var current = min;

var keep_switching_icon = true;

function rotateIcon() {
  if (keep_switching_icon) {
    var nyanframe = document.getElementById('nyan')
    nyanframe.src = ({path:"nyan" + current + ".png"});
    console.log(current);
    if (current++ > max) {
      current = min;
    };

    window.setTimeout(rotateIcon, 300);
  }
}

rotateIcon();

</script>

<body>

<img src="nyan1.png" id="nyan"></img>

</body>

Answer 1

尝试用 nyanframe.src = "nyan" + current + ".png"; 代替 nyanframe.src = ({path:"nyan" + current + ".png"});

var min = 1;
var max = 12;
var current = min;

var keep_switching_icon = true;

function rotateIcon() {
  if (keep_switching_icon) {
    var nyanframe = document.getElementById('nyan');
    nyanframe.src = "nyan" + current + ".png";
    console.log(current);
    if (current++ > max) {
      current = min;
    };

    window.setTimeout(rotateIcon, 300);
  }
}

window.onload = rotateIcon;

使用 JavaScript 使用一堆 png 文件制作类似 gif 的动画？

Make a gif-like animation with a bunch of png files using JavaScript?

javascript

animation

png

animated-gif