• AnimateImage 旧バージョン (v0.5 – v0.6.5.1)

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

    ※ AnimateImage の旧バージョン (version 0.6.x 系) に関する情報を参考までに残しておく。新バージョン (version 0.7 以降) との互換性はなし。

    目次

    概要

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

    ※ 最新の情報については JavaScript: 複数の画像をアニメーション GIF のように連続表示する AnimateImage を参照。

    使い方

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

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

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

    <script type="text/javascript">
        animateImage(null, 'Image{0}.png', 10);
    </script>
    

    animateImage() 関数に渡している引数の意味は次の通り。

    null
    アニメーション画像の ID 文字列。null を指定すると自動生成される。
    ‘Image{0}.png’
    アニメーション画像を表す文字列。ファイル名の連番にあたる部分を “{0}” で指定する。
    10
    アニメーション画像の枚数。

    ※ 画像タイトルやアニメーション間隔、アニメーションの繰り返し回数も指定できる。また連番でない任意の画像を指定することもできる。詳細は記述例API 仕様を参照。

    ダウンロード

    旧バージョン (version 0.6.x 系) のソースコード。新バージョン (version 0.7 以降) との互換性はなし。

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

    ※ animateImage-0.6.5.1.min.js はパフォーマンスを重視して minify (コメントや空白が除去) されている。読みやすいようにフォーマットされたソースコードは animateImage-0.6.5.1.js を参照。

    記述例

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

    • Foo1.png, Foo2.png, … Foo5.png (5 枚の PNG 画像)
    • Bar1.png, Bar2.png, … Bar10.png (10 枚の PNG 画像)
    • Baz1.jpg, Baz2.jpg, … Baz15.jpg (15 枚の JPEG 画像)
    記述例1

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

    animateImage(null, 'Foo{0}.png', 5, 'Image Foo');
    animateImage(null, 'Bar{0}.png', 10, 'Image Bar');
    

    ※ アニメーション間隔はデフォルトの 0.5 秒、アニメーションの繰り返し回数はデフォルトの無制限となる。

    記述例2

    アニメーション間隔 (1 秒)、アニメーションの繰り返し回数 (5 回) を指定してアニメーション。画像タイトルは指定しない。

    animateImage(null, 'Foo{0}.png', 5, null, 1000, 5);
    
    記述例3

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

    animateImage(null, 'Foo{0}.png', 5, 'Image Foo', 1000, 5);
    animateImage(null, 'Bar{0}.png', 10, 'Image Bar', 500, 10, true);
    

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

    記述例4

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

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

    画像ファイルの連番の開始番号を変更する。Image Foo は 2 から、その他の画像は 1 から開始する。

    Animations.startIndex = 2;
    animateImage(null, 'Foo{0}.png', 4, 'Image Foo');
    Animations.startIndex = 1; // 元に戻す
    
    animateImage(null, 'Bar{0}.png', 10, 'Image Bar');
    animateImage(null, 'Baz{0}.jpg', 15, 'Image Baz');
    
    記述例6

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

    var files = ['Foo1.png', 'Bar1.png', 'Baz1.jpg'];
    animateImage(null, files, files.length);
    
    animateImage(null, ['Foo5.png', 'Bar10.png', 'Baz15.jpg'], 3);
    
    記述例7

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

    animateImage(null, 'Foo{0}.png', 5, 'Image Foo');
    animateImage('id-bar', 'Bar{0}.png', 10, 'Image Bar');
    

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

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

    API 仕様

    animateImage() 関数

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

    構文
    function animateImage(id, files, count, title, delay, repeat, rewind)
    
    引数
    id (必須)
    img 要素の ID 文字列。アニメーションごとにユニークな値を指定する。null の場合は自動生成される。
    files (必須)
    画像ファイル。ファイル名の連番部分は {0} で表す。任意の画像を指定する場合は配列にする。
    count (必須)
    画像ファイルの枚数
    title
    画像タイトル。img@alt, img@title 属性値となる。(null および省略時は属性が付加されない)
    delay
    アニメーション間隔 (null および省略時は Animations.delay)
    repeat
    アニメーションの繰り返し回数 (null および省略時は Animations.repeat)
    rewind
    アニメーション終了時に最初の画像に巻き戻すかどうか。真偽値 (true/false) で指定する。(省略時は Animations.rewind)

    ※ 画像ファイルの連番は (デフォルトでは) 1 から始まり、1, 2, 3 … 10, 11 … と続く。

    Animations オブジェクト

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

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

    プロパティ
    Animations.delay
    アニメーション間隔。ミリ秒 (ms) 単位で指定する。デフォルト値は 500ms。
    Animations.repeat
    アニメーションの繰り返し回数。無制限に繰り返す場合は -1 を指定する。0 の場合はアニメーションされない (最初の画像が表示される)。デフォルト値は -1。
    Animations.rewind
    アニメーション終了時に最初の画像に巻き戻すかどうか。デフォルト値は false。
    Animations.className
    img 要素の class 名 (img@class 属性値)。デフォルト値は “animation”。undefined の場合は class 属性が付加されない。
    Animations.startIndex
    画像ファイルの連番の開始番号。デフォルト値は 1。

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

    Post Tagged with ,

12 Responsesso far.

  1. cyon より:

    はじめまして、PNGのアニメーションができて驚きました!
    animateImage.js でアニメーションがループしないバージョンを作ってください。。。お願いします!!

  2. cyon より:

    javascriptをいじったら何とかできました!
    素晴らしいものをありがとうございます><

  3. attosoft より:

    コメントありがとうございます。

    せっかくコメントをいただいたので AnimateImage スクリプトの改良に取り組み、先ほど AnimateImage version 0.6 を公開しました。

    アニメーションをループさせない件については既に自己解決されたようですが、ほかにも改良点がいくつかありますので良かったらお使いください。

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

    • アニメーションごとに異なるアニメーション間隔を指定できなかった制限を解消
    • アニメーションの繰り返し回数の指定に対応 (異なる繰り返し回数の指定にも対応)
    • 複数のアニメーションに共通するアニメーション設定の導入
      • 共通のアニメーション間隔
      • 共通のアニメーションの繰り返し回数
      • アニメーション終了時に最初の画像に巻き戻すかどうか

    ※ (ループしない) 1 回のアニメーションに加えて、任意の回数のアニメーションもできます。またアニメーション設定を利用すると、アニメーション間隔やアニメーションの繰り返し回数をまとめて指定できます。たとえば “Animations.repeat = 1” と記述しておけば animateImage 関数で繰り返し回数の指定が省略できます。それからアニメーション終了時に最後の画像のままにしておくか、最初の画像に巻き戻すかを指定できます。

  4. cyon より:

    こういうスクリプトが欲しいと思っていました!
    ホントにありがとうございました!

    変更点にある機能は、欲しかったものばかりなのでとても嬉しいです><

  5. attosoft より:

    いえ、こちらこそご利用いただけてうれしいです。モチベーションにもつながりますし。

    AnimateImage version 0.6.1 にマイナーバージョンアップしました。アニメーション画像にスタイル (CSS) を適用できるよう、デフォルトで img@class=”animation” を設定します。

  6. cyon より:

    マイナーバージョンアップもすごく便利です!
    CSSが適用できるようになって、かゆいところにも
    手が届きます…!><

  7. cyon より:

    バージョンアップありがとうございます!
    重宝しております!><

  8. attosoft より:

    なんか頻繁なバージョンアップになってしまってちょっと申し訳ないです。

    修正をある程度まとめてからリリースしようと思ってるのですが、リリースしてから追加したい機能やスマートな実装方法を思いつくもので…。

    けれどそろそろネタ切れですし、使用に耐える程度の機能は実装し終えたという認識ですので、新しいアイディアが浮かばない限りしばらくバージョンアップはないでしょう (前言撤回:version 0.6.4 にバージョンアップしました)。

  9. cyon より:

    お世話になります><

    複数のアニメーションが存在しているとき、
    その中のうち、ひとつのアニメーションに
    Animations.rewind = true
    を適用させて、アニメーション終了時に最初の画像に
    巻き戻そうと思ったのですが、
    すべてのアニメーションに巻き戻しが適用されてしまいます。
    ※デフォルトの設定は rewind:false でループしない設定にしています。

    ご確認いただけたらと思います><

  10. attosoft より:

    > 複数のアニメーションが存在しているとき、
    > その中のうち、ひとつのアニメーションに
    > Animations.rewind = true
    > を適用させて、アニメーション終了時に最初の画像に
    > 巻き戻そうと思ったのですが、
    > すべてのアニメーションに巻き戻しが適用されてしまいます。
    > ※デフォルトの設定は rewind:false でループしない設定にしています。

    Animations.rewind をアニメーションごとに設定するような状況は考えてませんでしたので、確かに指摘されたような挙動になります。

    アニメーション終了時に最初の画像に巻き戻すかどうか (Animations.rewind) をアニメーションごとに設定できるように修正した version 0.6.4 をリリースしました。animateImage() 関数で引数 rewind を指定することで、アニメーション終了時に最後の画像のままにしておくか、あるいは最初の画像に巻き戻すかをアニメーションごとに設定することができます。

    記述例3 にも書きましたが、アニメーション終了時に最初の画像に巻き戻すかどうかをアニメーションごとに設定する場合は次のような記述になります。

    animateImage('id-foo', 'Foo{0}.png', 5, 'Image Foo', 500, 1);
    animateImage('id-bar', 'Bar{0}.png', 5, 'Image Bar', 500, 1, true);
    

    ※ 参考までに、アニメーション終了時に最初の画像に巻き戻す (rewind = true) をデフォルトの動作にしたい場合は次のような記述になります。

    Animations.rewind = true;
    animateImage('id-foo', 'Foo{0}.png', 5, 'Image Foo', 500, 1, false);
    animateImage('id-bar', 'Bar{0}.png', 5, 'Image Bar', 500, 1);
    
  11. attosoft より:

    > ※ 参考までに、アニメーション終了時に最初の画像に巻き戻す (rewind = true) をデフォルトの動作にしたい場合は次のような記述になります。

    実際にはバグのため正しく動いてませんでした。

    version 0.6.4.1
    animateImage() 関数の引数 rewind に false を指定するとデフォルト値 (Animations.rewind) で上書きされるバグを修正
  12. cyon より:

    対応ありがとうございます!
    思ったような動きが実現できたので、嬉しいです><

コメントを残す

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