APNGファイルを一定間隔でループさせる方法

APNGファイルは制作時にループ回数を設定できますが、一定間隔でループさせる（30秒止めてからアニメーションを最初から始めるというような動作）ということができません（私の使ってる無料の作成ソフトではできませんでした。有料だとできるのかどうかは調べていません）。

最後のコマの画像をたくさん用意して無限ループにするればそのような動作を再現できないことはないですが、間隔が30秒とか1分とか長い場合や、間隔を変えたいとなった場合に対応が大変です。

ではどうするかですが、APNGは再読み込みさせれば最初から再生が始まるというところに注目して、JavaSrciptで30秒ごとに再読み込みさせるという方法で対応しました。

次の3つがポイントです。

1. ループ無しのAPNGを作る
2. setIntervalを使う
3. srcにはパラメータを付ける

コードは次のようになります。

<img src="https://example.com/sample.png" class="interval">

(function ($) {
	const src = $('.interval').attr('src');
	setInterval(function () {
		$('.interval').attr('src', src + '?' + new Date().getTime());
	}, 30000);
})(jQuery);

やっていることはシンプルで、setIntervalを使って30秒ごとにimgタグのsrcを書き換えています。

ただしsrcを書き換えても同じURLだと再読み込みされません。その対策としてURLの後ろにパラメータを付けて違うURLとして認識されるようにしています。パラーメータは次回読み込み時に必ず変わるもの、ということで時間を使っています。

このコードでは1回アニメーションが開始して30秒したら再びアニメーションが始まるという動作になります。アニメーション終了から30秒にしたい場合はアニメーションの時間を足す必要があります。

間隔を6秒にした場合のサンプルを下記に掲載しておきます。

これで再生間隔を自由に設定できるようになります。APNGの使い方の幅が広がると思うので参考にしてみてください。