AnimateImage
目次
概要
AnimateImage は複数の画像をアニメーション GIF のように表示する JavaScript コード。
※ アニメーション機能を実現するスクリプトはいくつかあるが、要求に合ったものがなかなか見つからなかったため作成。
特徴
- 複数の画像をアニメーション GIF のように表示する (連続表示)
- ファイル名が連番となっている連続した画像
- ファイル名が連番になっていない任意の画像
- Web ブラウザーがサポートするすべての画像形式に対応 (PNG, JPEG, GIF, BMP など)
- 透過 PNG 画像によってアニメーション画像の背景を透過できる
- 256 色を超える高画質の写真やイラストをアニメーションできる
- 任意のアニメーション間隔を指定できる (デフォルトは 0.5 秒)
- アニメーションの繰り返し回数を指定できる (デフォルトは無制限に繰り返す)
- 任意のタイミングでアニメーションを再生/停止/再開することができる
- アニメーションではない画像を指定すれば簡易スライドショーになる
- わずか 2.5 KB ほどのスタンドアローンなスクリプト (jQuery などの JS ライブラリは不要)
使い方
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 仕様を参照。
ダウンロード
- animateImage.js (UTF-8)
- animateImage.min.js (Minify 版)
※ Minify: 主にパフォーマンス向上のために JavaScript コードを最適化してサイズを小さくすること。具体的にはコメントや空白の除去、ローカル変数名の短縮などが行われる。
対応 Web ブラウザー
- Internet Explorer
- Mozilla Firefox
- Google Chrome
- Apple Safari
- Opera
※ 一応 JavaScript 1.4 または JScript 5.0 (IE5) で動作するように実装しているつもりなので、古いバージョンの Web ブラウザーやほかの Web ブラウザーでも特に問題なく動作するはず。
更新履歴
- AnimateImage version 0.8 (0.8.0.1, 0.8.0.2, 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 (初回リリース)
※ v0.7 以降は仕様変更により v0.6.x 以前のバージョンとの互換性はなし。v0.6.x 系の仕様については Animate Image version 0.6.x 系の情報を参照。
デモ
透過 PNG 画像
アニメーション画像に 透過 PNG 画像を指定するとアニメーション GIF のように背景を透過することができる。デモではマウスホバーによって背景色が変更される。
簡易スライドショー
アニメーション画像に 256 色 (GIF の最大色数) を超える高画質の写真やイラストを指定することができる。デモでは色数 24 bit の JPEG 画像を指定している。
ファイル名が連番でない任意の画像
アニメーション画像にファイル名が連番でない任意の画像を指定することができる。デモでは blank.png, website.png, blog.png, download.png ファイルを指定している。
アニメーションの再生/停止/開再
アニメーションの再生/停止/再開を制御することができる。デモでは Start, Stop, Replay ボタンを押すとアニメーションが再生 (再開)、停止 (一時停止)、リプレイされる。
Windows コントロール
ボタン
コンボボックス
ヒント
メニュー
リストボックス
記述例
次のような画像ファイルをアニメーションさせる場合の記述例を紹介する。
- 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.className
- img 要素の class 名 (img@class 属性値)。デフォルト値は "animation"。undefined の場合は class 属性が付加されない。
ImageAnimator オブジェクト
複数の画像のアニメーションを制御する。
コンストラクタ関数
ImageAnimator(files, title, id, delay, repeat, rewind)
※ 引数の仕様については animateImage() 関数を参照。
animate(replay) メソッド
アニメーションを再生 (開再)する。
引数 replay が true の場合やアニメーション終了後に呼び出した場合は、アニメーションが最初の画像から再生 (リプレイ) される。
stopAnimate() メソッド
アニメーションを停止 (一時停止) する。
FAQ
ImageAnimator オブジェクトと animateImage() 関数の使い分け
- ImageAnimator オブジェクト
- アニメーションの開始タイミングを制御したい場合に利用する
-
- オブジェクトを生成すると最初の画像が表示される
- animate() メソッドを呼ぶまでアニメーションは開始しない
- animateImage() 関数
- 自動的にアニメーションが開始しても構わない場合に利用する
-
- 関数を呼び出すと最初の画像が表示されアニメーションが開始する
Web 標準に準拠した (妥当な) HTML を記述するには
画像表示系の 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 で対応)- 最初/最後の画像で一時停止してからアニメーションする (pauseAtFirst/Last)
- アニメーションサイクル間に空白の画像を表示する (showBlankSpace)
- アニメーションサイクル間の遅延時間 (cycleDelay)
※ なかなかスマートな実装が思いつかないので対応保留。とりあえずアニメーションする画像を調整して運用する。(最初/最後の画像を重複させる、空白の画像を最後にするなど)
"keyboard keys" by chromatix is licensed under Creative Commons License.
関連記事
- JavaScript: 複数の画像をアニメーション GIF のように表示する AnimateImage (旧バージョン)
- AnimateImage version 0.8 公開
- AnimateImage version 0.6.5 公開
- AnimateImage version 0.7 公開
- AnimateImage version 0.6.2 公開
コメントフィード (RSS)
はじめまして。
PNGアニメのできるjQueryを探していたところこちらにたどり着きました。
大変助かりました。ありがとうございます！
こんなに簡単にできてしまうなんて感動です。
ひとつ質問させていただきたいのですが、「アニメーションが一度終了したのちに、一定時間後に再生を再開する。（これをループ）」という動作をさせたいと思い、以下のように書いてみたのですが、うまくいきませんでした。もしかしてかなりトンチンカンな事をしているのかもしれません。このような動作をさせるにはどのようにしたら良いのでしょうか？
function test(){
animateImage('sample[01-10].png', 'sampleanime', null, 100, 1); setTimeout("test()",3000);
}
このページ内のMEMOにお書きになっている「最初/最後の画像で一時停止してからアニメーションする (pauseAtFirst/Last)」との表記がもしかして関係あるのでしょうか？いきなりの質問で大変恐縮ですが、お分かりになりましたらお答え願えませんでしょうか？よろしく御願いいたします。
コメントありがとうございます。attosoft です。
こちらこそご利用いただけて大変うれしいです。
希望のアニメーション動作を具体的にリストで表すと、次のような動作でしょうか。
アニメーション動作を制御したい場合は ImageAnimator オブジェクトを利用します。たとえば今回のような動作であれば、次のようなコードになると思います。
var animator = new ImageAnimator('sample[01-10].png', 'sampleanime', null, 100, 1); function test(){ animator.animate(); setTimeout("test()", 3000); } test();ちなみにというのは、もしかしてアニメーション画像が次々と挿入されていく現象のことでしょうか。これは animateImage() 関数を同じ ID で複数回呼ぶと、重複しない ID 文字列の生成処理が行われるのが要因です。（バグではありません）
MEMO にあるのは思いついた機能の候補ですので直接的には関係しません。またどちらかと言えば関連性があるのは「アニメーションサイクル間の遅延時間 (cycleDelay)」になります。AnimateImage に cycleDelay が実装されれば、アニメーションとアニメーションの間隔に任意の時間を指定できるため、今回のような動作を簡単に実現することができる、ということになります。
attosoftさま
回答ありがとうございます！
こんなに丁寧に書いていただけるなんて感激です。
提示していただいたコードで理想の動作がしっかり実現できました！
勉強にもなりました。
まだまだ初心者。勉強しなければダメですね。
※「うまくいきませんでした」というのは、PNGアニメ自体が表示されなくなってしまった状態でした。
いきなりの質問に貴重な時間を割いてお答えいただき、本当にありがとうございました。AnimateImage、これからも愛用させていただきます。
それでは。
無事に解決したようで何よりです。
作成したスクリプトが多少なりとも役に立っていると思うと、非常に嬉しく思います。
原因はなんでしょう…。test() 関数を呼び出していないから、なんてことはないですよね。
＞原因はなんでしょう…。test() 関数を呼び出していないから、なんてことはないですよね。
問題は解決したものの、勉強のためにいろいろ試してみようと思い、最初に試したものを引っ張ってきたのですが、以下になります。この時点では「test() 関数を呼び出していない」という事になってしまっているようですね。（汗）
function test(){
animateImage('sample[01-10].png', 'sampleanime', null, 100, 1); setTimeout("test()",3000);
}
しかし以下で試したところ、ページ自体が白紙の状態になってしまいました。
function test(){
animateImage('sample[01-10].png', 'sampleanime', null, 100, 1); setTimeout("test()",3000);
}
test();
うーん、原因不明ですね。私の環境 (IE, Chrome, Firefox, Opera, Safari) では、上記コードで一応 (初回の) 画像アニメーションが行われますけど。（前述のコメントのように animateImage 関数は同じ ID による複数回呼び出しを想定していないため、初回以降のアニメーションには問題あり）
ちなみに細かいことになりますが setTimeout 関数では文字列 "test()" を渡すのではなく関数オブジェクト test を渡した方が適切です。
はじめまして！とてもわかりやすく、素敵なページ、勉強させていただいております。
AnimateImageを使わせていただき、動作確認をしていたところ、
連続する画像が8枚以上だとエラーがおきてしまいました。。。
7枚までですと正常に動きます。
改変した部分は、秒数と、img 要素の書き込み（下記部分）のみです。
———————————-
// img 要素の書き込み
var imgElem = '<img id="' + id + '" src="' + anim.images[0].src + '"' + 'width="200"' ;
———————————-
７枚と８枚の差は何なのでしょうか・・・
お手数ですがご教授いただけますと幸いです。
コメントありがとうございます。attosoft です。
具体的にはどのようなエラーでしょうか。
現象およびエラーメッセージが分からないので推測になりますが、次のような原因が考えられます。
animateImage.js を改変しているとのことですが、改変していない状態で動作確認してみてください。正常に動作するのであれば改変部分に、エラーとなる場合は画像に問題がある可能性があります。
そもそも animateImage.js を改変する必要はあるのでしょうか。
秒数の変更と width 指定のみであるならば、次のようなコードを書いて、
CSS で次のようなスタイルを指定すれば改変不要になりますよね。
img.animation { width: 200px; }※ ちなみに改変部分ですが、width 属性の前にスペースがないので不正な HTML となってしまいます。
attosoft 様
こんにちは、先日質問させていただきましたbabiと申します。
お返事ありがとうございます！！とても丁寧な解説、勉強になります。
確かにjs側で画像サイズを指定する意味はないですね、、失礼いたしました、cssで調整することにして、jsは改変せずに使用させていただきました。
ですが、やはり8枚以降になると動作しませんでした。。
他のjsが競合になっているのかな？と思い、animateImage.jsのみと、画像、htmlのみで実験してみましたが、8枚以上になるとページが生成されません。
エラー文言も出てこず、画像を他のものに差し替えてもだめでした。。。
ちなみに、実験時のファイル内容は以下の通りです
※jsは秒数含め改変一切なし
html
———————————-
テスト
animateImage('画像パス[01-08].gif');
———————————-
上記の記述で、画像パス[01-07].gif までだと正常に動きます。。
jsエラーが起きないので、何が問題なのかわかりません。。何かhtml記述に間違いがあれば、教えていただけますと幸いです。
あ、すみません、、上記にhtmlコードを書いたのですがコメント欄にはソース反映されませんね。。
———————————-
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>テスト</title>
<script type="text/javascript" src="animateImage.js"></script>
</head>
<body>
<script type="text/javascript">animateImage('画像パス[01-08].gif');</script>
</body>
</html>
———————————-
こちらで表示されますでしょうか。。
あ、原因分かりました。AnimateImage スクリプトのバグでした。色々と時間を無駄にさせてしまってすみません。
連番が "0" で始まっていると 8 進数と解釈されるため "08", "09" は "0" と評価されていました。問題を修正した version 0.8.0.3 に差し替えましたので、正常に動作するかご確認ください。
※ version 0.8.0.3: parseInt 関数に明示的に基数 10 を指定
attosoft 様
8進数！そうだったのですね！すぐにわかるなんてすごい！！
迅速なご対応、ありがとうございます、更新されたjsに差し替えましたところ、正常に動作しました！
素敵なコードを提供くださり、ほんとうに助かっております。勉強させていただきます。
本当にありがとうございました！！
問題が解決されたようで良かったです。AnimateImage スクリプトのバグだったのに、余計なお手間を取らせてしまいすいませんでした。
attosoft 様
はじまして。今回こちらのjsを使用させていただかこうかと考えているのですが、アニメーションを繰り返さずに１回にして、アニメーション終了時のイベントを取得することは可能でしょうか？
こちらがやりたいこととしては、アニメーション終了後に別の全くアニメーションを動かすことになります。もし簡単に終了イベント等取る方法がありましたらご教授いただけたらと思います。
コメントありがとうございます。attosoft です。
AnimateImage の API 仕様はこのページに記載してある通りですので、残念ながらイベントには対応していません。イベントの仕組みを利用したい場合は、そのように改変する必要があります。(改変と言ってもイベントハンドラを呼び出すだけですが)
あるいは希望のアニメーションが「アニメーションA → アニメーションB → 終了」であるならば、アニメーションA とアニメーションB の画像ファイルからなる配列を生成して引数 files に指定する方法が一番簡単だと思います。
Great script… I'm using this script for my presentation…
Thanks for using AnimateImage script, and sorry for late reply.
Your comment will help encourage me to support software development.