• AnimateImage 旧バージョン (v0.7 – v0.8.3)

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

    ※ AnimateImage の旧バージョン (version 0.8.x 系) に関する情報を参考までに残しておく。

    目次

    概要

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

    ※ 最新の情報については AnimateImage 公式サイトを参照。

    使い方

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

    <script type="text/javascript" src="animateImage.js"></script>
    

    Image1.png, Image2.png, … Image10.png をアニメーションさせる場合は次のように記述する。

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

    ※ animateImage() 関数では次のような項目を指定することができる。詳細は記述例API 仕様を参照。

    • ゼロパディングの連番の画像 (01, 02, …, 001, 002, …)
    • 連番でない任意の画像
    • 画像タイトル
    • スタイル (CSS) を適用するための ID 文字列
    • アニメーション間隔
    • アニメーションの繰り返し回数
    • アニメーション終了時に最初の画像に巻き戻すかどうか

    ※ ImageAnimator オブジェクトを使用すると任意のタイミングでアニメーションを再生/停止/再開することができる。また Animations オブジェクトを使用するとすべてのアニメーションに共通する設定を変更することができる。詳細は記述例API 仕様を参照。

    ダウンロード

    旧バージョン (v0.8.3) のソースコード。

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

    記述例

    次のような画像ファイルをアニメーションさせる場合の記述例を紹介する。

    • Foo1.png, Foo2.png, … Foo5.png (5 枚の PNG 画像)
    • Bar0.png, Bar1.png, … Bar9.png (10 枚の PNG 画像)
    • Baz01.jpg, Baz02.jpg, … Baz15.jpg (15 枚の JPEG 画像)
    記述例1

    画像タイトルを指定して複数のアニメーション。

    animateImage('Foo[1-5].png', 'Image Foo');
    animateImage('Bar[0-9].png', 'Image Bar');
    animateImage('Baz[01-15].png', 'Image Baz');
    

    ※ 画像ファイルの連番は Image Foo は 1 から、Image Bar は 0 から、Image Baz は 01 から始まる。またアニメーション間隔はデフォルトの 0.5 秒、アニメーションの繰り返し回数はデフォルトの無制限となる。

    記述例2

    すべて 5 枚の画像でアニメーションする。Image Foo のみ画像タイトルと ID 文字列を指定する。

    animateImage('Foo[1-5].png', 'Image Foo', 'id-foo');
    animateImage('Bar[0-4].png', '', null);
    animateImage('Baz[01-05].png', null, null);
    

    ※ Image Bar では img 要素に空文字列の alt 属性 (img@alt=””) が付加される (画像の代替テキストが不要なことを意味する)。Image Baz では img@alt, img@title は付加されない。また Image Bar, Image Baz では ID 文字列が自動生成される。

    記述例3

    異なるアニメーション間隔と繰り返し回数でアニメーション。Image Bar はアニメーション終了時に最初の画像に巻き戻す。

    animateImage('Foo[1-5].png', 'Image Foo', null, 1000, 5);
    animateImage('Bar[0-9].png', 'Image Bar', null, 500, 10, true);
    

    ※ アニメーション終了時に Image Foo は最後の画像 (Foo5.png) のままとなるが、Image Bar は最初の画像 (Bar0.png) に巻き戻される。

    記述例4

    アニメーション間隔 1 秒で 1 回だけアニメーションする設定。ただし Image Baz のみ 0.5 秒で無制限にアニメーションを繰り返す。

    Animations.delay = 1000;
    Animations.repeat = 1;
    animateImage('Foo[1-5].png', 'Image Foo');
    animateImage('Bar[0-9].png', 'Image Bar');
    animateImage('Baz[01-15].jpg', 'Image Baz', null, 500, -1);
    
    記述例5

    ファイル名が連番でない任意の画像を指定する。

    var files = ['Foo1.png', 'Bar0.png', 'Baz01.jpg'];
    animateImage(files);
    
    animateImage(['Foo5.png', 'Bar9.png', 'Baz15.jpg']);
    
    記述例6

    アニメーションの開始/停止/再開を制御する。アニメーションの繰り返し回数は 1 回で、その他の項目は指定しない。

    var animator = new ImageAnimator('Foo[1-5].png', null, null, null, 1);
    

    ※ アニメーションの制御をボタンで行う場合は次のように記述する。

    <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)" />
    
    記述例7

    アニメーション画像にスタイル (CSS) を適用する。Image Bar は個別にスタイルを適用するため ID 文字列を指定する。

    animateImage('Foo[1-5].png', 'Image Foo');
    animateImage('Bar[0-9].png', 'Image Bar', 'id-bar');
    

    共通のスタイルは class セレクタ (img.animation) を、個別のスタイルは id セレクタ (img#id-bar) を記述する。

    img.animation {
        border: solid medium silver;
    }
    
    img#id-bar {
        border: dashed medium blue;
    }
    

    API 仕様

    animateImage() 関数

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

    構文
    animator = animateImage(files, title, id, delay, repeat, rewind)
    
    引数
    files (必須)
    画像ファイル。ファイル名の連番部分は “[x-y]” 形式で表す (x: 連番の開始番号, y: 連番の終了番号)。ゼロパディングの連番の場合は “[0x-yy]” のように指定する。任意の画像を指定する場合は配列にする。
    title
    画像タイトル。img@alt, img@title 属性値となる。(null および省略時は属性が付加されない)
    id
    img 要素の ID 文字列。アニメーションごとにユニークな値を指定する。(null および省略時は自動生成される)
    delay
    アニメーション間隔 (null および省略時は Animations.delay)
    repeat
    アニメーションの繰り返し回数 (null および省略時は Animations.repeat)
    rewind
    アニメーション終了時に最初の画像に巻き戻すかどうか。真偽値 (true/false) で指定する。(省略時は Animations.rewind)
    戻り値
    animator
    ImageAnimator オブジェクト。戻り値からアニメーションの停止/再開を行うことができる。

    Animations オブジェクト

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

    ※ animateImage() 関数呼び出し前に設定されている値が反映される。値を変更する場合はアニメーション開始前に設定しておく (開始後に値を変更しても参照されない)。

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

    ImageAnimator オブジェクト

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

    コンストラクタ関数
    ImageAnimator(files, title, id, delay, repeat, rewind)
    

    ※ 引数の仕様については animateImage() 関数を参照。

    animate(replay) メソッド

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

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

    stopAnimate() メソッド

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


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

    Post Tagged with

コメントを残す

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