AnimateImage 旧バージョン (v0.7 – v0.8.3)
※ AnimateImage の旧バージョン (version 0.8.x 系) に関する情報を参考までに残しておく。
目次
概要
AnimateImage は複数の画像をアニメーション GIF のように連続表示する JavaScript コード。
※ 最新の情報については AnimateImage 公式サイトを参照。
使い方
head 要素や body 要素などに以下のコードを記述して AnimateImage スクリプトを読み込む。
<script type="text/javascript" src="animateImage.js"></script>
Image1.png, Image2.png, … Image10.png をアニメーションさせる場合は次のように記述する。
<script type="text/javascript">
animateImage('Image[1-10].png');
</script>
※ animateImage() 関数では次のような項目を指定することができる。詳細は記述例や API 仕様を参照。
- ゼロパディングの連番の画像 (01, 02, …, 001, 002, …)
- 連番でない任意の画像
- 画像タイトル
- スタイル (CSS) を適用するための ID 文字列
- アニメーション間隔
- アニメーションの繰り返し回数
- アニメーション終了時に最初の画像に巻き戻すかどうか
※ ImageAnimator オブジェクトを使用すると任意のタイミングでアニメーションを再生/停止/再開することができる。また Animations オブジェクトを使用するとすべてのアニメーションに共通する設定を変更することができる。詳細は記述例や API 仕様を参照。
ダウンロード
旧バージョン (v0.8.3) のソースコード。
- animateImage-0.8.3.min.js
-
- v0.8.3, 2012-08-16, 2.3 KB
- 無料ライセンス (個人かつ非営利、寄付歓迎)
- 最適化された圧縮コード
- animateImage-0.8.3.js
-
- v0.8.3, 2012-08-16, 8.8 KB
- 商用ライセンス (500 円)
- コメント付きの非圧縮コード
- 有償サポート (技術的な質問やカスタマイズなど)
記述例
次のような画像ファイルをアニメーションさせる場合の記述例を紹介する。
- Foo1.png, Foo2.png, … Foo5.png (5 枚の PNG 画像)
- Bar0.png, Bar1.png, … Bar9.png (10 枚の PNG 画像)
- Baz01.jpg, Baz02.jpg, … Baz15.jpg (15 枚の JPEG 画像)
記述例1
画像タイトルを指定して複数のアニメーション。
animateImage('Foo[1-5].png', 'Image Foo');
animateImage('Bar[0-9].png', 'Image Bar');
animateImage('Baz[01-15].png', 'Image Baz');
※ 画像ファイルの連番は Image Foo は 1 から、Image Bar は 0 から、Image Baz は 01 から始まる。またアニメーション間隔はデフォルトの 0.5 秒、アニメーションの繰り返し回数はデフォルトの無制限となる。
記述例2
すべて 5 枚の画像でアニメーションする。Image Foo のみ画像タイトルと ID 文字列を指定する。
animateImage('Foo[1-5].png', 'Image Foo', 'id-foo');
animateImage('Bar[0-4].png', '', null);
animateImage('Baz[01-05].png', null, null);
※ Image Bar では img 要素に空文字列の alt 属性 (img@alt=””) が付加される (画像の代替テキストが不要なことを意味する)。Image Baz では img@alt, img@title は付加されない。また Image Bar, Image Baz では ID 文字列が自動生成される。
記述例3
異なるアニメーション間隔と繰り返し回数でアニメーション。Image Bar はアニメーション終了時に最初の画像に巻き戻す。
animateImage('Foo[1-5].png', 'Image Foo', null, 1000, 5);
animateImage('Bar[0-9].png', 'Image Bar', null, 500, 10, true);
※ アニメーション終了時に Image Foo は最後の画像 (Foo5.png) のままとなるが、Image Bar は最初の画像 (Bar0.png) に巻き戻される。
記述例4
アニメーション間隔 1 秒で 1 回だけアニメーションする設定。ただし Image Baz のみ 0.5 秒で無制限にアニメーションを繰り返す。
Animations.delay = 1000;
Animations.repeat = 1;
animateImage('Foo[1-5].png', 'Image Foo');
animateImage('Bar[0-9].png', 'Image Bar');
animateImage('Baz[01-15].jpg', 'Image Baz', null, 500, -1);
記述例5
ファイル名が連番でない任意の画像を指定する。
var files = ['Foo1.png', 'Bar0.png', 'Baz01.jpg']; animateImage(files); animateImage(['Foo5.png', 'Bar9.png', 'Baz15.jpg']);
記述例6
アニメーションの開始/停止/再開を制御する。アニメーションの繰り返し回数は 1 回で、その他の項目は指定しない。
var animator = new ImageAnimator('Foo[1-5].png', null, null, null, 1);
※ アニメーションの制御をボタンで行う場合は次のように記述する。
<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)" />
記述例7
アニメーション画像にスタイル (CSS) を適用する。Image Bar は個別にスタイルを適用するため ID 文字列を指定する。
animateImage('Foo[1-5].png', 'Image Foo');
animateImage('Bar[0-9].png', 'Image Bar', 'id-bar');
共通のスタイルは class セレクタ (img.animation) を、個別のスタイルは id セレクタ (img#id-bar) を記述する。
img.animation {
border: solid medium silver;
}
img#id-bar {
border: dashed medium blue;
}
API 仕様
animateImage() 関数
複数の画像をアニメーションさせる。
構文
animator = animateImage(files, title, id, delay, repeat, rewind)
引数
- files (必須)
- 画像ファイル。ファイル名の連番部分は “[x-y]” 形式で表す (x: 連番の開始番号, y: 連番の終了番号)。ゼロパディングの連番の場合は “[0x-yy]” のように指定する。任意の画像を指定する場合は配列にする。
- title
- 画像タイトル。img@alt, img@title 属性値となる。(null および省略時は属性が付加されない)
- id
- img 要素の ID 文字列。アニメーションごとにユニークな値を指定する。(null および省略時は自動生成される)
- delay
- アニメーション間隔 (null および省略時は Animations.delay)
- repeat
- アニメーションの繰り返し回数 (null および省略時は Animations.repeat)
- rewind
- アニメーション終了時に最初の画像に巻き戻すかどうか。真偽値 (true/false) で指定する。(省略時は Animations.rewind)
戻り値
- animator
- ImageAnimator オブジェクト。戻り値からアニメーションの停止/再開を行うことができる。
Animations オブジェクト
すべてのアニメーションに共通する設定。
※ animateImage() 関数呼び出し前に設定されている値が反映される。値を変更する場合はアニメーション開始前に設定しておく (開始後に値を変更しても参照されない)。
プロパティ
- Animations.delay
- アニメーション間隔。ミリ秒 (ms) 単位で指定する。デフォルト値は 500ms。
- Animations.repeat
- アニメーションの繰り返し回数。無制限に繰り返す場合は -1 を指定する。0 の場合はアニメーションされない (最初の画像が表示される)。デフォルト値は -1。
- Animations.rewind
- アニメーション終了時に最初の画像に巻き戻すかどうか。デフォルト値は false。
- Animations.pauseAtFirst
- アニメーション中に最初の画像で一時停止するかどうか。デフォルト値は false。
- Animations.pauseAtLast
- アニメーション中に最後の画像で一時停止するかどうか。デフォルト値は false。
- Animations.showBlank
- アニメーションサイクル間に空白の画像を表示するかどうか。デフォルト値は false。
- このオプションを true にするとアニメーション画像が最初の画像のサイズに固定される。data:url で透明な GIF 画像を指定しているため IE7 以前では利用不可。
- Animations.cycleDelay
- アニメーションサイクル間の間隔。ミリ秒 (ms) 単位で指定する。デフォルト値は 0。
- Animations.className
- img 要素の class 名 (img@class 属性値)。デフォルト値は “animation”。undefined の場合は class 属性が付加されない。
ImageAnimator オブジェクト
複数の画像のアニメーションを制御する。
コンストラクタ関数
ImageAnimator(files, title, id, delay, repeat, rewind)
※ 引数の仕様については animateImage() 関数を参照。
animate(replay) メソッド
アニメーションを再生 (開再)する。
引数 replay が true の場合やアニメーション終了後に呼び出した場合は、アニメーションが最初の画像から再生 (リプレイ) される。
stopAnimate() メソッド
アニメーションを停止 (一時停止) する。
“keyboard keys” by chromatix is licensed under Creative Commons License.