トゥイーンで簡単canvasアニメーション!TweenJSの使い方

TweenJSは、Grant Skinner氏が開発しているCreateJSに含まれるJavaScriptトゥイーンライブラリです。CreateJSのサイトからダウンロードできます。本来、JavaScriptでのアニメーションには比較的面倒な記述が必要になりますが、TweenJSを使うと驚くほど簡単な記述でオブジェクトをアニメーションさせることができます。

TweenJSの読み込み

TweenJSを使うには、まずHTMLのhead領域で下記のように記述し、EaselJSとTweenJSのjsファイルを読み込みます。必ず、EaselJSを先に読み込む必要があります。なお、TweenJSは残念ながらIE6, 7, 8には対応していません。

HTML

<script type="text/javascript" src="js/easeljs-0.4.2.min.js"></script>
<script type="text/javascript" src="js/tweenjs-0.2.0.min.js"></script>

Tweenオブジェクトを取得する Tween.get()

それでは、TweenJSの使い方をステップ毎に見ていきます。まず、Tweenクラスの静的メソッドget()でTweenオブジェクトを取得します。第1引数でトゥイーンの対象となるオブジェクトの参照を渡し、第2引数でトゥイーンのオプションをオブジェクト形式で指定します。第2引数は、オプションが全てfalseであれば、省略可能です。

下記の例では、Tween.get()で_rectをターゲットに持つTweenオブジェクトを取得しています。

JavaScript

_rect.id = "rect";
var tween = Tween.get(_rect, {loop:true});
console.log(tween._target.id); // 出力:rect

プロパティをトゥイーンさせる to()

オブジェクトのプロパティをトゥイーンさせるには、Tweenオブジェクトのtoメソッドを使用します。第1引数でプロパティと値のペアをオブジェクト形式で指定し、第2引数でトゥイーンのduration(所要時間)をミリ秒で指定します。第3引数では、トゥイーンで使用したいイージングを指定します。TweenJSのEaseクラスには、様々なイージングが用意されています。

下記の例では、canvasの中央に配置した矩形をトゥイーンさせています。rotationを360、durationを2000としているため、2秒間で1回転するアニメーションになります。また、Tween.get()のオプションでloopをtrueにしているため、ループ再生されます。なお、TweenJSでEaselJSのオブジェクトをトゥイーンさせるには、Ticker.addListenerでStageインスタンスをリスナーとして登録しておく必要があります。

JavaScript

function tween() {
  _rect.id = "rect";
  var tween = Tween.get(_rect, {loop:true});
  console.log(tween._target.id); // 出力:rect
  tween.to({rotation:360}, 2000, Ease.linear);
}

処理を遅延させる wait()

wait()を使うと処理を遅延させることができます。遅延時間をミリ秒で指定することにより、その時間が経過するまで次の処理が行われなくなります。下記の例では、wait()を使って各トゥイーンの間で処理を遅延させるようにしています。

また、TweenJSはメソッドチェーンで記述することができます。下記のようにメソッドをつなげて記述することにより、記述量を少なくできる上にソースも見やすくなります。

JavaScript

function tween() {
  Tween.get(_rect, {loop:true})
  .wait(250)
  .to({x:_centerX + 250}, 1000, Ease.quartInOut)
  .wait(250)
  .to({rotation:180}, 500, Ease.sineInOut)
  .wait(250)
  .to({x:_centerX - 250}, 1000, Ease.quartInOut)
  .wait(250)
  .to({rotation:0}, 500, Ease.sineInOut);
}

特定のタイミングでコールバック関数を呼ぶ call()

トゥイーンの開始時や終了時など、特定のタイミングでコールバック関数を実行したい場合は、call()を使用します。第1引数でコールバック関数を指定し、第2引数でコールバック関数に渡す引数を配列で指定します。第3引数では、コールバック関数内のスコープを指定します。第2引数を省略した場合は、Tweenオブジェクトが引数となり、第3引数を省略した場合は、トゥイーンのターゲットとなるオブジェクトがスコープとなります。

下記の例では、トゥイーンの合間にコールバック関数を呼ぶようにしています。JavaScriptコンソールで出力される値を確認できます。

JavaScript

function tween() {
  _rect.id = "rect";
  window.id = "window";
  Tween.get(_rect, {loop:true})
  .wait(250)
  .call(stateReport, ["start"], _rect)
  .to({x:_centerX + 250}, 1000, Ease.quartInOut)
  .wait(250)
  .to({rotation:180}, 500, Ease.sineInOut)
  .call(stateReport, ["half"], window)
  .wait(250)
  .to({x:_centerX - 250}, 1000, Ease.quartInOut)
  .wait(250)
  .to({rotation:0}, 500, Ease.sineInOut)
  .call(onComplete);
}

function stateReport(state) {
  console.log(state, this.id);
}

function onComplete(tween) {
  console.log("complete", this.id, tween);
}

一時停止/再生を制御する pause(), play(), setPaused()

TweenJSには、トゥイーンの一時停止/再生を制御するpause(), play(), setPaused()といったメソッドが用意されています。pause(), play()では、引数で対象となるTweenオブジェクトを指定します。引数を省略した場合は、自身が対象となります。setPaused()では、引数でBool値を渡します。trueを渡すと一時停止し、falseを渡すと再生されます。

下記の例では、2つのトゥイーンを定義していますが、それぞれトゥイーンの終了時に自身を一時停止し、もう一方のトゥイーンの再生をトリガーするようにしています。結果として、2つのトゥイーンが交互に再生を繰り返します。

JavaScript

function tween() {
  _tween1 = Tween.get(_rect1, {loop:true});
  _tween2 = Tween.get(_rect2, {loop:true, paused:true});

  _tween1.to({x:_centerX + 250}, 1000, Ease.cubicInOut)
  .play(_tween2)
  .pause()
  .to({x:_centerX - 250}, 1000, Ease.cubicInOut)
  .call(playAnotherTween);

  _tween2.to({x:_centerX - 250}, 1000, Ease.cubicInOut)
  .play(_tween1)
  .pause()
  .to({x:_centerX + 250}, 1000, Ease.cubicInOut)
  .call(playAnotherTween);
}

function playAnotherTween(tween) {
  switch (tween) {
    case _tween1 :
      _tween1.setPaused(true);
      _tween2.setPaused(false);
      break;
    case _tween2 :
      _tween2.setPaused(true);
      _tween1.setPaused(false);
      break;
  }
}

トゥイーンを上書きする overrideオプション

TweenJSは、トゥイーンを上書きするoverrideにも対応しています。実行中のトゥイーンを上書きするには、Tween.get()の第2引数でoverride:trueを指定します。

下記の例では、canvas上をクリックすると円形のオブジェクトがクリックした座標にトゥイーンで移動します。移動中に再びクリックすると実行中のトゥイーンが上書きされ、新たなトゥイーンが実行されます。

JavaScript

function mouseDownHandler(e) {
  Tween.get(_circle, {override:true})
  .to({x:e.stageX, y:e.stageY}, 2000, Ease.elasticOut);
}

プロパティを即座に変更する set()

プロパティを即座に変更したい場合は、set()を使用します。第1引数でプロパティと値のペアをオブジェクト形式で指定し、第2引数で対象となるオブジェクトを指定します。第2引数を省略した場合は、トゥイーンのtargetが対象となります。

下記の例は、円形のオブジェクトが上から下に落ちていくアニメーションですが、トゥイーンの開始時と終了時にCSSのborder-colorを変更しています。

JavaScript

function tween() {
  var canvasStyle = _canvas.style;
  Tween.get(_circle, {loop:true})
  .wait(1500)
  .set({visible:true})
  .set({borderColor:"#0066cc"}, canvasStyle)
  .to({y:_canvasH + _circleRadius}, 1700, Ease.quartIn)
  .set({visible:false, y:0 - _circleRadius})
  .set({borderColor:"#cccccc"}, canvasStyle);
}