AnimateImage 1.0 公開

• By attosoft
• Posted in AnimateImage
• On August 24, 2012
• No Comments.

AnimateImage version 1.0 を公開しました。

※ AnimateImage が自動適用された img 要素。script 要素や JavaScript コードの記述は不要。

概要

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

※ 詳細は AnimateImage 公式サイトを参照。

前バージョン (0.9) からの変更点

img 要素への自動適用

data-files 属性を持つ img 要素に自動的に AnimateImage を適用する。対象となる img 要素の構文は次の通り。

<img src="" data-files=""
  title="" alt="" id="" class="" style=""
  data-delay="" data-repeat="" data-rewind=""
  data-pauseAtFirst="" data-pauseAtLast="" data-showBlank="" data-cycleDelay="" />

img 要素で未定義の属性は独自データ属性 (data-*) で指定する。必須属性は src 属性と deta-files 属性で、data-files 属性にはファイル名のみを指定する。

<img src="images/0.png" data-files="[0-9].png" />

自動適用 (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('images/[0-9].png');</script></p>
<noscript><p><img src="images/0.png" /></p></noscript>

JavaScript 内で img 要素を扱う

以下のプロパティを追加。

options.imgElem

img 要素。Image オブジェクトで指定する。生成済みの img 要素を指定する場合に使用する。(省略時は img 要素が生成される)

options.output (ImageAnimator.output)

img 要素を出力するかどうか

ImageAnimator.imgElem

AnimateImage によって生成された (または options.imgElem で指定した) img 要素

記述例：生成済みの img 要素を指定する

var imgElem = new Image();
imgElem.src = 'images/0.png';
animateImage('images/[0-9].png', { imgElem: imgElem });

記述例：img 要素の取得/編集/出力

var animator = animateImage('images/[0-9].png', { output: false });
animator.imgElem.setAttribute('longdesc', 'long description');
document.getElementById('id').appendChild(animator.imgElem);

自動生成 ID の廃止

アニメーション画像を id 属性ではなくオブジェクトインスタンスで特定。これにより options.id 省略時に強制的に付加していた自動生成 ID が廃止。

画像サイズに関する制限の解消 (空白画像使用時)

空白画像使用時 (options.showBlank = true) にすべてのアニメーション画像が最初の画像と同じサイズで固定される制限を解消。空白画像は最初の画像と同じサイズで表示されるが、その他の画像は自身のサイズで表示される。

ダウンロード

animateImage.min.js

• v1.0, 2012-08-24
• 無料ライセンス (個人かつ非営利、寄付歓迎)
• 最適化された圧縮コード

animateImage.js

• v1.0, 2012-08-24
• 商用ライセンス (500 円)
• コメント付きの非圧縮コード
• 有償サポート (技術的な質問やカスタマイズなど)

過去のリリース情報

• version 0.9
• version 0.8.3
• version 0.8 (0.8.0.3)
• version 0.7
• version 0.6.5 (0.6.5.1)
• version 0.6.4 (0.6.4.1)
• version 0.6.3
• version 0.6.2
• version 0.6.1
• version 0.6
• version 0.5 (初回リリース)