FN1310002 | EaselJS 0.7.0のTickerクラスでrequestAnimationFrameのAPIを使う - Ticker.timingModeプロパティ

HTML5テクニカルノート

EaselJS 0.7.0のTickerクラスでrequestAnimationFrameのAPIを使う - Ticker.timingModeプロパティ

ID: FN1310002

Technique: HTML5 and JavaScript

Library: EaselJS 0.7.0

TckerクラスはタイミングのAPIに、setTimeoutかrequestAnimationFrameを使うことができます。EaselJS 0.7.0では、タイミングを決めるプロパティとしてTicker.useRAFに替わってTicker.timingModeが備わり、3つのモードから選べるようになりました。

Ticker.timingModeプロパティ

文法

Ticker.timingMode

プロパティ値

[静的] Ticker.tickイベントのタイミングをsetTimeoutとrequestAnimationFrameのどちらのAPIで決めるか、および用いるモードを示す。つぎの3つの定数から選ぶ(表001)。デフォルト値はTicker.TIMEOUT。また、他のモードを選んでも、requestAnimationFrameのAPIがサポートされない場合は、Ticker.TIMEOUTに切替わる。

表001■Tickerクラスに定められたタイミングモードの定数

Tickerクラスの定数 API 説明 定数値

TIMEOUT setTimeout フレームレートに合わせた時間間隔。 "timeout"

RAF requestAnimationFrame フレームレートによらず、requestAnimationFrameの呼出しにもとづく。アニメーションは経過時間を調べて進める。 "raf"

RAF_SYNCHED requestAnimationFrame フレームレートに合わせてTicker.tickイベントを間引く。ただし、間隔はばらつく。また、基本となるリフレッシュレート60Hzの約数にフレームレートを定めないと効果は少ない。 "synched"

説明

Ticker.tickイベントはデフォルトでは、内部的にwindow.setTimeout()メソッドで配信されます。このメソッドはミリ秒の経過にもとづいて、コールバック関数を呼出します。その時間間隔にはばらつきが少ないといえます。

window.requestAnimationFrame()メソッドは、ブラウザが描画できるようになったときにコールバックを呼出します。したがって、アニメーションを描画するのに適しています。一般的な画面のリフレッシュレート60Hzにもとづくと、フレームレートは約60FPSです。ただし、間隔にはばらつきがあります。

もっとも、setTimeout()メソッドの実行間隔はばらつきが少なくても、準備の整わないブラウザにアニメーションの描画を命じるのは無駄が生じたり、CPUの負荷を高めたりします。また、requestAnimationFrame()メソッドは、setTimeout()と異なり、ブラウザのタブが非表示になったり、最小化されたときは呼出し頻度を減らすので、CPUの負荷が下げられます。

Ticker.RAF定数のタイミングモードでアニメーションを進めるときは、Ticker.getTime()メソッドやリスナー関数の受取るEventオブジェクトのtimeあるいはdeltaプロパティで調べた経過時間から動きを計算することになります。なお、requestAnimationFrameのAPIをサポートしていないブラウザも少なくありません。その場合には、Ticker.TIMEOUTモードが用いられます。

例

以下のコード001は、ステージに置いたインスタンス(instance)を、Ticker.tickイベントのたびにリスナー関数(rotate())で回し続けます(図001)。回転角はフレーム当たりの大きさで決めることにします。ただし、Ticker.timingModeプロパティをTicker.RAFモードにしたので、Ticker.tickイベントの間隔はフレームレートにもとづきません(第2行目)。

図001■ステージに置かれたインスタンスが回り続ける

→

そこで、イベントの経過時間に応じて動きを計算します。リスナー関数(rotate())が受取るEventオブジェクトのdeltaプロパティから得た経過ミリ秒数と対応させたいフレームレート(FPS)よりつぎのような調整係数を求め、フレーム当たりの動きの大きさ(5度)に乗じればよいでしょう(第5行目)。

deltaプロパティ値×FPS / 1000

コード001■Ticker.RAFモードでインスタンスを回すアニメーション

var fps = 30;
createjs.Ticker.timingMode = createjs.Ticker.RAF;
createjs.Ticker.on("tick", rotate, instance);
function rotate(eventObject) {
this.rotation += 5 * eventObject.delta * fps / 1000;
stage.update();
}

Ticker.tickイベントは、Ticker.RAFモードでは1秒間で約60回送られます。前掲コード001では、基準フレームレート(fps)がその半分(30)です(第1行目)。すると、イベントの回数が倍に増える替わりに動きは半分に減るため、同じフレームレートをTicker.TIMEOUTまたはRAF_SYNCHEDモードで定めた場合より滑らかなアニメーションとなります。

作成者: 野中文雄
更新日: 2014年3月3日リンクと細かい字句の修正。
作成日: 2013年10月18日