この記事は賞味期限切れです。（更新から1年が経過しています）

CSSスプライトを使用したアニメーションライブラリは既に色々と選択肢がありそうですが、 敢えて今回これを書いてみたのは、ローテクでごくシンプルな物が欲しかったから。 さらに言ってみれば、それらの選択肢をまだ知らなかったから。

MovieCrop.jsについて

• MovieCrop.js via Github

MovieCrop.jsは、CSSのbackground-imageを利用したアニメーションを実装するjQueryプラグインです。 名前から推察されるように、ActionScriptのMovieClipを模して作った…つもりです。

再生/逆再生/停止/巻き戻しが出来ます。

簡単な使い方

まず使用する画像を作成し、ブロック要素の背景にします。

要するにブロック要素のサイズの分だけ背景をズラしていってアニメーションさせる仕組みなので、そのような画像を用意します。

アニメーションの再生方法は、jQueryオブジェクトのmoviePlay()メソッドをコールするだけです。

$(".loading").moviePlay();

逆再生・停止・巻き戻しも同じ要領で。

$(".loading").movieReverse(); // 逆再生
$(".loading").movieStop(); // アニメーションをストップ
$(".loading").movieRewind(); // 最初のコマに巻き戻す

動きをカスタマイズする

動きをカスタマイズするには、moviePlay/movieReverseメソッドにオプションを渡します。

$(".loading").moviePlay({
    fps : 20, // fps（1秒毎のフレーム数）
    frames : 20, // 合計フレーム数
    repeat : true, // リピート再生をするか否か
    direction : "vertical" // アニメーションの方向
});

完了時のコールバックを設定する

アニメーション完了時のコールバックを、moviePlay/movieReverseの第二引数で設定できます。 このコールバックは、アニメーションが「完了」しないと呼ばれません。 つまり、オプションのrepeatをfalseに設定し、最後のコマまで進んだ時初めて呼ばれます。

$(".loading").moviePlay({
    repeat : false
}, function(){
    console.log("アニメーションが完了しました");
});

MovieCropクラス

MovieCropクラスのインスタンスを生成して使う事もできます。 この場合は、第一引数にはjQueryオブジェクトではなく、HTMLElementを渡して下さい。

var ele, mc;
ele = $(".loading")[0];
mc = new MovieCrop( ele, {
    fps : 20,
    frames : 20
});
mc.play();

MovieCropクラスは次のメソッドを持ちます。

• play(callback) : 再生する
• reverse(callback) : 逆再生する
• stop() : 止める
• rewind() : 最初のコマに戻る
• nextFrame() : 次のコマに進む
• prevFrame() : 前のコマに戻す
• setFrame(frame) : 指定されたコマに移動する

デモ

• MovieCrop.js DEMO via jsfiddle

まとめ

冒頭で申し上げた通り、この手のソリューションは他にも優秀な選択肢があります。 特にもうじき発表されるAdobeFlashCS6は、FlashIDEで制作したアニメーションからCSSスプライトシートを書き出す事ができ、そこからそのままアニメーションさせる事が出来るスグレモノです。 スプライトアニメーションは素材の画像を作るのが恐らく一番面倒なので、こうしたアプリケーションは大変助かりますね。

ならばこのライブラリをいつ使うのかと言うと…。シンプルさ故にライブラリ間の競合の不安が少し減る程度の存在意義は…あるかな。