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');
});

実行を制御できるように、開始、一時停止、およびリセット ボタンを追加しました。

フィドルを作った：http://jsfiddle.net/filever10/Kur9u/