• AnimateImage 1.0 公開

    AnimateImage version 1.0 を公開しました。

    img 要素への自動適用

    ※ 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 円)
    • コメント付きの非圧縮コード
    • 有償サポート (技術的な質問やカスタマイズなど)

    過去のリリース情報

    Post Tagged with

コメントを残す

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