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); })();

AnimateImage 0.9 公開

AnimateImage version 0.9 を公開しました。

最初の画像で一時停止
最後の画像で一時停止
空白の画像を表示
アニメーションサイクル間の遅延

※ 1 つ目は最初の画像 (0) で一時停止、2 つ目は最後の画像 (9) で一時停止、3 つ目は最後に空白の画像を表示、4 つ目はアニメーションサイクルごとに 2 秒遅延される。

概要

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

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

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

関数の仕様変更

機能拡張に伴い関数の引数が増える一方なのでまとめてオブジェクトリテラル ({ propertyName: value }) で受け取る。以前のバージョンの書き方も一応有効となっている。

これまでは後方の引数を指定する場合は、不要であっても途中の引数を全て指定する必要があったが、

animateImage('image[0-9].png', null, null, null, 1, true)

これからは変更したいオプションのみを指定すれば良い。

animateImage('image[0-9].png', { repeat: 1, rewind: true })

オプション追加

以下のオプションを追加。

options.alt
代替テキスト。alt 属性と title 属性を別々に指定したり、alt 属性のみを指定したりできる。
options.attr
img 要素に付加する任意の属性。オブジェクトリテラル ({ attrName: value }) で指定する。
options.css
img 要素に適用する任意の CSS プロパティ。オブジェクトリテラル ({ propName: value }) で指定する。DOM/CSS 形式のプロパティ名 (ex. borderLeft/border-left) をサポート。

また以下の共通オプションが options にも追加され、アニメーションごとに異なる設定を指定できるようになった。

  • Animations.pauseAtFirst
  • Animations.pauseAtLast
  • Animations.showBlank
  • Animations.cycleDelay
  • Animations.className

ダウンロード

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

過去のリリース情報

Post Tagged with

コメントを残す

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