javascript - 是否有一种通用的解决方案可以使用 jQuery/JavaScript 循环播放一系列 .png 帧并对其进行动画处理？

Question

我想在我正在处理的网站上显示一些动画“插图”。

.gif 不是一个选项，因为质量有很大损失。

是否有任何解决方案可以让我遍历 PNG 文件夹并将它们显示在屏幕上？

提前致谢。

Answer 1

例如，如果将图像命名为 1.png 到 25.png，这样的方法将起作用。

var slides = 25; //number of slides
var i = 1; //first slide
var delay = 200; //set delay
var timer;

function pngani() {
    if (i <= slides) {
        $('#show img').attr('src', 'pathtofile/' + i + '.png');
    }
    i++;
}
$('#start').click(function () {
    timer = setInterval(pngani, delay);
    pngani();
});
$('#pause').click(function () {
    clearInterval(timer);
    timer = null;
});
$('#reset').click(function () {
    i = 1;
    $('#show img').attr('src', 'pathtofile/' + i + '.png');
});

我添加了开始、暂停和重置按钮，因此可以控制执行。

做了一个 fiddle :http://jsfiddle.net/filever10/Kur9u/