概要
AnimateImage は複数の画像をアニメーション GIF のように表示する JavaScript コード。
※ 同じような機能を実現するスクリプトはいくつかあるが、要求に合ったものがなかなか見つからなかったため作成。
AnimateImage の特徴
- 複数の画像をアニメーション GIF のように表示する (連続表示)
- Web ブラウザーがサポートする複数の画像形式に対応 (PNG, JPEG, GIF, BMP など)
- 任意のアニメーション間隔を指定できる (デフォルトは 0.5 秒)
- 画像の説明 (img 要素の alt, title 属性) を指定できる
- アニメーションではない任意の画像を指定することで簡易スライドショーとしても利用できる
使い方
head 要素や body 要素などに以下のコードを記述して AnimateImage スクリプトを読み込む。
<script type="text/javascript" src="animateImage.js"></script>
Image1.png, Image2.png … Image10.png をアニメーションさせる場合は次のように記述する。
<script type="text/javascript">
animateImage('ImageID', 'Image{0}.png', 10);
</script>
※ 画像ファイル名の連番にあたる部分を “{0}” で指定する。
ダウンロード
- バージョン
- 0.5 (2010-06-28)
- 作成者
- 岩田城亮 (Josuke Iwata)
- ライセンス
- MIT ライセンス (日本語参考訳)
ソースコード
※ animateImage.js はパフォーマンスを重視して minify (コメントや空白が除去) されている。フォーマットされたソースコードは animateImage_original.js (UTF-8) を参照。
対応 Web ブラウザー
- Internet Explorer 5.0 以上
- Mozilla Firefox 3.x
- Google Chrome 5.x
- Apple Safari 5.x
- Opera 10.x
※ 古いバージョンの Web ブラウザーでは動作確認していないが、特に問題なく動作するはず。
使用例
設定項目：フェードやスライドなどのアニメーション効果を無効にするのアニメーション効果の種類では、AnimateImage を使用して以下の 8 種類のアニメーション効果が紹介されている。
- Windows 内のアニメーション コントロールと要素
- ボタン
- チェックボックス
- ラジオボタン
- コンボ ボックスをスライドして開く
- ヒントをフェードまたはスライドで表示する
- メニューをフェードまたはスライドして表示する
- メニュー項目をクリック後にフェード アウトする
- リスト ボックスを滑らかにスクロールする
API 仕様
animateImage() 関数
複数の画像をアニメーションさせる。
構文
function animateImage(id, fileName, count, title, delay)
引数
- id
- img 要素の ID 文字列。アニメーションごとにユニークな値を指定する。
- fileName
- 画像ファイル名。連番部分は {0} で表す。
- count
- 画像ファイルの枚数
- title
- 画像タイトル。img@alt, img@title 属性値となる。省略時は属性が付加されない。
- delay
- アニメーション間隔。初回呼び出し時のみ有効。省略時は 500 ms となる。
※ 画像ファイルの連番は 1 から始まり、1, 2, 3 … 10, 11 … と続く。
TODO
余力があれば対応する。(優先度低)
- ファイル名が連番でない複数画像の指定 (可変長引数)
- 制限：アニメーションごとに異なるアニメーション間隔を指定できない
- アニメーションの停止と再開 (clearInterval)
- アニメーションのリピート回数の指定
- アニメーションサイクル間の遅延時間および空白フレームの有無
同じような機能を持つスクリプト
AnimateImage と同じような機能を実現できる JavaScript ライブラリ。AnimateImage より高機能だが、その分使い方を覚える必要あり。探せばほかにもあるはず。
- Square Goldfish ≫ AnimatedPNG
- 複数の画像を連続表示するスクリプト。アニメーションオブジェクトを生成して任意のタイミングでアニメーションを描画する。アニメーションの遅延再生や停止/再開に対応し、リピートの有無やアニメーションフレームごとの間隔を指定できる。*.png, *.jpg 以外の拡張子 (*.jpeg, *.gif, *.bmp など) には対応しない。
- jQuery Cycle Plugin
- 複数の画像をスライドショー形式で表示する jQuery プラグイン。フェードやスクロール、ズームなど 30 種類近くの切替効果をサポートする。またマウスホバーによるアニメーションの一時停止や、クリックで次の画像に切り替えるといったことも可能。
- Be happy with jGlycy [jGlycy]
- jQuery プラグインを簡単に利用できるようにするための jQuery プラグイン。スクリプトを記述する代わりに特定の属性を指定することで jQuery Cycle Plugin などの 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 のみがサポートしている。
- 主要な SVG 要素をサポートしている Firefox はアニメーション要素には未対応。Firefox 3.7 で対応予定。また SVG 未対応の Internet Explorer は、Internet Explorer 9 で SVG をサポートする予定だがアニメーション要素は含まれない。
タグ: リリース
