アニメーションの各フレームをタイル状に配置した画像を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, //1コマあたりの横幅 required
height: 0, //1コマあたりの縦幅 required
numcol: 0, //横方向のコマ数 required
numrow: 0, //縦方向のコマ数 required
offset: void 0, //1コマ目にあたるフレーム番号(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
※投げ銭式のため、以下記事なし。
ここから先は
¥ 100
この記事が気に入ったらサポートをしてみませんか?