AnimateImage 1.0 公開
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 (初回リリース)