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

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

デモはここから

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

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

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

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

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

このpluginについて

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

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

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

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

使い方

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

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アニメーションでは、途中のフレームで静止できません。

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