スプライトシートでアニメーションさせる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アニメーションでは、途中のフレームで静止できません。
では、そんな感じで、またねー。
コメント