AnimateImage

複数の透過 PNG 画像からなるアニメーション

目次

概要

AnimateImage は複数の画像をアニメーション GIF のように連続表示する JavaScript ライブラリ。

アニメーション機能を実現するスクリプトはいくつかあるが、要求に合ったものがなかなか見つからなかったため自分で作成。

特徴

  • 複数の画像をアニメーション GIF のように連続表示する。連番または任意のファイル名に対応。
  • Web ブラウザーがサポートするすべての画像形式に対応
    • PNG, JPEG, GIF, BMP, TIFF, WebP など
    • 透過 PNG 画像によってアニメーション画像の背景を透過できる
    • 256 色を超える高画質の写真やイラストをアニメーションできる
  • アニメーション間隔を指定できる (デフォルトは 0.5 秒)
  • アニメーションの繰り返し回数を指定できる (デフォルトは無制限に繰り返す)
  • JavaScript コード不要。img 要素を記述すると自動的にアニメーションが適用される。
  • JavaScript コードを記述するとアニメーションの制御 (再生/停止/再開) などが可能になる
  • 写真などを指定すれば簡易スライドショーになる
  • 5.6 KB ほどのスタンドアローンなスクリプト (jQuery などの JS ライブラリは不要)

使い方

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

<script type="text/javascript" src="animate-image.min.js"></script>

images フォルダー内の 1.png, 2.png, … 10.png をアニメーションさせる場合は次のように記述する。

<img src="images/1.png" data-files="[1-10].png" />

あるいは、JavaScript 内から AnimateImage を利用する場合は次のように記述する。

<script type="text/javascript">
    AnimateImage.animate('images/[1-10].png');
</script>

アニメーション可能な画像ファイルは以下の 4 種類。

  • 数字の連番 (0, 1, 2, 3, …)
  • ゼロパディングの数字の連番 (01, 02, …, 001, 002, …)
  • アルファベットの連番 (a, b, c, …, A, B, C, …)
  • 任意のファイル (foo.png, bar.jpg, baz.gif, …)

アニメーションをカスタマイズするためのオプションは 15 個以上。

  • 画像タイトル、画像の代替テキスト
  • 画像要素の ID 文字列、クラス名
  • アニメーション間隔、アニメーションサイクル間の間隔
  • アニメーションの繰り返し回数
  • アニメーション終了時に最初の画像に巻き戻すかどうか
  • アニメーション中に最初/最後の画像で一時停止するかどうか
  • アニメーションサイクル間に空白画像を表示するかどうか

さらに JavaScript コードを記述すると次のようなことができる。

  • アニメーションを制御 (再生/停止/再開) する
  • アニメーション画像要素を取得して編集/出力する
  • すべてのアニメーションに共通する設定を変更する

※ 詳細は API 仕様記述例を参照。

ダウンロード

animate-image.min.js
  • v1.1.1, 2012-09-17, 5.6 KB
  • 無料ライセンス (個人かつ非営利、寄付歓迎)
  • 最適化された圧縮コード
animate-image.js
  • v1.1.1, 2012-09-17, 22.4 KB
  • 商用ライセンス (500 円)
  • コメント付きの非圧縮コード
  • 有償サポート (技術的な質問やカスタマイズなど)

※ animate-image.min.js はコメントや改行、不必要な空白などの削除によりファイルサイズが縮小されている。またローカル変数や関数の引数の名前は短縮されている。一方で animate-image.js は読みやすいように整形されているほか、ドキュメンテーションコメントが JSDoc スタイルで記述されている。

対応 Web ブラウザー

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

※ 一応 JavaScript 1.4 または JScript 5.0 (IE5) で動作するように実装しているつもりなので、古いバージョンの Web ブラウザーや上記以外の Web ブラウザーでも特に問題なく動作するはず。

更新履歴

※ 旧バージョンの情報 (記述例や API 仕様など)

API 仕様

自動適用 img 要素

data-files 属性を持つ img 要素に自動的に AnimateImage が適用される。

<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="" />

img 要素で未定義の属性は独自データ属性 (data-*) で指定する。src 属性と deta-files 属性は AnimateImage の必須属性。data-files 属性には書式文字列を含んだファイル名、または書式文字列でディレクトリ名を指定する場合はそのディレクトリまでの相対パスを指定する。詳細は記述例3を参照。

AnimateImage.Animator クラス

複数画像からなるアニメーションを制御する。

プロパティ
imgElem
AnimateImage によって生成された (または options.imgElem で指定した) img 要素
コンストラクタ関数
AnimateImage.Animator(files, options)

※ 引数の仕様については AnimateImage.animate() 関数を参照。旧バージョンの構文も機能する。

AnimateImage.Animator(files, title, id, delay, repeat, rewind)
animate(replay) メソッド

アニメーションを再生 (開再)する。

引数 replay が true の場合やアニメーション終了後に呼び出した場合は、アニメーションが最初の画像から再生 (リプレイ) される。

stopAnimate() メソッド

アニメーションを停止 (一時停止) する。

AnimateImage.animate() 関数

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

new AnimateImage.Animator(files, options).animate() とほとんど等価。

構文
animator = AnimateImage.animate(files, options)

※ 旧バージョンの構文も機能する。

animator = AnimateImage.animate(files, title, id, delay, repeat, rewind)
引数
files (必須)
画像ファイル。書式文字列を含んだファイル名、またはファイル名の配列で指定する。
数字の連番
“[d-d]” 形式で表す。ゼロパディングの場合は “[0d-dd]” や “[00d-ddd]” のように指定する。
アルファベットの連番
“[a-z]” 形式で表す。大文字の場合は “[A-Z]” のように指定する。
カンマ区切り値
“[foo, bar, baz]” 形式で表す。拡張子が異なる場合は “[foo.png, bar.jpg, baz.gif]” のように指定する。
options
アニメーション設定。オブジェクトリテラル ({ properyName: value }) で指定する。
title
画像タイトル。img@title 属性値となる。
alt
代替テキスト。img@alt 属性値となる。(省略時は options.title)
id
img 要素の ID 文字列。アニメーションごとにユニークな値を指定する。
delay
アニメーション間隔 (省略時は AnimateImage.options.delay)
repeat
アニメーションの繰り返し回数 (省略時は AnimateImage.options.repeat)
rewind
アニメーション終了時に最初の画像に巻き戻す場合は true (省略時は AnimateImage.options.rewind)
pauseAtFirst
アニメーション中に最初の画像で一時停止する場合は true (省略時は AnimateImage.options.pauseAtFirst)
pauseAtLast
アニメーション中に最後の画像で一時停止する場合は true (省略時は AnimateImage.options.pauseAtLast)
showBlank
アニメーションサイクル間に空白画像を表示する場合は true (省略時は AnimateImage.options.showBlank)
cycleDelay
アニメーションサイクル間の間隔 (省略時は AnimateImage.options.cycleDelay)
className
img 要素の class 名。複数指定する場合は空白で区切る。(省略時は AnimateImage.options.className)
blankClassName
空白画像に付加される img 要素の class 名 (省略時は AnimateImage.options.blankClassName)
attr
任意の属性。オブジェクトリテラル ({ attributeName: value }) で指定する。
css
任意の CSS プロパティ。img@style 属性値となる。オブジェクトリテラル ({ propertyName: value }) で指定する。
プロパティ名は DOM 形式 (e.g. borderLeft) または CSS 形式 (e.g. border-left) で指定する。ハイフンを含む名前は { 'property-name': value } のように引用符で括る。
imgElem
img 要素。Image オブジェクトで指定する。生成済みの img 要素を指定する場合に使用する。(省略時は img 要素が生成される)
output
img 要素を出力する場合は true
戻り値
animator
AnimateImage.Animator オブジェクト。戻り値からアニメーションの停止/再開を行うことができる。

AnimateImage.options オブジェクト

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

※ アニメーション開始前に参照されるため、値を変更する場合はアニメーション開始前に設定しておく。

プロパティ
delay
アニメーション間隔。ミリ秒 (ms) 単位で指定する。デフォルト値は 500ms。
repeat
アニメーションの繰り返し回数。無制限に繰り返す場合は -1 を指定する。0 の場合はアニメーションされない (最初の画像が表示される)。デフォルト値は -1。
rewind
アニメーション終了時に最初の画像に巻き戻すかどうか。デフォルト値は false。
pauseAtFirst
アニメーション中に最初の画像で一時停止するかどうか。デフォルト値は false。
pauseAtLast
アニメーション中に最後の画像で一時停止するかどうか。デフォルト値は false。
showBlank
アニメーションサイクル間に空白画像を表示するかどうか。デフォルト値は false。
空白画像は data:url を使用した透明な GIF 画像で、最初の画像と同じサイズで表示される。
cycleDelay
アニメーションサイクル間の間隔。ミリ秒 (ms) 単位で指定する。デフォルト値は 0。
className
img 要素の class 名。空の場合は class 属性が付加されない。デフォルト値は “animation”。
blankClassName
空白画像に付加される img 要素の class 名。空の場合は class 属性が付加されない。デフォルト値は “blank”。
output
img 要素を出力するかどうか。デフォルト値は true。

記述例

記述例1:連番のファイル名
img 要素 (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
記述例2:任意のファイル名
img 要素 (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

※ 書式文字列を含んだファイル名の代わりにファイル名の配列 (Array) を指定することもできる。

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']);
記述例3:ディレクトリ名を書式文字列で指定
img 要素 (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 属性には書式文字列を含んだファイル名、または書式文字列でディレクトリ名を指定する場合はそのディレクトリまでの相対パスを指定する。

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');
記述例4:title/alt 属性
img 要素 (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=""

※ 画像の代替テキストが不要な場合は img 要素に空文字列の alt 属性 (img@alt=””) を付加する。

記述例5:id/class 属性
img 要素 (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

※ CSS ファイルや style 要素内に class/id セレクタを使用したスタイルルールを定義する。

img.animation { background: white; }
img#foo { background: silver; }
img.bar { background: gray; }
img.baz { background: black; }
記述例6:delay/cycleDelay オプション
img 要素 (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 });
記述例7:repeat/rewind オプション
img 要素 (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 });
記述例8:pauseAtFirst/Last オプション
img 要素 (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 });
記述例9:任意の属性
img 要素 (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'
  }
});
記述例10:任意の CSS プロパティ
img 要素 (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'
  }
});
記述例11:共通設定 (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 });
記述例12:アニメーション制御 (開始/停止/再開)
JavaScript
var animator = new AnimateImage.Animator('images/[0-9].png');
animator.animate();

var animator2 = AnimateImage.animate('images/[0-9].png');

※ アニメーションの挙動をボタンで制御する場合は次のような input 要素を記述する。

<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)" />
記述例13:生成済み img 要素の指定
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 });
記述例14:img 要素の取得/編集/出力
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);

デモ

透過 PNG 画像

透過 PNG 画像

アニメーション画像に 透過 PNG 画像を指定するとアニメーション GIF のように背景を透過することができる。デモではマウスホバーによって背景色が変更される。

簡易スライドショー

簡易スライドショー

アニメーション画像に 256 色 (GIF の最大色数) を超える高画質の写真やイラストを指定することができる。デモでは色数 24 bit の JPEG 画像を指定している。

ファイル名が連番でない任意の画像

ファイル名が連番でない任意の画像

アニメーション画像にファイル名が連番でない任意の画像を指定することができる。デモでは blank.png, website.png, blog.png, download.png ファイルを指定している。

アニメーションの再生/停止/開再

アニメーションの再生/停止/開再



アニメーションの再生/停止/再開を制御することができる。デモでは Start, Stop, Replay ボタンを押すとアニメーションが再生 (再開)、停止 (一時停止)、リプレイされる。

FAQ

自動適用 img 要素と JavaScript コードの使い分け

自動適用 img 要素
  • script 要素や JavaScript が記述不要となるため、記述性や可読性が向上
  • JavaScript コード不要により、JavaScript の記述が制限されている環境でも利用可
  • JavaScript 無効時やエラー時であっても必ず img 要素が描画される (noscript 要素に相当)
JavaScript コード
  • アニメーションの挙動 (開始/停止/再開) を制御できる
  • JavaScript 内で img 要素を扱える (取得/生成/編集/挿入など)
  • 共通の設定を変更できる

※ 参考までに、以下の 2 つのコードはほぼ等価といえる。

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

AnimateImage.Animator クラスと AnimateImage.animate() 関数の使い分け

AnimateImage.Animator クラス
アニメーションの開始タイミングを制御したい場合に利用する
  • オブジェクトを生成すると最初の画像が表示される
  • animate() メソッドを呼ぶまでアニメーションは開始しない
AnimateImage.animate() 関数
自動的にアニメーションが開始しても構わない場合に利用する
  • 関数を呼び出すと最初の画像が表示されアニメーションが開始する

Web 標準に準拠した (妥当な) HTML を記述する

ポイントは以下の 3 つ。

  • img 要素の alt 属性は必須
  • (body 要素内の) script 要素はインライン要素で noscript 要素はブロック要素
  • noscript 要素内にはブロック要素しか記述できない

従って Web 標準に準拠した HTML 記述は次のようになる。

<div>
    <script type="text/javascript">
        AnimateImage.animate('image[0-9].png', 'text');
    </script>
</div>
<noscript>
    <div><img src="image0.png" alt="text" /></div>
</noscript>

※ 詳細は画像表示系の 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 で対応)
  • 最初/最後の画像で一時停止してからアニメーションする (v0.8.3 で対応)
  • アニメーションサイクル間に空白画像を表示する (v0.8.3 で対応)
  • アニメーションサイクル間の遅延時間 (v0.8.3 で対応)

※ なかなかスマートな実装が思いつかないので対応保留。とりあえずアニメーションする画像を調整して運用する。(最初/最後の画像を重複させる、空白画像を最後にするなど)


“keyboard keys” by chromatix is licensed under Creative Commons License.

19 Responsesso far.

  1. 見習い より:

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

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

    function test(){
    animateImage(‘sample[01-10].png’, ‘sampleanime’, null, 100, 1); setTimeout(“test()”,3000);
    }

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

    • attosoft より:

      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. 見習い より:

    attosoftさま

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

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

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

    • attosoft より:

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

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

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

  3. 見習い より:

    >原因はなんでしょう…。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 より:

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

      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 より:

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

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

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

    ———————————-

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

    ———————————-

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

    • attosoft より:

      コメントありがとうございます。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 より:

      attosoft 様

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

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

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

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

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

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

      html
      ———————————-

      テスト

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

      ———————————-

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

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

    • babi より:

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

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

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

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

    • babi より:

      attosoft 様

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

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

    • attosoft より:

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

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

  5. SAsa より:

    attosoft 様

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

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

    • attosoft より:

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

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

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

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

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

  6. Jeeseong Chung より:

    Great script… I’m using this script for my presentation…

    • attosoft より:

      Thanks for using AnimateImage script, and sorry for late reply.
      Your comment will help encourage me to support software development.

  7. taro より:

    attosoft様

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

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

    • attosoft より:

      taro さん

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

コメントを残す

メールアドレスが公開されることはありません。