CreateJSにはインタラクティブコンテンツを実装するためのアニメーション機構を備えています。createjs.Tickerクラスがアニメーションに必要な時間経過を管理する機能となります。

tick イベントを使おう

createjs.TickerクラスのaddEventListener()メソッドでtickイベントを監視することによって関数を一定間隔で実行することができます。デフォルトでは1秒間に24回の頻度でtickイベントが発生します。この頻度は1秒間に24フレーム存在するということで24FPS(Frame Per Secound)と一般的に呼ばれます。

createjs.Ticker.addEventListener("tick", handleTick);

function handleTick(){
    console.log( new Date() );
}

ブラウザのコンソールパネルを開くと、時間経過によって現在時刻が次々と表示されているはずです。このtickイベントがアニメーション実装の基本になります。

※createjs.Tickerクラスの詳しい使い方は「公式ドキュメント(英語)」を確認ください。

tick イベントでステージの更新を行う

tick()関数内では、stage.update()メソッドを呼び出し、常にステージの画面更新が呼ばれるようにしておきましょう。stage.update()メソッドを呼び出さなければ、画面が更新されないためです。

createjs.Ticker.addEventListener("tick", handleTick);

function handleTick(){
    // 自分で実装したい処理
    stage.update();
}

例えば、tick()関数の中で動きを付けたい場合は次のように記述します。

サンプル

var stage = new createjs.Stage("myCanvas");

// 円を作成します
var shape = new createjs.Shape();
shape.graphics.beginFill("DarkRed").drawCircle(0, 0, 100); //半径100pxの円を描画
shape.y = 150; // Y座標300の位置に配置
stage.addChild(shape); // 表示リストに追加

// tick イベントを監視します
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(){
  // アニメーション
  shape.x += 2;

  // Stageの描画を更新します
  stage.update();
}

• サンプルを再生する
• サンプルのソースコードを確認する

Ticker のインターバルを変更する

デフォルトでは1秒間に24回発生するtickイベントですが、この頻度はframerateプロパティーを使うことで変更できます。例えば、一秒間に60回発生させたければ次のように指定しましょう。

createjs.Ticker.framerate = 60;

FPSには利用する表示デバイスによって異なります。例えば映画だと24FPS、日本のテレビだと30FPS(正確には29.97i)、ウェブのバナー広告だと18PFSというのが一般的です。

近年のwebコンテンツのアニメーションは60FPSでつくられることが一般的になってきました。滑らかにアニメーションを表示することが、体感的に心地よく、高い品質の体験を提供できるからです。

最も滑らかに表示する方法

もし60FPSを設定するのであれば、もう一つ便利な設定方法があります。実はブラウザは画面更新するのに適したタイミングをもっています。このタイミングを使えば、最もアニメーションを滑らかに表示することができます。これをRequstAnimationFrameと呼ぶのですが、一般的に頭文字で略してRAFと呼ばれます。CreateJSでこのRAFを使うように指定できます。

createjs.Ticker.timingMode = createjs.Ticker.RAF;

このRAFというタイミングは一秒間に60回発生します。つまり、実は60FPSとほぼ同じになります。ただし、setFPS()メソッドで60FPSを指定するよりも確実に画面更新に適したタイミングを得ることができます。このサイトのサンプルでも可能な限り、RAFの指定を行っています。

コラム : createjs.Stage の自動更新

createjs.TickerのaddEventListener()メソッドの二番目の引数にstageオブジェクトを与えると、update()メソッドを呼びださなくてもstageは常に描画更新されるようになります。

createjs.Ticker.addEventListener("tick", stage);

サンプル

var stage = new createjs.Stage("myCanvas");

// 円を作成します
var shape = new createjs.Shape();
shape.graphics.beginFill("DarkRed").drawCircle(0, 0, 100); //半径100pxの円を描画
shape.y = 150; // Y座標300の位置に配置
stage.addChild(shape); // 表示リストに追加

// 自動的に画面更新させます。
createjs.Ticker.addEventListener("tick", stage);

// tick イベントを監視します
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(){
  // アニメーション
  shape.x += 2;
}

• サンプルを再生する
• サンプルのソースコードを確認する