アニメーションの各フレームをタイル状に配置した画像をHTML上でアニメーションさせたりするためのjQueryプラグイン

さほど大したものではないのだけれど、諸事情により、「大半のGUIブラウザで使えて、再生ボタンを押さなくても再生されるアニメーション機能」が必要になったので、jQueryプラグインとして実装をしまして。

も少し詳しく言うと、ウェブページ内に（imgタグで置く程度の）ちょっとしたサイズのアニメーションを置くには、

- GIFアニメにする
- Flashで動画ファイルを埋め込む
- Videoタグで動画ファイルを埋め込む

等々の方法があるわけだけど、GIFアニメは色が荒れるし、Flashではちょっと制作、配置コストが高いし、Videoタグでは古いブラウザでは表現されないし自動再生されないし、なによりこれらは、アニメーションの指定フレームを行ったり来たりというちょっと特殊な動作ができない。

パーツとして配置されるようなアニメーションの場合、無限ループはもちろん、再生ボタンを押す必要がなかったり、特定のフレームに向かって再生・逆再生してほしかったり、その特定のフレームまでジャンプして停止してほしかったりと、フレキシブルな機能が求められるんですよ。えぇきっと。

そんなわけで、今回、それを実現する方法として、「アニメーションの各フレームを、タイル状に配置した画像に対し、上記機能を実現するためのjQueryプラグイン」を作りました。サンプルは下記。

http://kkotaro0111.github.io/tileanimation/

各フレームをタイル状に配置した画像（ http://kkotaro0111.github.io/tileanimation/images/output.png ) を、width, heightを固定したdiv要素の背景画像として表示し、background-position を変更することで、アニメーションさせます。

リファレンスはそのうちちゃんと書くとして、ひとまず必要なのは、「初期化」。コードとしては下記のようになる。

var optionObject = {
  width: 0,         //１コマあたりの横幅 required
  height: 0,        //１コマあたりの縦幅 required
  numcol: 0,        //横方向のコマ数 required
  numrow: 0,        //縦方向のコマ数 required
  offset: void 0,   //１コマ目にあたるフレーム番号（0-based) optional
  maxframe: 0,      //最大コマ数。numcol x numrow 以下 required
  frame: 0,         //現在のフレーム番号 optional
  reverse: false,   //再生方向を逆にするか否か。 optional
                    //falseなら、横書き日本語文と同じ順序で再生される
  type: "margin"    //画像位置の指定方法。 optional
                    //background-positionを使う時は"background"にする
};

$("#targetDivElement").tileanimation("init", optionObject);

諸般の都合で、typeのデフォルト値が"margin"になっているが、これはレガシーIE対応のため。レガシーIEでは、このdivタグ自体のサイズをscaleなどで変えると、divの大きさに合わせて背景画像まで拡縮してくれない。そこで、overflow: hiddenをつけたdivの子にsprite画像を入れて、ネガティブマージンを利用した位置移動によるアニメーションを実現する必要がある。その名残だ（←直せよ

<div id="parent">
  <div id="child" style="background: url('img.png') no-repeat 0 0 ></div>
</div>
---
$("#child").tileanimation("init", {... type: "margin"});

実際に使う時は、

// 10フレーム目を表示
$("#targetDivElement").tileanimation(10);

//10フレーム目までアニメーション（再生方向は、ループ前提で到達までが近い方向）
$("#targetDivElement").tileanimation("to", { to: 10 });

// 10フレーム目まで逆再生でアニメーション
$("#targetDivElement").tileanimation("to", { to: 10, direction: -1});

//<maxframe>に"init"で与えたオプションのmaxframeと同じ値を渡すことで、
//無限ループする
$("#targetDivElement").tileanimation("to",{to: <maxframe>});

//fpsを1/2の状態でループアニメーション（frametimeは要整数値）
$("#targetDivElement").tileanimation("to", {to: <maxframe>, frametime: 2});

//fpsを1/3の状態で、逆方向にループ
$("#targetDivElement").tileanimation("to", {to: <maxframe>, direction: -1, frametime: 3});

//アニメーション停止
$("#targetDivElement").tileanimation("stop");

というふうな呼び出しをすればよい。

デメリットとしては、「アニメーションの各フレームをタイル状に配置した画像」が重いことと、それをアニメーションさせる際にrequestAnimationFrameを使っているのだが、都度、DOMのstyle要素を書き換えることになるので、処理自体も高負荷という点。あー、IE8以下滅びないかなー。Canvas使えたらも少しまともな気がするんだけどなー。

他にもいい方法があったら教えて欲しい。

kkotaro0111/spriteanimation
https://github.com/kkotaro0111/tileanimation

※投げ銭式のため、以下記事なし。