JavaScript: 複数の画像をアニメーション GIF のように表示する AnimateImage (旧バージョン)

• 2010年6月28日
• AnimateImage
• リリース

※ AnimateImage の旧バージョン (version 0.6.x 系) に関する情報を参考までに残しておく。新バージョン (version 0.7 以降) との互換性はなし。

目次

• 概要
  • 使い方
  • ソースコード
• 記述例
• API 仕様

概要

AnimateImage は複数の画像をアニメーション GIF のように表示する JavaScript コード。

※ 最新の情報については JavaScript: 複数の画像をアニメーション GIF のように表示する AnimateImage を参照。

使い方

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

<script type="text/javascript" src="animateImage.js"></script>

Image1.png, Image2.png … Image10.png をアニメーションさせる場合は次のように記述する。

<script type="text/javascript">
    animateImage(null, 'Image{0}.png', 10);
</script>

animateImage() 関数に渡している引数の意味は次の通り。

null

アニメーション画像の ID 文字列。null を指定すると自動生成される。

'Image{0}.png'

アニメーション画像を表す文字列。ファイル名の連番にあたる部分を "{0}" で指定する。

10

アニメーション画像の枚数。

※ 画像タイトルやアニメーション間隔、アニメーションの繰り返し回数も指定できる。また連番でない任意の画像を指定することもできる。詳細は記述例や API 仕様を参照。

ソースコード

旧バージョン (version 0.6.x 系) のソースコード。新バージョン (version 0.7 以降) との互換性はなし。

• animateImage_0.6.5.1.js

※ animateImage_0.6.5.1.js はパフォーマンスを重視して minify (コメントや空白が除去) されている。読みやすいようにフォーマットされたソースコードは animateImage_0.6.5.1_original.js (UTF-8) を参照。

記述例

次のような画像ファイルをアニメーションさせる場合の記述例を紹介する。

• Foo1.png, Foo2.png, … Foo5.png (5 枚の PNG 画像)
• Bar1.png, Bar2.png, … Bar10.png (10 枚の PNG 画像)
• Baz1.jpg, Baz2.jpg, … Baz15.jpg (15 枚の JPEG 画像)

記述例1

画像タイトルを指定して複数のアニメーション。

animateImage(null, 'Foo{0}.png', 5, 'Image Foo');
animateImage(null, 'Bar{0}.png', 10, 'Image Bar');

※ アニメーション間隔はデフォルトの 0.5 秒、アニメーションの繰り返し回数はデフォルトの無制限となる。

記述例2

アニメーション間隔 (1 秒)、アニメーションの繰り返し回数 (5 回) を指定してアニメーション。画像タイトルは指定しない。

animateImage(null, 'Foo{0}.png', 5, null, 1000, 5);

記述例3

異なるアニメーション間隔と繰り返し回数でアニメーション。Image Bar はアニメーション終了時に最初の画像に巻き戻す。

animateImage(null, 'Foo{0}.png', 5, 'Image Foo', 1000, 5);
animateImage(null, 'Bar{0}.png', 10, 'Image Bar', 500, 10, true);

※ アニメーション終了時に Image Foo は最後の画像 (Foo5.png) のままとなるが、Image Bar は最初の画像 (Bar1.png) に巻き戻される。

記述例4

アニメーション間隔 1 秒で 1 回だけアニメーションする設定。ただし Image Baz のみ 0.5 秒で無制限にアニメーションを繰り返す。

Animations.delay = 1000;
Animations.repeat = 1;
animateImage(null, 'Foo{0}.png', 5, 'Image Foo');
animateImage(null, 'Bar{0}.png', 10, 'Image Bar');
animateImage(null, 'Baz{0}.jpg', 15, 'Image Baz', 500, -1);

記述例5

画像ファイルの連番の開始番号を変更する。Image Foo は 2 から、その他の画像は 1 から開始する。

Animations.startIndex = 2;
animateImage(null, 'Foo{0}.png', 4, 'Image Foo');
Animations.startIndex = 1; // 元に戻す

animateImage(null, 'Bar{0}.png', 10, 'Image Bar');
animateImage(null, 'Baz{0}.jpg', 15, 'Image Baz');

記述例6

ファイル名が連番でない任意の画像を指定する。

var files = ['Foo1.png', 'Bar1.png', 'Baz1.jpg'];
animateImage(null, files, files.length);

animateImage(null, ['Foo5.png', 'Bar10.png', 'Baz15.jpg'], 3);

記述例7

アニメーション画像にスタイル (CSS) を適用する。Image Bar は個別にスタイルを適用するため ID 文字列を指定する。

animateImage(null, 'Foo{0}.png', 5, 'Image Foo');
animateImage('id-bar', 'Bar{0}.png', 10, 'Image Bar');

共通のスタイルは class セレクタ (img.animation) を、個別のスタイルは id セレクタ (img#id-bar) を記述する。

img.animation {
    border: solid medium silver;
}

img#id-bar {
    border: dashed medium blue;
}

API 仕様

animateImage() 関数

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

構文

function animateImage(id, files, count, title, delay, repeat, rewind)

引数

id (必須)

img 要素の ID 文字列。アニメーションごとにユニークな値を指定する。null の場合は自動生成される。

files (必須)

画像ファイル。ファイル名の連番部分は {0} で表す。任意の画像を指定する場合は配列にする。

count (必須)

画像ファイルの枚数

title

画像タイトル。img@alt, img@title 属性値となる。(null および省略時は属性が付加されない)

delay

アニメーション間隔 (null および省略時は Animations.delay)

repeat

アニメーションの繰り返し回数 (null および省略時は Animations.repeat)

rewind

アニメーション終了時に最初の画像に巻き戻すかどうか。真偽値 (true/false) で指定する。(省略時は Animations.rewind)

※ 画像ファイルの連番は (デフォルトでは) 1 から始まり、1, 2, 3 … 10, 11 … と続く。

Animations オブジェクト

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

※ animateImage() 関数呼び出し前に設定されている値が反映される。値を変更する場合はアニメーション開始前に設定しておく (開始後に値を変更しても参照されない)。

プロパティ

Animations.delay

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

Animations.repeat

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

Animations.rewind

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

Animations.className

img 要素の class 名 (img@class 属性値)。デフォルト値は "animation"。undefined の場合は class 属性が付加されない。

Animations.startIndex

画像ファイルの連番の開始番号。デフォルト値は 1。

"keyboard keys" by chromatix is licensed under Creative Commons License.