Flipbook.js  version: 1.1.4


Frame Number : 0

説明

スプライトシートでパラパラマンガ的にアニメーションするためのシンプルなスクリプトです。

使い方

HTML

flipbook.jsのパスを読み込んでおき、対象となる要素を記述。適当なid等を付与しておきます。

<body>

<!-- 対象の要素 -->
<div id="screen"></div>

<!-- flipbook.js を読み込み -->
<script src="flipbook.js"></script>

</body>

CSS

対象要素に幅、高さ、背景画像(スプライトシート)を設定しておきます。

#screen {
width; 300px;
height: 200px;
background: url(../img/spritesheet.png) 0 0 no-repeat;
}

JavaScript

Flipbookのインスタンスを作成、必要に応じてイベントハンドラなどを設定し、play()で再生します。
コンストラクタの第一引数にidを指定する場合、初期化時点でFlipbookが確実にその要素を取得できるよう、そのタイミングを考慮する必要があります。(DOM Ready、etc.)

Flipbook( target:*, totalFrames:Integer, direction:Integer )

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();

});

セッター/ゲッター

getSpeed():Integer

現在設定されているアニメーションの早さ(時間隔)をミリ秒で返します

Default 33
flipbook.getSpeed(); // 33

setSpeed( milliSecond:Integer )

アニメーションの早さ(時間隔)をミリ秒で設定します

milliSecond:Integer アニメーションの間隔(ミリ秒)
flipbook.setSpeed( 100 );

getFPS():Integer

現在設定されているアニメーションの早さを秒間フレーム数で返します

Default 30
flipbook.getFPS(); // 30

setFPS( fps:Integer )

アニメーションの早さを秒間フレーム数で設定します

fps:Integer アニメーションの秒間フレーム数
flipbook.setSpeed( 100 );

getLoop():Boolean

ループ再生するかどうかを示す真偽値を返します

Default true
flipbook.getLoop(); // true

setLoop( value:Boolean )

ループ再生するかどうかを設定します

value:Boolean ループ再生するかどうかを示す真偽値
flipbook.setLoop( false );

getTotalFrames():Integer

総フレーム数を返します
特に後から設定を変えない限りは初期化時の値を返します

var flipbook = new Flipbook( 'screen', 20 );
flipbook.getTotalFrames(); // 20
flipbook.setTotalFrames( 10 );
flipbook.getTotalFrames(); // 10

setTotalFrames( num:Integer )

総フレーム数を設定します

num:Integer 総フレーム数
flipbook.setTotalFrames( 10 );

getCurrentFrame():Integer

現在のフレーム数を返します。最初のフレームを0とします

flipbook.getCurrentFrame(); // 0

isPlaying():Boolean

現在再生中であるかを真偽値で返します

flipbook.isPlaying(); // false;

isReverse():Boolean

逆再生フラグを真偽値で返します

flipbook.isReverse(); // false;
flipbook.reverse();
flipbook.isReverse(); // true;

メソッド

play()

アニメーションを再生します。一時停止中はそのフレームから再生します

flipbook.play();

reverse()

アニメーションを逆再生します。一時停止中はそのフレームから逆再生します

flipbook.reverse();

replay()

アニメーションを最初から再生します。逆再生(isReverse())が真である場合は最終フレームから逆再生します

flipbook.replay();

pause()

アニメーションを一時停止します

flipbook.pause();

stop()

アニメーションを停止。開始フレーム(0)に戻します

flipbook.stop();

setFrame( frameNumber:Integer )

引数に取ったフレーム番号にジャンプします

flipbook.setFrame( 10 );
filpbook.getCurrentFrame(); // 10

setPos( num:Integer )

引数に取ったピクセル数分、スプライトシートの位置をずらします。横アニメーション(direction:0)の場合は縦方向が、縦アニメーション(direction:1)の場合は横方向がその対象となります。setTotalFrames()などと併用し、ひとつのスプライトシートで複数パターンのアニメーションを実現したい場合に使用します

flipbook.setPos( -500 );

イベント

onFirstFrame

開始フレーム(0)が表示された時に発火します

flipbook.onFirstFrame = function( data ){
    data.type; // 'first_frame'
    data.frameNumber; // 0
}

onLastFrame

最終フレームが表示された時に発火します

flipbook.onLastFrame = function( data ){
    data.type; // 'last_frame'
    data.frameNumber; // 19
}

onUpdate

フレームが更新された時に発火します

flipbook.onUpdate = function( data ){
    data.type; // 'update'
    data.frameNumber; // 10
}