スプライトシートでアニメーションさせるjQueryのpluginを作りました。

機能としては非常に簡単で、スプライトシートでアニメーションをさせるjQueryのpluginです。
連番に並べた1枚の画像を、cssの背景に置いて順番に切り替えるものです。

デモはここから

※素材は｢NHKクリエイティブ・ライブラリー｣からどーもくんをお借りしました。
NHKクリエイティブ・ライブラリー

実は色々あります、スプライトシートアニメーション！

スプライトシートでアニメーションさせるものは、色々な方が作成しております。
この辺りが有名でしょうか。
（皆さん素晴らしい高機能でいらっしゃる！）

http://spritely.net/
http://darsa.in/motio/
http://smartjs.net/ref_animation.html

その他、css3のアニメーション機能でもできますね。

.classname{
    animation:animeName 1 1000ms forwards steps(5,end);
}
@keyframes animeName{
    0%   {background-position:0 0;} 
    100% {background-position:0 300px;}
}

このpluginについて

背景を動かす、というやり方さえ分かれば、簡単に作ることができます。

このpluginの特徴は、css3のkeyframesがブラウザで使用できる場合、そちらを利用することです。

だったら素のcss3でもいいのでは？と思う方がいるかもしれません。
cssに直接記述する場合、冗長になりますし、一部ベンダープレフィックスが必要になります。
それらが必要ないだけでも、cssがかなり綺麗になります。いかがでしょうか。
また、jQueryのqueueを使用すれば、複雑な動きができると思います。

css3のkeyframesが使えない場合は、普通にcssで背景を1つずつずらします。
これならIE9以下でも動きます。

使い方

ヘッダー部分にjQueryとpluginを読み込んだら下記のように設定します。

$(document).ready(function() {
    $('.anime1').animeSwitch({
        second: 1000 / 8, //切り替え秒
        width: 310,       //幅
        height: 360,      //高さ
        frame: 4,         //コマ数(1-)
        xPos: 1,          //X座標(0-)
        yPos: 0,          //Y座標(0-)
        course: 'y',      //方向
        loop: true,       //ループ
        onComplete: function() {} //終了したら
    });
});
second ミリ秒で設定します
width オブジェクトの横幅
height オブジェクトの縦幅
frame 最大コマ数
xPos 何行目のものを動かすか
yPos 何列目のものを動かすか
course x or y 行で動かすか、列で動かすか
loop true or false ループさせるか
onComplete 完了したら実行させる関数を設定

｢course｣を選んで、｢x｣なら何行目を動かすか（xPosで指定）します。
｢y｣なら何列目を動かすか（xPosで指定）します。
基本的に上から下、左から右にしか動きませんので、注意してください。
（｢onComplete｣を使えば、順番に切り替えることもできます）

$(‘.anime1’).data(‘animeSwitch’).start(); アニメスタート
$(‘.anime1’).data(‘animeSwitch’).paramSet({…}); パラメータ変更
$(‘.anime1’).data(‘animeSwitch’).param({…}); パラメータ変更、その後スタート
$(‘.anime1’).data(‘animeSwitch’).stop(); アニメストップ（css3では途中のフレームで止まることができないので、stopとpauseは全く同じ）
$(‘.anime1’).data(‘animeSwitch’).pause(); アニメポーズ（css3では途中のフレームで止まることができないので、stopとpauseは全く同じ）

ダウンロードはここから

やってみた感想

やってみて思ったのが、css3のアニメーションをJavaScriptで制御することは意外と難しいです。
1つのスプライトシートで、いくつかの動きを切り替える場合、keyframesを変更しても反映されません。
（誰か分かる方がいたら教えてください）
ですので、切り替わるまで、待機させないといけなかったりします。
また、今のところ、css3アニメーションでは、途中のフレームで静止できません。

では、そんな感じで、またねー。