AnimateImage

目次

• 概要
  • 特徴
  • 使い方
• ダウンロード
• API 仕様
• 記述例
• デモ
• FAQ
• アニメーション機能を持つほかのスクリプト
• 画像関連のアニメーション規格
• サポートする？

概要

AnimateImage は複数の画像をアニメーション GIF のように連続表示する JavaScript ライブラリ。

※ アニメーション機能を実現するスクリプトはいくつかあるが、要求に合ったものがなかなか見つからなかったため自分で作成。

特徴

• 複数の画像をアニメーション GIF のように連続表示する。連番または任意のファイル名に対応。
• Web ブラウザーがサポートするすべての画像形式に対応
  • PNG, JPEG, GIF, BMP, TIFF, WebP など
  • 透過 PNG 画像によってアニメーション画像の背景を透過できる
  • 256 色を超える高画質の写真やイラストをアニメーションできる
• アニメーション間隔を指定できる (デフォルトは 0.5 秒)
• アニメーションの繰り返し回数を指定できる (デフォルトは無制限に繰り返す)
• JavaScript コード不要。img 要素を記述すると自動的にアニメーションが適用される。
• JavaScript コードを記述するとアニメーションの制御 (再生/停止/再開) などが可能になる
• 写真などを指定すれば簡易スライドショーになる
• 5.6 KB ほどのスタンドアローンなスクリプト (jQuery などの JS ライブラリは不要)

使い方

head 要素や body 要素などに以下のコードを記述して AnimateImage スクリプトを読み込む。

<script type="text/javascript" src="animate-image.min.js"></script>

images フォルダー内の 1.png, 2.png, … 10.png をアニメーションさせる場合は次のように記述する。

<img src="images/1.png" data-files="[1-10].png" />

あるいは、JavaScript 内から AnimateImage を利用する場合は次のように記述する。

<script type="text/javascript">
    AnimateImage.animate('images/[1-10].png');
</script>

アニメーション可能な画像ファイルは以下の 4 種類。

• 数字の連番 (0, 1, 2, 3, …)
• ゼロパディングの数字の連番 (01, 02, …, 001, 002, …)
• アルファベットの連番 (a, b, c, …, A, B, C, …)
• 任意のファイル (foo.png, bar.jpg, baz.gif, …)

アニメーションをカスタマイズするためのオプションは 15 個以上。

• 画像タイトル、画像の代替テキスト
• 画像要素の ID 文字列、クラス名
• アニメーション間隔、アニメーションサイクル間の間隔
• アニメーションの繰り返し回数
• アニメーション終了時に最初の画像に巻き戻すかどうか
• アニメーション中に最初/最後の画像で一時停止するかどうか
• アニメーションサイクル間に空白画像を表示するかどうか

さらに JavaScript コードを記述すると次のようなことができる。

• アニメーションを制御 (再生/停止/再開) する
• アニメーション画像要素を取得して編集/出力する
• すべてのアニメーションに共通する設定を変更する

※ 詳細は API 仕様や記述例を参照。

ダウンロード

animate-image.min.js

• v1.1.1, 2012-09-17, 5.6 KB
• 無料ライセンス (個人かつ非営利、寄付歓迎)
• 最適化された圧縮コード

animate-image.js

• v1.1.1, 2012-09-17, 22.4 KB
• 商用ライセンス (500 円)
• コメント付きの非圧縮コード
• 有償サポート (技術的な質問やカスタマイズなど)

※ animate-image.min.js はコメントや改行、不必要な空白などの削除によりファイルサイズが縮小されている。またローカル変数や関数の引数の名前は短縮されている。一方で animate-image.js は読みやすいように整形されているほか、ドキュメンテーションコメントが JSDoc スタイルで記述されている。

対応 Web ブラウザー

• Internet Explorer
• Mozilla Firefox
• Google Chrome
• Opera
• Safari

※ 一応 JavaScript 1.4 または JScript 5.0 (IE5) で動作するように実装しているつもりなので、古いバージョンの Web ブラウザーや上記以外の Web ブラウザーでも特に問題なく動作するはず。

更新履歴

• AnimateImage version 1.1 (1.1.1)
• AnimateImage version 1.0.4
• AnimateImage version 1.0
• AnimateImage version 0.9
• AnimateImage version 0.8.3
• AnimateImage version 0.8 (0.8.0.3)
• AnimateImage version 0.7
• AnimateImage version 0.6.5 (0.6.5.1)
• AnimateImage version 0.6.4 (0.6.4.1)
• AnimateImage version 0.6.3
• AnimateImage version 0.6.2
• AnimateImage version 0.6.1
• AnimateImage version 0.6
• AnimateImage version 0.5 (初回リリース)

※ 旧バージョンの情報 (記述例や API 仕様など)

• AnimateImage 旧バージョン (v0.9 – v1.0.4)
• AnimateImage 旧バージョン (v0.7 – v0.8.3)
• AnimateImage 旧バージョン (v0.5 – v0.6.5.1)

API 仕様

• 自動適用 img 要素
• AnimateImage.Animator クラス
• AnimateImage.animate() 関数
• AnimateImage.options オブジェクト

自動適用 img 要素

data-files 属性を持つ img 要素に自動的に AnimateImage が適用される。

<img src="" data-files=""
  title="" alt="" id="" class="" style=""
  data-delay="" data-repeat="" data-rewind=""
  data-pauseAtFirst="" data-pauseAtLast="" data-showBlank="" data-cycleDelay="" data-blankClassName="" />

img 要素で未定義の属性は独自データ属性 (data-*) で指定する。src 属性と deta-files 属性は AnimateImage の必須属性。data-files 属性には書式文字列を含んだファイル名、または書式文字列でディレクトリ名を指定する場合はそのディレクトリまでの相対パスを指定する。詳細は記述例3を参照。

AnimateImage.Animator クラス

複数画像からなるアニメーションを制御する。

プロパティ

imgElem

AnimateImage によって生成された (または options.imgElem で指定した) img 要素

コンストラクタ関数

AnimateImage.Animator(files, options)

※ 引数の仕様については AnimateImage.animate() 関数を参照。旧バージョンの構文も機能する。

AnimateImage.Animator(files, title, id, delay, repeat, rewind)

animate(replay) メソッド

アニメーションを再生 (開再)する。

引数 replay が true の場合やアニメーション終了後に呼び出した場合は、アニメーションが最初の画像から再生 (リプレイ) される。

stopAnimate() メソッド

アニメーションを停止 (一時停止) する。

AnimateImage.animate() 関数

複数の画像をアニメーションさせる。

※ new AnimateImage.Animator(files, options).animate() とほとんど等価。

構文

animator = AnimateImage.animate(files, options)

※ 旧バージョンの構文も機能する。

animator = AnimateImage.animate(files, title, id, delay, repeat, rewind)

引数

files (必須)

画像ファイル。書式文字列を含んだファイル名、またはファイル名の配列で指定する。

数字の連番

“[d-d]” 形式で表す。ゼロパディングの場合は “[0d-dd]” や “[00d-ddd]” のように指定する。

アルファベットの連番

“[a-z]” 形式で表す。大文字の場合は “[A-Z]” のように指定する。

カンマ区切り値

“[foo, bar, baz]” 形式で表す。拡張子が異なる場合は “[foo.png, bar.jpg, baz.gif]” のように指定する。

options

アニメーション設定。オブジェクトリテラル ({ properyName: value }) で指定する。

title

画像タイトル。img@title 属性値となる。

alt

代替テキスト。img@alt 属性値となる。(省略時は options.title)

id

img 要素の ID 文字列。アニメーションごとにユニークな値を指定する。

delay

アニメーション間隔 (省略時は AnimateImage.options.delay)

repeat

アニメーションの繰り返し回数 (省略時は AnimateImage.options.repeat)

rewind

アニメーション終了時に最初の画像に巻き戻す場合は true (省略時は AnimateImage.options.rewind)

pauseAtFirst

アニメーション中に最初の画像で一時停止する場合は true (省略時は AnimateImage.options.pauseAtFirst)

pauseAtLast

アニメーション中に最後の画像で一時停止する場合は true (省略時は AnimateImage.options.pauseAtLast)

showBlank

アニメーションサイクル間に空白画像を表示する場合は true (省略時は AnimateImage.options.showBlank)

cycleDelay

アニメーションサイクル間の間隔 (省略時は AnimateImage.options.cycleDelay)

className

img 要素の class 名。複数指定する場合は空白で区切る。(省略時は AnimateImage.options.className)

blankClassName

空白画像に付加される img 要素の class 名 (省略時は AnimateImage.options.blankClassName)

attr

任意の属性。オブジェクトリテラル ({ attributeName: value }) で指定する。

css

任意の CSS プロパティ。img@style 属性値となる。オブジェクトリテラル ({ propertyName: value }) で指定する。

プロパティ名は DOM 形式 (e.g. borderLeft) または CSS 形式 (e.g. border-left) で指定する。ハイフンを含む名前は { 'property-name': value } のように引用符で括る。

imgElem

img 要素。Image オブジェクトで指定する。生成済みの img 要素を指定する場合に使用する。(省略時は img 要素が生成される)

output

img 要素を出力する場合は true

戻り値

animator

AnimateImage.Animator オブジェクト。戻り値からアニメーションの停止/再開を行うことができる。

AnimateImage.options オブジェクト

すべてのアニメーションに共通する設定。

※ アニメーション開始前に参照されるため、値を変更する場合はアニメーション開始前に設定しておく。

プロパティ

delay

アニメーション間隔。ミリ秒 (ms) 単位で指定する。デフォルト値は 500ms。

repeat

アニメーションの繰り返し回数。無制限に繰り返す場合は -1 を指定する。0 の場合はアニメーションされない (最初の画像が表示される)。デフォルト値は -1。

rewind

アニメーション終了時に最初の画像に巻き戻すかどうか。デフォルト値は false。

pauseAtFirst

アニメーション中に最初の画像で一時停止するかどうか。デフォルト値は false。

pauseAtLast

アニメーション中に最後の画像で一時停止するかどうか。デフォルト値は false。

showBlank

アニメーションサイクル間に空白画像を表示するかどうか。デフォルト値は false。

空白画像は data:url を使用した透明な GIF 画像で、最初の画像と同じサイズで表示される。

cycleDelay

アニメーションサイクル間の間隔。ミリ秒 (ms) 単位で指定する。デフォルト値は 0。

className

img 要素の class 名。空の場合は class 属性が付加されない。デフォルト値は “animation”。

blankClassName

空白画像に付加される img 要素の class 名。空の場合は class 属性が付加されない。デフォルト値は “blank”。

output

img 要素を出力するかどうか。デフォルト値は true。

記述例

• 記述例1：連番のファイル名
• 記述例2：任意のファイル名
• 記述例3：ディレクトリ名を書式文字列で指定
• 記述例4：title/alt 属性
• 記述例5：id/class 属性
• 記述例6：delay/cycleDelay オプション
• 記述例7：repeat/rewind オプション
• 記述例8：pauseAtFirst/Last オプション
• 記述例9：任意の属性
• 記述例10：任意の CSS プロパティ
• 記述例11：共通設定 (AnimateImage.options)
• 記述例12：アニメーション制御 (開始/停止/再開)
• 記述例13：生成済み img 要素の指定
• 記述例14：img 要素の取得/編集/出力

記述例1：連番のファイル名

img 要素 (HTML)

<img src="images/0.png" data-files="[0-9].png" />
<img src="images/01.png" data-files="[01-99].png" />
<img src="images/001.png" data-files="[001-999].png" />
<img src="images/a.png" data-files="[a-z].png" />
<img src="images/A.png" data-files="[A-Z].png" />
<img src="dir/pre-1_post.jpg" data-files="pre-[1-10]_post.jpg" />

JavaScript

AnimateImage.animate('images/[0-9].png');
AnimateImage.animate('images/[01-99].png');
AnimateImage.animate('images/[001-999].png');
AnimateImage.animate('images/[a-z].png');
AnimateImage.animate('images/[A-Z].png');
AnimateImage.animate('dir/pre-[1-10]_post.jpg'); // prefix/suffix

記述例2：任意のファイル名

img 要素 (HTML)

<img src="images/foo.png" data-files="[foo, bar, baz].png" />
<img src="images/foo.png" data-files="[foo.png, bar.jpg, baz.gif]" />
<img src="dir/pre-foo_post.jpg" data-files="pre-[foo, bar, baz]_post.jpg" />

JavaScript

AnimateImage.animate('images/[foo, bar, baz].png');
AnimateImage.animate('images/[foo.png, bar.jpg, baz.gif]');
AnimateImage.animate('dir/pre-[foo, bar, baz]_post.jpg'); // prefix/suffix

※ 書式文字列を含んだファイル名の代わりにファイル名の配列 (Array) を指定することもできる。

var files = ['images/foo.png', 'images/bar.png', 'images/baz.png'];
AnimateImage.animate(files);

AnimateImage.animate(['images/foo.png', 'images/bar.jpg', 'images/baz.gif']);

記述例3：ディレクトリ名を書式文字列で指定

img 要素 (HTML)

<img src="parent/child/image0.png" data-files="image[0-9].png" />
<img src="parent/child0/image.png" data-files="child[0-9]/image.png" />
<img src="parent0/child/image.png" data-files="parent[0-9]/child/image.png" />

※ data-files 属性には書式文字列を含んだファイル名、または書式文字列でディレクトリ名を指定する場合はそのディレクトリまでの相対パスを指定する。

JavaScript

AnimateImage.animate('parent/child/image[0-9].png');
AnimateImage.animate('parent/child[0-9]/image.png');
AnimateImage.animate('parent[0-9]/child/image.png');

記述例4：title/alt 属性

img 要素 (HTML)

<img src="images/0.png" data-files="[0-9].png" title="foo" />
<img src="images/0.png" data-files="[0-9].png" title="foo" alt="bar" />
<img src="images/0.png" data-files="[0-9].png" alt="bar" />
<img src="images/0.png" data-files="[0-9].png" alt="" />

JavaScript

AnimateImage.animate('images/[0-9].png', { title: 'foo' });             // title="foo" alt="foo"
AnimateImage.animate('images/[0-9].png', { title: 'foo', alt: 'bar' }); // title="foo" alt="bar"
AnimateImage.animate('images/[0-9].png', { alt: 'bar' });               // alt="bar"
AnimateImage.animate('images/[0-9].png', { alt: '' });                  // alt=""

※ 画像の代替テキストが不要な場合は img 要素に空文字列の alt 属性 (img@alt=””) を付加する。

記述例5：id/class 属性

img 要素 (HTML)

<img src="images/0.png" data-files="[0-9].png" />
<img src="images/0.png" data-files="[0-9].png" id="foo" />
<img src="images/0.png" data-files="[0-9].png" class="bar" />
<img src="images/0.png" data-files="[0-9].png" class="bar baz" />
<img src="images/0.png" data-files="[0-9].png"class=""  />

JavaScript

AnimateImage.animate('images/[0-9].png');                           // class="animation"
AnimateImage.animate('images/[0-9].png', { id: 'foo' });            // id="foo" class="animation"
AnimateImage.animate('images/[0-9].png', { className: 'bar' });     // class="bar"
AnimateImage.animate('images/[0-9].png', { className: 'bar baz' }); // class="bar baz"
AnimateImage.animate('images/[0-9].png', { className: '' });        // no class

※ CSS ファイルや style 要素内に class/id セレクタを使用したスタイルルールを定義する。

img.animation { background: white; }
img#foo { background: silver; }
img.bar { background: gray; }
img.baz { background: black; }

記述例6：delay/cycleDelay オプション

img 要素 (HTML)

<img src="images/0.png" data-files="[0-9].png" />
<img src="images/0.png" data-files="[0-9].png" data-delay="1000" />
<img src="images/0.png" data-files="[0-9].png" data-cycleDelay="2000" />

JavaScript

AnimateImage.animate('images/[0-9].png'); // delay=500, cycleDelay=0
AnimateImage.animate('images/[0-9].png', { delay: 1000 });
AnimateImage.animate('images/[0-9].png', { cycleDelay: 2000 });

記述例7：repeat/rewind オプション

img 要素 (HTML)

<img src="images/0.png" data-files="[0-9].png" />
<img src="images/0.png" data-files="[0-9].png" data-repeat="1" />
<img src="images/0.png" data-files="[0-9].png" data-repeat="2" data-rewind="true" />

JavaScript

AnimateImage.animate('images/[0-9].png'); // repeat=-1, rewind=false
AnimateImage.animate('images/[0-9].png', { repeat: 1 });
AnimateImage.animate('images/[0-9].png', { repeat: 2, rewind: true });

記述例8：pauseAtFirst/Last オプション

img 要素 (HTML)

<img src="images/0.png" data-files="[0-9].png" />
<img src="images/0.png" data-files="[0-9].png" data-pauseAtFirst="true" data-pauseAtLast="true" />

JavaScript

AnimateImage.animate('images/[0-9].png'); // pauseAtFirst=false, pauseAtLast=false
AnimateImage.animate('images/[0-9].png', { pauseAtFirst: true, pauseAtLast: true });

記述例9：任意の属性

img 要素 (HTML)

<img src="images/0.png" data-files="[0-9].png"
    width="100" height="100" longdesc="long description" />

JavaScript

AnimateImage.animate('images/[0-9].png', {
  attr: {
    width: 100,
    height: 100,
    longdesc: 'long description'
  }
});

記述例10：任意の CSS プロパティ

img 要素 (HTML)

<img src="images/0.png" data-files="[0-9].png"
    style="border: solid; border-top: dotted; border-bottom: dashed" />

JavaScript

AnimateImage.animate('images/[0-9].png', {
  css: {
    border: 'solid',
    borderTop: 'dotted',
    'border-bottom': 'dashed'
  }
});

記述例11：共通設定 (AnimateImage.options)

JavaScript

AnimateImage.animate('images/[0-9].png'); // delay=500, repeat=-1

AnimateImage.options.delay = 1000;
AnimateImage.options.repeat = 1;
AnimateImage.animate('images/[0-9].png'); // delay=1000, repeat=1
AnimateImage.animate('images/[0-9].png'); // delay=1000, repeat=1

AnimateImage.animate('images/[0-9].png', { delay: 2000, repeat: -1 });

記述例12：アニメーション制御 (開始/停止/再開)

JavaScript

var animator = new AnimateImage.Animator('images/[0-9].png');
animator.animate();

var animator2 = AnimateImage.animate('images/[0-9].png');

※ アニメーションの挙動をボタンで制御する場合は次のような input 要素を記述する。

<input type="button" value="Start" onclick="animator.animate()" />
<input type="button" value="Stop" onclick="animator.stopAnimate()" />
<input type="button" value="Replay" onclick="animator.animate(true)" />

記述例13：生成済み img 要素の指定

JavaScript

var imgElem = new Image();
imgElem.src = 'images/0.png';
imgElem.width = 100;
imgElem.height = 100;
imgElem.setAttribute('longdesc', 'long description');
AnimateImage.animate('images/[0-9].png', { imgElem: imgElem });

記述例14：img 要素の取得/編集/出力

JavaScript

var animator = AnimateImage.animate('images/[0-9].png', { output: false });
animator.imgElem.width = 100;
animator.imgElem.height = 100;
animator.imgElem.setAttribute('longdesc', 'long description');
document.getElementById('foo').appendChild(animator.imgElem);

デモ

透過 PNG 画像

アニメーション画像に 透過 PNG 画像を指定するとアニメーション GIF のように背景を透過することができる。デモではマウスホバーによって背景色が変更される。

簡易スライドショー

アニメーション画像に 256 色 (GIF の最大色数) を超える高画質の写真やイラストを指定することができる。デモでは色数 24 bit の JPEG 画像を指定している。

ファイル名が連番でない任意の画像

アニメーション画像にファイル名が連番でない任意の画像を指定することができる。デモでは blank.png, website.png, blog.png, download.png ファイルを指定している。

アニメーションの再生/停止/開再

アニメーションの再生/停止/再開を制御することができる。デモでは Start, Stop, Replay ボタンを押すとアニメーションが再生 (再開)、停止 (一時停止)、リプレイされる。

FAQ

• 自動適用 img 要素と JavaScript コードの使い分け
• AnimateImage.Animator クラスと AnimateImage.animate() 関数の使い分け
• Web 標準に準拠した (妥当な) HTML を記述する

自動適用 img 要素と JavaScript コードの使い分け

自動適用 img 要素

• script 要素や JavaScript が記述不要となるため、記述性や可読性が向上
• JavaScript コード不要により、JavaScript の記述が制限されている環境でも利用可
• JavaScript 無効時やエラー時であっても必ず img 要素が描画される (noscript 要素に相当)

JavaScript コード

• アニメーションの挙動 (開始/停止/再開) を制御できる
• JavaScript 内で img 要素を扱える (取得/生成/編集/挿入など)
• 共通の設定を変更できる

※ 参考までに、以下の 2 つのコードはほぼ等価といえる。

<p><img src="images/0.png" data-files="[0-9].png" /></p>

<p><script type="text/javascript">AnimateImage.animate('images/[0-9].png');</script></p>
<noscript><p><img src="images/0.png" /></p></noscript>

AnimateImage.Animator クラスと AnimateImage.animate() 関数の使い分け

AnimateImage.Animator クラス

アニメーションの開始タイミングを制御したい場合に利用する

• オブジェクトを生成すると最初の画像が表示される
• animate() メソッドを呼ぶまでアニメーションは開始しない

AnimateImage.animate() 関数

自動的にアニメーションが開始しても構わない場合に利用する

• 関数を呼び出すと最初の画像が表示されアニメーションが開始する

Web 標準に準拠した (妥当な) HTML を記述する

ポイントは以下の 3 つ。

• img 要素の alt 属性は必須
• (body 要素内の) script 要素はインライン要素で noscript 要素はブロック要素
• noscript 要素内にはブロック要素しか記述できない

従って Web 標準に準拠した HTML 記述は次のようになる。

<div>
    <script type="text/javascript">
        AnimateImage.animate('image[0-9].png', 'text');
    </script>
</div>
<noscript>
    <div><img src="image0.png" alt="text" /></div>
</noscript>

※ 詳細は画像表示系の JavaScript で Web 標準に準拠した (妥当な) HTML を記述するにはを参照。

アニメーション機能を持つほかのスクリプト

AnimateImage と同じように複数の画像を GIF アニメーションのように表示できる JavaScript ライブラリ。探せばほかにもあると思うがなかなか見つからない。

Square Goldfish ≫ AnimatedPNG

複数の画像を連続表示するスクリプト。アニメーションオブジェクトを生成して任意のタイミングでアニメーションを描画する。アニメーションの遅延再生や停止/再開に対応し、リピートの有無やアニメーションフレームごとの間隔を指定できる。*.png, *.jpg 以外の拡張子 (*.jpeg, *.gif, *.bmp など) には未対応。

jQuery Cycle Plugin

複数の画像をスライドショー形式で表示する jQuery プラグイン。フェードやスクロール、ズームなど 30 種類近くの切替効果をサポートする。またマウスホバーによるアニメーションの一時停止や、クリックで次の画像に切り替えるといったことも可能。jQuery ライブラリが必要。

Be happy with jGlycy [jGlycy]

jQuery Cycle Plugin などの jQuery プラグインを簡単に利用するための jQuery プラグイン。JavaScript コードを記述する代わりに HTML 要素に特定の属性を記述するだけで jQuery プラグインを呼び出せる。

画像関連のアニメーション規格

画像関連のアニメーション規格にはいくつかあるが、未だにアニメーション GIF が主流となっている。多くの Web ブラウザーに対応し、かつ 256 色を超える画像をアニメーションするには、AnimateImage のように JavaScript を利用する方法が現実的な代替手段といえる。

アニメーション GIF

多くの Web ブラウザーでサポートされる。GIF 画像のため背景を透過できるが 265 色までしか表示できない。

MNG (Multiple-image Network Graphics)

PNG を拡張したアニメーション規格。PNG のほか JNG (JPEG + αチャンネル) を含めることができる。アニメーション GIF よりも高機能だが、主要な Web ブラウザーではサポートされない。

APNG (Animated Portable Network Graphics)

PNG を拡張したアニメーション規格。MNG ほど高機能でない分アニメーション GIF のように簡単に扱える。主要な Web ブラウザーでは Firefox と Opera のみがサポートしている。APNG に未対応の場合は PNG 画像として表示される。

Motion JPEG

複数の JPEG 画像からなる動画形式。QuickTime やコーデックをインストールした Windows Media Player などで再生できる。

SVG Animation

SVG のアニメーション要素。主要な Web ブラウザーでは Google Chrome, Opera, Safari, Firefox (4.0 以降) のみがサポートしている。

SVG 未対応だった Internet Explorer は Internet Explorer 9 で 主要な SVG 要素をサポートしたがアニメーション要素には未対応。

サポートする？

• フィードバックや質問があるよ、という人はコンタクトページをお使いください
• このスクリプトを気に入ったよ、という人向けに応援するページを作ってみました

いただいたコメントは大変参考になります。ここまで読んでいただきありがとうございました。

MEMO

• ファイル名が連番でない複数画像の指定 (v0.6 で対応)
• 制限：アニメーションごとに異なるアニメーション間隔を指定できない (v0.6 で解消)
• 任意のタイミングでアニメーションを再生/停止/再開 (v0.8 で対応)
• アニメーションのリピート回数の指定 (v0.6 で対応)
• 最初/最後の画像で一時停止してからアニメーションする (v0.8.3 で対応)
• アニメーションサイクル間に空白画像を表示する (v0.8.3 で対応)
• アニメーションサイクル間の遅延時間 (v0.8.3 で対応)

※ なかなかスマートな実装が思いつかないので対応保留。とりあえずアニメーションする画像を調整して運用する。(最初/最後の画像を重複させる、空白画像を最後にするなど)

“keyboard keys” by chromatix is licensed under Creative Commons License.