[JS]これは楽しい!FPS値の設定もできるスプライトベースのアニメーションを作成するスクリプト -Motio
Post on:2012年10月30日
FPSとはFrames Per Secondの略で、1秒あたりのフレーム数のことです。
このFPS値やスピードを簡単に調整できるCSSスプライトベースのアニメーションを実装できるjQueryのプラグインを紹介します。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012103003.png)
MotioはCSSスプライトで配置した画像をアニメーションでコントロールできます。デモページには楽しいアニメーションが多数あります。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012103004-01.png)
雲が浮かぶ青空が水平方向にアニメーションします。スピードをマイナスにすると、逆方向にスクロールします。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012103004-02.png)
キャラクターが歩くアニメーションです。FPS値を高くすると早歩きになります。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012103004-03.png)
キャラクターがジャンプするアニメーションです。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012103004-04.png)
炎が上下に移動するアニメーションです。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012103004-05.png)
炎が上がり爆発し、煙になるアニメーションです。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012103004-06.png)
最後はミニゲームです。
キーボードの矢印、スペース、「B」で操作ができます。
sponsors