AnimateImage 旧バージョン (v0.9 – v1.0.4)
※ AnimateImage の旧バージョン (version 1.0.x 系) に関する情報を参考までに残しておく。
目次
概要
AnimateImage は複数の画像をアニメーション GIF のように連続表示する JavaScript コード。
※ 最新の情報については AnimateImage 公式サイトを参照。
使い方
head 要素や body 要素などに以下のコードを記述して AnimateImage スクリプトを読み込む。
<script type="text/javascript" src="animateImage.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('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 コードを記述すると次のようなことができる。
- アニメーションを制御 (再生/停止/再開) する
- アニメーション画像要素を取得して編集/出力する
- すべてのアニメーションに共通する設定を変更する
ダウンロード
旧バージョン (v1.0.4) のソースコード。
- animateImage-1.0.4.min.js
-
- v1.0.4, 2012-08-27, 5.5 KB
- 無料ライセンス (個人かつ非営利、寄付歓迎)
- 最適化された圧縮コード
- animateImage-1.0.4.js
-
- v1.0.4, 2012-08-27, 18.8 KB
- 商用ライセンス (500 円)
- コメント付きの非圧縮コード
- 有償サポート (技術的な質問やカスタマイズなど)
API 仕様
自動適用 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 = animateImage(files, options)
※ 旧バージョンの構文も機能する。
animator = animateImage(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
- アニメーション間隔 (省略時は Animations.delay)
- repeat
- アニメーションの繰り返し回数 (省略時は Animations.repeat)
- rewind
- アニメーション終了時に最初の画像に巻き戻す場合は true (省略時は Animations.rewind)
- pauseAtFirst
- アニメーション中に最初の画像で一時停止する場合は true (省略時は Animations.pauseAtFirst)
- pauseAtLast
- アニメーション中に最後の画像で一時停止する場合は true (省略時は Animations.pauseAtLast)
- showBlank
- アニメーションサイクル間に空白の画像を表示する場合は true (省略時は Animations.showBlank)
- cycleDelay
- アニメーションサイクル間の間隔 (省略時は Animations.cycleDelay)
- className
- img 要素の class 名。複数指定する場合は空白で区切る。(省略時は Animations.className)
- blankClassName
- 空白画像に付加される img 要素の class 名 (省略時は Animations.blankClassName)
- attr
- 任意の属性。オブジェクトリテラル (
{ attributeName: value }) で指定する。 - css
- 任意の CSS プロパティ。img@style 属性値となる。オブジェクトリテラル (
{ propertyName: value }) で指定する。 - プロパティ名は DOM 形式 (ex. borderLeft) または CSS 形式 (ex. border-left) で指定する。ハイフンを含む名前は
{ 'property-name': value }のように引用符で括る。 - imgElem
- img 要素。Image オブジェクトで指定する。生成済みの img 要素を指定する場合に使用する。(省略時は img 要素が生成される)
- output
- img 要素を出力する場合は true
戻り値
- animator
- ImageAnimator オブジェクト。戻り値からアニメーションの停止/再開を行うことができる。
Animations オブジェクト
すべてのアニメーションに共通する設定。
※ animateImage() 呼び出し前に設定されている値が反映される。値を変更する場合はアニメーション開始前に設定しておく (開始後に値を変更しても参照されない)。
プロパティ
- delay
- アニメーション間隔。ミリ秒 (ms) 単位で指定する。デフォルト値は 500ms。
- repeat
- アニメーションの繰り返し回数。無制限に繰り返す場合は -1 を指定する。0 の場合はアニメーションされない (最初の画像が表示される)。デフォルト値は -1。
- rewind
- アニメーション終了時に最初の画像に巻き戻すかどうか。デフォルト値は false。
- pauseAtFirst
- アニメーション中に最初の画像で一時停止するかどうか。デフォルト値は false。
- pauseAtLast
- アニメーション中に最後の画像で一時停止するかどうか。デフォルト値は false。
- showBlank
- アニメーションサイクル間に空白の画像を表示するかどうか。デフォルト値は false。
- 空白画像は最初の画像と同じサイズで表示される。data:url で透明な GIF 画像を指定しているため IE7 以前では表示されない。
- cycleDelay
- アニメーションサイクル間の間隔。ミリ秒 (ms) 単位で指定する。デフォルト値は 0。
- className
- img 要素の class 名。空の場合は class 属性が付加されない。デフォルト値は “animation”。
- blankClassName
- 空白画像に付加される img 要素の class 名。空の場合は class 属性が付加されない。デフォルト値は “blank”。
- output
- img 要素を出力するかどうか。デフォルト値は true。
ImageAnimator オブジェクト
複数画像からなるアニメーションを制御する。
プロパティ
- imgElem
- AnimateImage によって生成された (または options.imgElem で指定した) img 要素
コンストラクタ関数
ImageAnimator(files, options)
※ 引数の仕様については animateImage() 関数を参照。旧バージョンの構文も機能する。
ImageAnimator(files, title, id, delay, repeat, rewind)
animate(replay) メソッド
アニメーションを再生 (開再)する。
引数 replay が true の場合やアニメーション終了後に呼び出した場合は、アニメーションが最初の画像から再生 (リプレイ) される。
stopAnimate() メソッド
アニメーションを停止 (一時停止) する。
記述例
- 記述例1：連番のファイル名
- 記述例2：任意のファイル名
- 記述例3：ディレクトリ名を書式文字列で指定
- 記述例4：title/alt 属性
- 記述例5：id/class 属性
- 記述例6：delay/cycleDelay オプション
- 記述例7：repeat/rewind オプション
- 記述例8：pauseAtFirst/Last オプション
- 記述例9：任意の属性
- 記述例10：任意の CSS プロパティ
- 記述例11：共通設定 (Animations オブジェクト)
- 記述例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('images/[0-9].png');
animateImage('images/[01-99].png');
animateImage('images/[001-999].png');
animateImage('images/[a-z].png');
animateImage('images/[A-Z].png');
animateImage('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('images/[foo, bar, baz].png');
animateImage('images/[foo.png, bar.jpg, baz.gif]');
animateImage('dir/pre-[foo, bar, baz]_post.jpg'); // prefix/suffix
※ 書式文字列を含んだファイル名の代わりにファイル名の配列 (Array) を指定することもできる。
var files = ['images/foo.png', 'images/bar.png', 'images/baz.png']; animateImage(files); animateImage(['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('parent/child/image[0-9].png');
animateImage('parent/child[0-9]/image.png');
animateImage('parent[0-9]/child/image.png');
記述例4：title/alt 属性
img 要素 (HTML)
<img src="images/0.png" data-files="[0-9].png" title="foo" alt="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('images/[0-9].png', { title: 'foo' }); // title="foo" alt="foo"
animateImage('images/[0-9].png', { title: 'foo', alt: 'bar' }); // title="foo" alt="bar"
animateImage('images/[0-9].png', { alt: 'bar' }); // alt="bar"
animateImage('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('images/[0-9].png'); // class="animation"
animateImage('images/[0-9].png', { id: 'foo' }); // id="foo" class="animation"
animateImage('images/[0-9].png', { className: 'bar' }); // class="bar"
animateImage('images/[0-9].png', { className: 'bar baz' }); // class="bar baz"
animateImage('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('images/[0-9].png'); // delay=500, cycleDelay=0
animateImage('images/[0-9].png', { delay: 1000 });
animateImage('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('images/[0-9].png'); // repeat=-1, rewind=false
animateImage('images/[0-9].png', { repeat: 1 });
animateImage('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('images/[0-9].png'); // pauseAtFirst=false, pauseAtLast=false
animateImage('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('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('images/[0-9].png', {
css: {
border: 'solid',
borderTop: 'dotted',
'border-bottom': 'dashed'
}
});
記述例11：共通設定 (Animations オブジェクト)
JavaScript
animateImage('images/[0-9].png'); // delay=500, repeat=-1
Animations.delay = 1000;
Animations.repeat = 1;
animateImage('images/[0-9].png'); // delay=1000, repeat=1
animateImage('images/[0-9].png'); // delay=1000, repeat=1
animateImage('images/[0-9].png', { delay: 2000, repeat: -1 });
記述例12：アニメーション制御 (開始/停止/再開)
JavaScript
var animator = new ImageAnimator('images/[0-9].png');
animator.animate();
var animator2 = animateImage('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('images/[0-9].png', { imgElem: imgElem });
記述例14：img 要素の取得/編集/出力
JavaScript
var animator = animateImage('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);
FAQ
- 自動適用 img 要素と JavaScript コードの使い分け
- ImageAnimator オブジェクトと animateImage() 関数の使い分け
- 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('images/[0-9].png');</script></p>
<noscript><p><img src="images/0.png" /></p></noscript>
ImageAnimator オブジェクトと animateImage() 関数の使い分け
- ImageAnimator オブジェクト
- アニメーションの開始タイミングを制御したい場合に利用する
-
- オブジェクトを生成すると最初の画像が表示される
- animate() メソッドを呼ぶまでアニメーションは開始しない
- animateImage() 関数
- 自動的にアニメーションが開始しても構わない場合に利用する
-
- 関数を呼び出すと最初の画像が表示されアニメーションが開始する
Web 標準に準拠した (妥当な) HTML を記述する
ポイントは以下の 3 つ。
- img 要素の alt 属性は必須
- (body 要素内の) script 要素はインライン要素で noscript 要素はブロック要素
- noscript 要素内にはブロック要素しか記述できない
従って Web 標準に準拠した HTML 記述は次のようになる。
<div>
<script type="text/javascript">
animateImage('image[0-9].png', 'text');
</script>
</div>
<noscript>
<div><img src="image0.png" alt="text" /></div>
</noscript>
※ 詳細は画像表示系の JavaScript で Web 標準に準拠した (妥当な) HTML を記述するにはを参照。
“keyboard keys” by chromatix is licensed under Creative Commons License.