var _gaq = _gaq || []; _gaq.push([\'_setAccount\', \'UA-13211647-1\']); _gaq.push([\'_trackPageview\']); (function() { var ga = document.createElement(\'script\'); ga.type = \'text/javascript\'; ga.async = true; ga.src = (\'https:\' == document.location.protocol ? \'https://ssl\' : \'http://www\') + \'.google-analytics.com/ga.js\'; var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(ga, s); })();
Wish to be a programmer rather than a coder
AnimateImage is a JavaScript library which displays multiple images continuously like animated GIF.
* I found some animation scripts but they do not match for me. So I had decided to create AnimateImage on my own.
Write the following code in “head” or “body” element to load AnimateImage script.
<script type="text/javascript" src="animate-image.min.js"></script>
Write the following code if you animate 1.png, 2.png, … 10.png in ‘images’ directory.
<img src="images/1.png" data-files="[1-10].png" />
Or write the following code if you use AnimateImage from inside JavaScript.
<script type="text/javascript"> AnimateImage.animate('Image[1-10].png'); </script>
Image files that can be animated are the following 4 types.
Options to customize animation are more than 15.
Furthermore you can do below by writing JavaScript codes.
* See API Specification and Code Samples for more information.
* you can play/stop/replay animatione. you can change common options of all animations.
* animate-image.min.js is minified by removing comments, line breaks, unnecessary spaces, etc. And local variables and function parameters are renamed to shorter name. While animate-image.js is formatted for readability. And documentation comments are written in JSDoc style.
* AnimateImage is coded with JavaScript 1.4 / JScript 5.0 (IE5). So AnimateImage may support most browsers.
* This is obsolete information about older version (code samples and API specification, etc.)
AnimateImage is applied automatically to ‘img’ elements that have ‘data-files’ attribute.
<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="" />
You need to specify undefined attributes with custom data-* attributes in ‘img’ element. ‘src’ and ‘data-files’ attributes are required in AnimateImage. ‘data-files’ attribute is specified with file name including format string, or specified with relative path to directory when specifying directory name with format string. See Code Sample 3 for details.
An object to control animation of images.
AnimateImage.Animator(files, options)
* See AnimateImage.animate() function about arguments specification. The following old syntax also works.
AnimateImage.Animator(files, title, id, delay, repeat, rewind)
Plays (Replays) animation.
When argument “replay” is true or you call it after animation, the animation is replayed from the beggining.
Stops (Pauses) running animation.
Animates multiple images.
* It is almost equivalent to new AnimateImage.Animator(files, options).animate()
.
animator = AnimateImage.animate(files, options)
* The following old syntax also works.
animator = AnimateImage.animate(files, title, id, delay, repeat, rewind)
{ properyName: value }
)
{ attributeName: value }
){ propertyName: value }
).{ 'property-name': value }
.Common options in AnimateImage.
* You need to set value before the start of animation if you change it, because the value is referred to before the start of animation.
<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" />
AnimateImage.animate('images/[0-9].png'); AnimateImage.animate('images/[01-99].png'); AnimateImage.animate('images/[001-999].png'); AnimateImage.animate('images/[a-z].png'); AnimateImage.animate('images/[A-Z].png'); AnimateImage.animate('dir/pre-[1-10]_post.jpg'); // prefix/suffix
<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" />
AnimateImage.animate('images/[foo, bar, baz].png'); AnimateImage.animate('images/[foo.png, bar.jpg, baz.gif]'); AnimateImage.animate('dir/pre-[foo, bar, baz]_post.jpg'); // prefix/suffix
* You can also specify array of file name instead of file name including format string.
var files = ['images/foo.png', 'images/bar.png', 'images/baz.png']; AnimateImage.animate(files); AnimateImage.animate(['images/foo.png', 'images/bar.jpg', 'images/baz.gif']);
<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’ attribute is specified with file name including format string, or specified with relative path to directory when specifying directory name with format string.
AnimateImage.animate('parent/child/image[0-9].png'); AnimateImage.animate('parent/child[0-9]/image.png'); AnimateImage.animate('parent[0-9]/child/image.png');
* Specify path to directory to data-files attribute if directory name is sequential.
<img src="images/0.png" data-files="[0-9].png" title="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="" />
AnimateImage.animate('images/[0-9].png', { title: 'foo' }); // title="foo" alt="foo" AnimateImage.animate('images/[0-9].png', { title: 'foo', alt: 'bar' }); // title="foo" alt="bar" AnimateImage.animate('images/[0-9].png', { alt: 'bar' }); // alt="bar" AnimateImage.animate('images/[0-9].png', { alt: '' }); // alt=""
* Add alt attribute with empty string to img element (img@alt=””) if alternative text for images is unnecessary.
<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="" />
AnimateImage.animate('images/[0-9].png'); // class="animation" AnimateImage.animate('images/[0-9].png', { id: 'foo' }); // id="foo" class="animation" AnimateImage.animate('images/[0-9].png', { className: 'bar' }); // class="bar" AnimateImage.animate('images/[0-9].png', { className: 'bar baz' }); // class="bar baz" AnimateImage.animate('images/[0-9].png', { className: '' }); // no class
* Define style rules with class/id selectors in CSS files or style elements.
img.animation { background: white; } img#foo { background: silver; } img.bar { background: gray; } img.baz { background: black; }
<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" />
AnimateImage.animate('images/[0-9].png'); // delay=500, cycleDelay=0 AnimateImage.animate('images/[0-9].png', { delay: 1000 }); AnimateImage.animate('images/[0-9].png', { cycleDelay: 2000 });
<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" />
AnimateImage.animate('images/[0-9].png'); // repeat=-1, rewind=false AnimateImage.animate('images/[0-9].png', { repeat: 1 }); AnimateImage.animate('images/[0-9].png', { repeat: 2, rewind: true });
<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" />
AnimateImage.animate('images/[0-9].png'); // pauseAtFirst=false, pauseAtLast=false AnimateImage.animate('images/[0-9].png', { pauseAtFirst: true, pauseAtLast: true });
<img src="images/0.png" data-files="[0-9].png" width="100" height="100" longdesc="long description" />
AnimateImage.animate('images/[0-9].png', { attr: { width: 100, height: 100, longdesc: 'long description' } });
<img src="images/0.png" data-files="[0-9].png" style="border: solid; border-top: dotted; border-bottom: dashed" />
AnimateImage.animate('images/[0-9].png', { css: { border: 'solid', borderTop: 'dotted', 'border-bottom': 'dashed' } });
AnimateImage.animate('images/[0-9].png'); // delay=500, repeat=-1 AnimateImage.options.delay = 1000; AnimateImage.options.repeat = 1; AnimateImage.animate('images/[0-9].png'); // delay=1000, repeat=1 AnimateImage.animate('images/[0-9].png'); // delay=1000, repeat=1 AnimateImage.animate('images/[0-9].png', { delay: 2000, repeat: -1 });
var animator = new AnimateImage.Animator('images/[0-9].png'); animator.animate(); var animator2 = AnimateImage.animate('images/[0-9].png');
* Write the following input elements when you control animation behavior.
<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)" />
var imgElem = new Image(); imgElem.src = 'images/0.png'; imgElem.width = 100; imgElem.height = 100; imgElem.setAttribute('longdesc', 'long description'); AnimateImage.animate('images/[0-9].png', { imgElem: imgElem });
var animator = AnimateImage.animate('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);
Transparent background of animated images with transparent PNGs. In this demo, background color changes on mouse hover.
High-quality photos and illustrations which is more than 256 colors. In this demo, 24-bit colors JPEGs are animated.
Any files whose filename is non-sequential number. In this demo, “blank.png”, “website.png”, “blog.png”, and “download.png” are animated.
Animation control (play/stop/replay) at any time. In this demo, [Start] button starts (restarts) animation, [Stop] button stops (pauses) animation, and [Replay] button replays animation from the beggining.
* FYI: The two sample codes below are almost equivalent.
<p><img src="images/0.png" data-files="[0-9].png" /></p>
<p><script type="text/javascript">AnimateImage.animate('images/[0-9].png');</script></p> <noscript><p><img src="images/0.png" /></p></noscript>
There are three points below.
Then valid HTML as complying with Web standards is as follows.
<div> <script type="text/javascript"> AnimateImage.animate('image[0-9].png', 'text'); </script> </div> <noscript> <div><img src="image0.png" alt="text" /></div> </noscript>
Any comments will be very helpful and appreciated. Thank you for your support!
“keyboard keys” by chromatix is licensed under Creative Commons License.
はじめまして。
PNGアニメのできるjQueryを探していたところこちらにたどり着きました。
大変助かりました。ありがとうございます!
こんなに簡単にできてしまうなんて感動です。
ひとつ質問させていただきたいのですが、「アニメーションが一度終了したのちに、一定時間後に再生を再開する。(これをループ)」という動作をさせたいと思い、以下のように書いてみたのですが、うまくいきませんでした。もしかしてかなりトンチンカンな事をしているのかもしれません。このような動作をさせるにはどのようにしたら良いのでしょうか?
function test(){
animateImage(‘sample[01-10].png’, ‘sampleanime’, null, 100, 1); setTimeout(“test()”,3000);
}
このページ内のMEMOにお書きになっている「最初/最後の画像で一時停止してからアニメーションする (pauseAtFirst/Last)」との表記がもしかして関係あるのでしょうか?いきなりの質問で大変恐縮ですが、お分かりになりましたらお答え願えませんでしょうか?よろしく御願いいたします。
コメントありがとうございます。attosoft です。
こちらこそご利用いただけて大変うれしいです。
希望のアニメーション動作を具体的にリストで表すと、次のような動作でしょうか。
アニメーション動作を制御したい場合は ImageAnimator オブジェクトを利用します。たとえば今回のような動作であれば、次のようなコードになると思います。
ちなみに
というのは、もしかしてアニメーション画像が次々と挿入されていく現象のことでしょうか。これは 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"' ;
———————————-
7枚と8枚の差は何なのでしょうか・・・
お手数ですがご教授いただけますと幸いです。
コメントありがとうございます。attosoft です。
具体的にはどのようなエラーでしょうか。
現象およびエラーメッセージが分からないので推測になりますが、次のような原因が考えられます。
animateImage.js を改変しているとのことですが、改変していない状態で動作確認してみてください。正常に動作するのであれば改変部分に、エラーとなる場合は画像に問題がある可能性があります。
そもそも animateImage.js を改変する必要はあるのでしょうか。
秒数の変更と width 指定のみであるならば、次のようなコードを書いて、
CSS で次のようなスタイルを指定すれば改変不要になりますよね。
※ ちなみに改変部分ですが、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を使用させていただかこうかと考えているのですが、アニメーションを繰り返さずに1回にして、アニメーション終了時のイベントを取得することは可能でしょうか?
こちらがやりたいこととしては、アニメーション終了後に別の全くアニメーションを動かすことになります。もし簡単に終了イベント等取る方法がありましたらご教授いただけたらと思います。
コメントありがとうございます。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.
attosoft様
こんにちは。AnimateImage version 0.8を愛用させていただいてゲームを作成しております。素晴らしいJSありがとうございます!
アニメーションサイクル間に空白の画像を表示する (showBlankSpace)実装を心待ちにしております。気が向いたとき実装していただけたら最高です!
taro さん
コメントありがとうございます。ゲームに使われるとは予想外でした。久しぶりにソースコードをいじってみたら保留にしていた機能が実装できましたので AnimateImage 0.8.3 を公開しました。
Animations.showBlank = true
でアニメーションサイクル間に空白の画像が表示されるようになります。