スプライトシートでパラパラマンガ的にアニメーションするためのシンプルなスクリプトです。
flipbook.jsのパスを読み込んでおき、対象となる要素を記述。適当なid等を付与しておきます。
<body> <!-- 対象の要素 --> <div id="screen"></div> <!-- flipbook.js を読み込み --> <script src="flipbook.js"></script> </body>
対象要素に幅、高さ、背景画像(スプライトシート)を設定しておきます。
#screen { width; 300px; height: 200px; background: url(../img/spritesheet.png) 0 0 no-repeat; }
Flipbookのインスタンスを作成、必要に応じてイベントハンドラなどを設定し、play()で再生します。
コンストラクタの第一引数にidを指定する場合、初期化時点でFlipbookが確実にその要素を取得できるよう、そのタイミングを考慮する必要があります。(DOM Ready、etc.)
target:* | 必須。対象要素のid:String、または要素:Element |
---|---|
totalFrames:Integer | 必須。総フレーム数 |
direction:Integer | 任意、デフォルト:0。1フレームごとにスプライトシートをずらしていく方向( 0=左 : 1=上 ) |
jQuery(function($){ // DOM Ready // 新しいFlipbookインスタンスを作成 var flipbook = new Flipbook( 'screen', 20 ); // 任意でイベントハンドラなどを設定 flipbook.onLastFrame = function(){ console.log( '最終フレームに到達しました' ); } // 再生 flipbook.play(); });
現在設定されているアニメーションの早さ(時間隔)をミリ秒で返します
Default | 33 |
---|
flipbook.getSpeed(); // 33
アニメーションの早さ(時間隔)をミリ秒で設定します
milliSecond:Integer | アニメーションの間隔(ミリ秒) |
---|
flipbook.setSpeed( 100 );
現在設定されているアニメーションの早さを秒間フレーム数で返します
Default | 30 |
---|
flipbook.getFPS(); // 30
アニメーションの早さを秒間フレーム数で設定します
fps:Integer | アニメーションの秒間フレーム数 |
---|
flipbook.setSpeed( 100 );
ループ再生するかどうかを示す真偽値を返します
Default | true |
---|
flipbook.getLoop(); // true
ループ再生するかどうかを設定します
value:Boolean | ループ再生するかどうかを示す真偽値 |
---|
flipbook.setLoop( false );
総フレーム数を返します
特に後から設定を変えない限りは初期化時の値を返します
var flipbook = new Flipbook( 'screen', 20 ); flipbook.getTotalFrames(); // 20 flipbook.setTotalFrames( 10 ); flipbook.getTotalFrames(); // 10
総フレーム数を設定します
num:Integer | 総フレーム数 |
---|
flipbook.setTotalFrames( 10 );
現在のフレーム数を返します。最初のフレームを0とします
flipbook.getCurrentFrame(); // 0
現在再生中であるかを真偽値で返します
flipbook.isPlaying(); // false;
逆再生フラグを真偽値で返します
flipbook.isReverse(); // false; flipbook.reverse(); flipbook.isReverse(); // true;
アニメーションを再生します。一時停止中はそのフレームから再生します
flipbook.play();
アニメーションを逆再生します。一時停止中はそのフレームから逆再生します
flipbook.reverse();
アニメーションを最初から再生します。逆再生(isReverse())が真である場合は最終フレームから逆再生します
flipbook.replay();
アニメーションを一時停止します
flipbook.pause();
アニメーションを停止。開始フレーム(0)に戻します
flipbook.stop();
引数に取ったフレーム番号にジャンプします
flipbook.setFrame( 10 ); filpbook.getCurrentFrame(); // 10
引数に取ったピクセル数分、スプライトシートの位置をずらします。横アニメーション(direction:0)の場合は縦方向が、縦アニメーション(direction:1)の場合は横方向がその対象となります。setTotalFrames()などと併用し、ひとつのスプライトシートで複数パターンのアニメーションを実現したい場合に使用します
flipbook.setPos( -500 );
開始フレーム(0)が表示された時に発火します
flipbook.onFirstFrame = function( data ){ data.type; // 'first_frame' data.frameNumber; // 0 }
最終フレームが表示された時に発火します
flipbook.onLastFrame = function( data ){ data.type; // 'last_frame' data.frameNumber; // 19 }
フレームが更新された時に発火します
flipbook.onUpdate = function( data ){ data.type; // 'update' data.frameNumber; // 10 }