AnimateImage

Index

Introduction

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.

Features

  • Displays multiple images continuously like animated GIF. It supports sequential/arbitrary file names.
  • Supports all image formats supported by Web browsers
    • PNG, JPEG, GIF, BMP, TIFF, WebP, etc.
    • Transparent PNG: Transparent background of animated images
    • High-quality images: more than 256 colors photos and illustrations
  • You can specify animation delay (0.5 seconds in default)
  • You can specify repeat count of animation (infinite iteration in default)
  • No need for JavaScript codes. img elements are animated automatically just by writing them.
  • You can control (play/stop/replay) animations and more by writing JavaScript codes
  • Displays as Simple Slide-Show by using photos, etc
  • Stand-alone script with about 5.6 KB file size (No need for JS libraries such as jQuery)

Usage

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.

  • Sequential number (0, 1, 2, 3, ...)
  • Sequential zero-padded number (01, 02, ..., 001, 002, ...)
  • Sequential alphabet (a, b, c, ..., A, B, C, ...)
  • Arbitrary files (foo.png, bar.jpg, baz.gif, ...)

Options to customize animation are more than 15.

  • Image title, alternative text of image
  • ID string and class name of image element
  • Animation interval, delay between animation cycles
  • Repeat count of animation
  • Whether to rewind to the first image at the end of animation
  • Whether to pause at the first/last image in animation
  • Whether to display blank image between animation cycles

Furthermore you can do below by writing JavaScript codes.

  • Contolling animation (play/stop/replay)
  • Getting animation img element, then modify/insert it
  • Changing common options for all animations

* See API Specification and Code Samples for more information.

* you can play/stop/replay animatione. you can change common options of all animations.

Download

animate-image.min.js
  • v1.1.1, 2012-09-17, 5.6 KB
  • Free license (for personal & non-commercial, donate to support)
  • Optimized and compressed code
animate-image.js
  • v1.1.1, 2012-09-17, 22.4 KB
  • Commercial license ($5.00)
  • Uncompressed code with comments
  • Paid support (technical questions, customization, etc.)

* 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.

Supported Browsers

  • Internet Explorer
  • Mozilla Firefox
  • Google Chrome
  • Opera
  • Safari

* AnimateImage is coded with JavaScript 1.4 / JScript 5.0 (IE5). So AnimateImage may support most browsers.

Past Releases

* This is obsolete information about older version (code samples and API specification, etc.)

API Specification

Auto-Apply img Elements

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.

AnimateImage.Animator Class

An object to control animation of images.

Properties
imgElem
'img' element that is created by AnimateImage, or specified with options.imgElem
Constructor Function
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)
animate(replay) Method

Plays (Replays) animation.

When argument "replay" is true or you call it after animation, the animation is replayed from the beggining.

stopAnimate() Method

Stops (Pauses) running animation.

AnimateImage.animate() Function

Animates multiple images.

* It is almost equivalent to new AnimateImage.Animator(files, options).animate().

Syntax
animator = AnimateImage.animate(files, options)

* The following old syntax also works.

animator = AnimateImage.animate(files, title, id, delay, repeat, rewind)
Arguments
files (required)
Image files specified with file name including the format string or array of file name
Sequential Number
In "[d-d]" format. Specify as "[0d-dd]" or "[00d-ddd]" if zero-padding.
Sequential Alphabet
In "[a-z]" format. Specify as "[A-Z]" if uppercase.
Comma Separated Values
In "[foo, bar, baz]" format. Specify as "[foo.png, bar.jpg, baz.gif]" if different extensions.
options
Animation settings specified with object literal ({ properyName: value })
title
Image title that is set to img@title attribute
alt
Alternative text that is set to img@alt attribute (options.title in default)
id
ID string of img element. It is unique value for each animation.
delay
Animation delay in milliseconds (AnimateImage.options.delay in default)
repeat
Repeat count of animation (AnimateImage.options.repeat in default)
rewind
Whether to rewind to the first image at the end of animation (AnimateImage.options.rewind in default)
pauseAtFirst
Whether to pause at the first image in animation (AnimateImage.options.pauseAtFirst in default)
pauseAtLast
Whether to pause at the last image in animation (AnimateImage.options.pauseAtLast in default)
showBlank
Whether to display blank image between animation cycles (AnimateImage.options.showBlank in default)
cycleDelay
Delay between animation cycles in milliseconds (AnimateImage.options.cycleDelay in default)
className
Class name of img element, separated by spaces (AnimateImage.options.className in default)
blankClassName
Class name of img element, added to blank image (AnimateImage.options.blankClassName in default)
attr
Arbitrary attributes specified with object literal ({ attributeName: value })
css
Arbitrary CSS properties that are set to img@style, specified with object literal ({ propertyName: value }).
You can use property names in DOM formatting (e.g. borderLeft) or CSS formatting (e.g. border-left). You need to enclose hyphenated names in quotation marks as { 'property-name': value }.
imgElem
img element specified with Image object. Use it to specify created img element. (img element will be created if omitted)
output
Whether to output img element
Return Value
animator
AnimateImage.Animator object. you can stop/replay animation using this object.

AnimateImage.options Object

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.

Properties
delay
Animation delay in milliseconds. Default is 500 ms.
repeat
Repeat count of animation. -1 means infinite iteration, and 0 means no animation (i.e. only displays first image). Default is -1.
rewind
Whether to rewind to the first image at the end of animation. Default is false.
pauseAtFirst
Whether to pause at the first image in animation. Default is false.
pauseAtLast
Whether to pause at the last image in animation. Default is false.
showBlank
Whether to display blank image between animation cycles. Default is false.
Blank image is transparent GIF using data:url, and is displayed in the size of first image.
cycleDelay
Delay between animation cycles in milliseconds. Default is 0.
className
Class name of img element, separated by spaces. class attribute is not added if empty. Default is "animation".
blankClassName
Class name of img element, added to blank image. class attribute is not added if empty. Default is "blank".
output
Whether to output img element. Default is true.

Code Samples

Code Sample 1: Sequential File Names
img Elements (HTML)
<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" />
JavaScript
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
Code Sample 2: Arbitrary File Names
img Elements (HTML)
<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" />
JavaScript
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']);
Code Sample 3:Specifying Directory Name with Format String
img Elements (HTML)
<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.

JavaScript
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.

Code Sample 4: title/alt Attributes
img Elements (HTML)
<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="" />
JavaScript
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.

Code Sample 5: id/class Attributes
img Elements (HTML)
<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="" />
JavaScript
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; }
Code Sample 6: delay/cycleDelay Options
img Elements (HTML)
<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" />
JavaScript
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 });
Code Sample 7: repeat/rewind Options
img Elements (HTML)
<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" />
JavaScript
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 });
Code Sample 8: pauseAtFirst/Last Options
img Elements (HTML)
<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" />
JavaScript
AnimateImage.animate('images/[0-9].png'); // pauseAtFirst=false, pauseAtLast=false
AnimateImage.animate('images/[0-9].png', { pauseAtFirst: true, pauseAtLast: true });
Code Sample 9: Arbitrary Attributes
img Elements (HTML)
<img src="images/0.png" data-files="[0-9].png"
    width="100" height="100" longdesc="long description" />
JavaScript
AnimateImage.animate('images/[0-9].png', {
  attr: {
    width: 100,
    height: 100,
    longdesc: 'long description'
  }
});
Code Sample 10: Arbitrary CSS Properties
img Elements (HTML)
<img src="images/0.png" data-files="[0-9].png"
    style="border: solid; border-top: dotted; border-bottom: dashed" />
JavaScript
AnimateImage.animate('images/[0-9].png', {
  css: {
    border: 'solid',
    borderTop: 'dotted',
    'border-bottom': 'dashed'
  }
});
Code Sample 11: Common Options (AnimateImage.options)
JavaScript
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 });
Code Sample 12: Animation Control (Start/Stop/Replay)
JavaScript
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)" />
Code Sample 13: Using Created img Elements
JavaScript
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 });
Code Sample 14: Getting/Modifying/Inserting img Elements
JavaScript
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);

Demos

Transparent PNG

Transparent background of animated images with transparent PNGs. In this demo, background color changes on mouse hover.

Simple Slide-Show

High-quality photos and illustrations which is more than 256 colors. In this demo, 24-bit colors JPEGs are animated.

Non-sequential filenames

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)

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.

FAQ

Which to Use Auto-Apply 'img' Elements or JavaScript Codes

Auto-Apply 'img' Elements
  • Improved readability by not writing 'script' elements and JavaScript codes
  • No need for JavaScript codes. It is also available in where JavaScript is limited.
  • 'img' elements are always displayed even if JavaScript is disabled or JavaScript errors occur (equivalent of 'noscript' elements)
JavaScript Codes
  • Animation behavior (start/stop/replay) is controllable
  • Handling 'img' elements in JavaScript (to get, create, modify, insert, etc.)
  • Common options can be changed

* 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>

Differences between AnimateImage.Animator Class and AnimateImage.animate() Function

AnimateImage.Animator Class
Use when you want to control the start timing of animation.
  • In creating object, first image is displayed.
  • Animation does not start until calling animate() method.
AnimateImage.animate() Function
Use when you do not care about starting animation automatically.
  • In calling the function, first image is displayed and animation starts.

How to Describe Valid HTML as Complying with Web Standards

There are three points below.

  • 'alt' attribute is mandatory in 'img' element
  • 'script' element is inline in body, and 'noscript' element is block
  • 'noscript' element contains only block elements

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>

Alternative Scripts

Animation Specification

Support Me?

  • If you have any feedbacks or questions, visit Contact Me
  • If you like this script, please consider making a donation to support the development

Any comments will be very helpful and appreciated. Thank you for your support!


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

Related Posts

  1. AnimateImage 1.0 Released
  2. AnimateImage 1.1.3 Released
  3. AnimateImage 0.8.3 Released
  4. AnimateImage 1.0.4 Released
  5. AnimateImage Old Version (v0.9 – v1.0.4)

Comments

  1. 見習い says:

    はじめまして。
    PNGアニメのできるjQueryを探していたところこちらにたどり着きました。
    大変助かりました。ありがとうございます!
    こんなに簡単にできてしまうなんて感動です。

    ひとつ質問させていただきたいのですが、「アニメーションが一度終了したのちに、一定時間後に再生を再開する。(これをループ)」という動作をさせたいと思い、以下のように書いてみたのですが、うまくいきませんでした。もしかしてかなりトンチンカンな事をしているのかもしれません。このような動作をさせるにはどのようにしたら良いのでしょうか?

    function test(){
    animateImage('sample[01-10].png', 'sampleanime', null, 100, 1); setTimeout("test()",3000);
    }

    このページ内のMEMOにお書きになっている「最初/最後の画像で一時停止してからアニメーションする (pauseAtFirst/Last)」との表記がもしかして関係あるのでしょうか?いきなりの質問で大変恐縮ですが、お分かりになりましたらお答え願えませんでしょうか?よろしく御願いいたします。

    • attosoft says:

      PNGアニメのできるjQueryを探していたところこちらにたどり着きました。
      大変助かりました。ありがとうございます!
      こんなに簡単にできてしまうなんて感動です。

      コメントありがとうございます。attosoft です。
      こちらこそご利用いただけて大変うれしいです。

      ひとつ質問させていただきたいのですが、「アニメーションが一度終了したのちに、一定時間後に再生を再開する。(これをループ)」という動作をさせたいと思い、以下のように書いてみたのですが、うまくいきませんでした。

      function test(){
          animateImage('sample[01-10].png', 'sampleanime', null, 100, 1);
          setTimeout("test()",3000);
      }
      

      希望のアニメーション動作を具体的にリストで表すと、次のような動作でしょうか。

      1. アニメーション間隔 0.1 秒で 1 回だけアニメーションする
      2. アニメーションが終了して止まる
      3. 一定時間 (3 秒) 後に「動作1」に戻る (以降繰り返す)

      アニメーション動作を制御したい場合は 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にお書きになっている「最初/最後の画像で一時停止してからアニメーションする (pauseAtFirst/Last)」との表記がもしかして関係あるのでしょうか?

      MEMO にあるのは思いついた機能の候補ですので直接的には関係しません。またどちらかと言えば関連性があるのは「アニメーションサイクル間の遅延時間 (cycleDelay)」になります。AnimateImage に cycleDelay が実装されれば、アニメーションとアニメーションの間隔に任意の時間を指定できるため、今回のような動作を簡単に実現することができる、ということになります。

  2. 見習い says:

    attosoftさま

    回答ありがとうございます!
    こんなに丁寧に書いていただけるなんて感激です。
    提示していただいたコードで理想の動作がしっかり実現できました!
    勉強にもなりました。
    まだまだ初心者。勉強しなければダメですね。

    ※「うまくいきませんでした」というのは、PNGアニメ自体が表示されなくなってしまった状態でした。

    いきなりの質問に貴重な時間を割いてお答えいただき、本当にありがとうございました。AnimateImage、これからも愛用させていただきます。
    それでは。

    • attosoft says:

      無事に解決したようで何よりです。
      作成したスクリプトが多少なりとも役に立っていると思うと、非常に嬉しく思います。

      ※「うまくいきませんでした」というのは、PNGアニメ自体が表示されなくなってしまった状態でした。

      原因はなんでしょう…。test() 関数を呼び出していないから、なんてことはないですよね。

  3. 見習い says:

    >原因はなんでしょう…。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();

    • attosoft says:

      しかし以下で試したところ、ページ自体が白紙の状態になってしまいました。

      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 を渡した方が適切です。

  4. babi says:

    はじめまして!とてもわかりやすく、素敵なページ、勉強させていただいております。

    AnimateImageを使わせていただき、動作確認をしていたところ、
    連続する画像が8枚以上だとエラーがおきてしまいました。。。
    7枚までですと正常に動きます。

    改変した部分は、秒数と、img 要素の書き込み(下記部分)のみです。

    ----------------------------------

    // img 要素の書き込み
    var imgElem = '<img id="' + id + '" src="' + anim.images[0].src + '"' + 'width="200"' ;

    ----------------------------------

    7枚と8枚の差は何なのでしょうか・・・
    お手数ですがご教授いただけますと幸いです。

    • attosoft says:

      コメントありがとうございます。attosoft です。

      連続する画像が8枚以上だとエラーがおきてしまいました。。。
      7枚までですと正常に動きます。

      具体的にはどのようなエラーでしょうか。

      現象およびエラーメッセージが分からないので推測になりますが、次のような原因が考えられます。

      • animateImage.js の改変に問題がある
      • 画像に問題がある
      • AnimateImage スクリプトのバグ

      animateImage.js を改変しているとのことですが、改変していない状態で動作確認してみてください。正常に動作するのであれば改変部分に、エラーとなる場合は画像に問題がある可能性があります。

      そもそも animateImage.js を改変する必要はあるのでしょうか。

      改変した部分は、秒数と、img 要素の書き込み(下記部分)のみです。

      // img 要素の書き込み
      var imgElem = '<img id="' + id + '" src="' + anim.images[0].src
        + '"' + 'width="200"' ;
      

      秒数の変更と width 指定のみであるならば、次のようなコードを書いて、

      Animations.delay = xxx;
      

      CSS で次のようなスタイルを指定すれば改変不要になりますよね。

      img.animation {
          width: 200px;
      }
      

      ※ ちなみに改変部分ですが、width 属性の前にスペースがないので不正な HTML となってしまいます。

    • babi says:

      attosoft 様

      こんにちは、先日質問させていただきましたbabiと申します。

      お返事ありがとうございます!!とても丁寧な解説、勉強になります。
      確かにjs側で画像サイズを指定する意味はないですね、、失礼いたしました、cssで調整することにして、jsは改変せずに使用させていただきました。

      ですが、やはり8枚以降になると動作しませんでした。。

      他のjsが競合になっているのかな?と思い、animateImage.jsのみと、画像、htmlのみで実験してみましたが、8枚以上になるとページが生成されません。
      エラー文言も出てこず、画像を他のものに差し替えてもだめでした。。。

      ちなみに、実験時のファイル内容は以下の通りです

      ※jsは秒数含め改変一切なし

      html
      ----------------------------------

      テスト

      animateImage('画像パス[01-08].gif');

      ----------------------------------

      上記の記述で、画像パス[01-07].gif までだと正常に動きます。。

      jsエラーが起きないので、何が問題なのかわかりません。。何かhtml記述に間違いがあれば、教えていただけますと幸いです。

    • babi says:

      あ、すみません、、上記に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>
      ----------------------------------

      こちらで表示されますでしょうか。。

    • attosoft says:

      あ、原因分かりました。AnimateImage スクリプトのバグでした。色々と時間を無駄にさせてしまってすみません。

      連番が "0" で始まっていると 8 進数と解釈されるため "08", "09" は "0" と評価されていました。問題を修正した version 0.8.0.3 に差し替えましたので、正常に動作するかご確認ください。

      ※ version 0.8.0.3: parseInt 関数に明示的に基数 10 を指定

    • babi says:

      attosoft 様

      8進数!そうだったのですね!すぐにわかるなんてすごい!!
      迅速なご対応、ありがとうございます、更新されたjsに差し替えましたところ、正常に動作しました!
      素敵なコードを提供くださり、ほんとうに助かっております。勉強させていただきます。

      本当にありがとうございました!!

    • attosoft says:

      更新されたjsに差し替えましたところ、正常に動作しました!

      問題が解決されたようで良かったです。AnimateImage スクリプトのバグだったのに、余計なお手間を取らせてしまいすいませんでした。

  5. SAsa says:

    attosoft 様

    はじまして。今回こちらのjsを使用させていただかこうかと考えているのですが、アニメーションを繰り返さずに1回にして、アニメーション終了時のイベントを取得することは可能でしょうか?

    こちらがやりたいこととしては、アニメーション終了後に別の全くアニメーションを動かすことになります。もし簡単に終了イベント等取る方法がありましたらご教授いただけたらと思います。

    • attosoft says:

      コメントありがとうございます。attosoft です。

      アニメーションを繰り返さずに1回にして、アニメーション終了時のイベントを取得することは可能でしょうか?

      こちらがやりたいこととしては、アニメーション終了後に別の全くアニメーションを動かすことになります。もし簡単に終了イベント等取る方法がありましたらご教授いただけたらと思います。

      AnimateImage の API 仕様はこのページに記載してある通りですので、残念ながらイベントには対応していません。イベントの仕組みを利用したい場合は、そのように改変する必要があります。(改変と言ってもイベントハンドラを呼び出すだけですが)

      あるいは希望のアニメーションが「アニメーションA → アニメーションB → 終了」であるならば、アニメーションA とアニメーションB の画像ファイルからなる配列を生成して引数 files に指定する方法が一番簡単だと思います。

  6. Jeeseong Chung says:

    Great script... I'm using this script for my presentation...

  7. taro says:

    attosoft様

    こんにちは。AnimateImage version 0.8を愛用させていただいてゲームを作成しております。素晴らしいJSありがとうございます!

    アニメーションサイクル間に空白の画像を表示する (showBlankSpace)実装を心待ちにしております。気が向いたとき実装していただけたら最高です!

    • attosoft says:

      taro さん

      コメントありがとうございます。ゲームに使われるとは予想外でした。久しぶりにソースコードをいじってみたら保留にしていた機能が実装できましたので AnimateImage 0.8.3 を公開しました。Animations.showBlank = true でアニメーションサイクル間に空白の画像が表示されるようになります。