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

【问题标题】：Make a gif-like animation with a bunch of png files using JavaScript?使用 JavaScript 用一堆 png 文件制作类似 gif 的动画？
【发布时间】：2015-11-01 05:31:12
【问题描述】：

尽管我竭尽全力从一堆 png 文件中制作出高质量的类似 gif 的动画，但我仍然遇到错误……我得到了很多错误，例如“document.getElementById 不是函数”和“未捕获的 TypeError：无法将属性 'src' 设置为 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>

【问题讨论】：

nyanframe.src = ({path:"nyan" + current + ".png"}); 的预期结果是什么？
谢谢，现在图像正在更新，但它不会更改为目录中的图像......我有名为 nyan1.png、nyan2.png、...... nyan12.png 的图像。检查元素说图像是[object Object]...
我希望它从 nyan1.png 更改为 nyan2.png 直到它变为 nyan12.png，然后我希望它重新开始...
如果您指的是答案，请直接对其发表评论。

标签： javascript animation png animated-gif

【解决方案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;

【讨论】：

eventListener 不是比window.onload = rotateIcon; 更好的选择吗？