TweenJSでアニメーションしてみる2（EaselJSも使ってみる）

2013年10月02日

こんにちは。受託開発担当のMasaです。

前回 TweenJSの記事の続きで、今回はテキストのアニメーションを紹介します。

前回の予告では TweenJS を拡張した JSTween プロジェクトの TextTween を紹介すると書きましたが、コンストラクタを呼び出すだけで終わってしまうため、EaselJS + TweenJS でのテキストアニメーションを紹介することにしました。

有名なフレームワークなので説明は省略します。尚、現在の最新バージョンは v7.0 なのでこれを使用します。

とりあえず何かテキストを表示します。

canvas は必ず必要です。Stage は最上位のコンテナで、update することで子オブジェクトを描画します。

<!DOCTYPE html>
<head>
<script src='easeljs-0.7.0.min.js'></script>
<script>
window.onload = function() {
  // canvas を指定してステージを作成
  var stage = new createjs.Stage("c");

  // 第1引数：描画する文字
  // 第2引数：フォントスタイル
  // 第3引数：フォントカラー
  var text = new createjs.Text("CoReports","Bold 50px Tahoma", "#666666");

  stage.addChild(text);
  stage.update();
};
</script>
</head>
<body>
  <canvas id="c">
  未対応
  </canvas>
</body>

１文字ずつアニメーションさせたいので、それぞれ別のテキストオブジェクトにします。

複数のテキストオブジェクトをまとめて扱いたいので Container を使用します。

<script>
window.onload = function() {
  // canvas を指定してステージを作成
  var stage = new createjs.Stage("c");
  // オブジェクトをまとめて扱うために Container を使用
  var container = new createjs.Container();
  stage.addChild(container);

  // 1文字ずつオブジェクト化
  var w = 'CoReports';
  for (var i = 0, width = 0; i < 9; i++) {
    var s = w.substring(i, i + 1);
    var text = new createjs.Text(s,"Bold 50px Tahoma", "#666666");

    // 直前の文字の横に描画
    text.x = width;
    container.addChild(text);
    width += text.getMeasuredWidth();
  }

  stage.update();
};
</script>

アニメーションなので、指定した間隔で再描画するために Ticker を使用します。

Ticker.addEventListener に Stage を渡すと、Tick イベントで Stage.update が実行されます。
今回は Stage.update をしたいだけなので今回はこれで十分です。

  // 1秒間に50回描画する（tick イベントが起きる）
  createjs.Ticker.setFPS(50);
  // Stage を渡すと Stage.update が呼ばれる
  createjs.Ticker.addEventListener("tick", stage);
  
  // 不要
  //stage.update();

Text には scaleX, scaleY が指定できるので、これをトゥイーンさせます。

tweenjs-0.5.0.min.js を使用します。

<script src='tweenjs-0.5.0.min.js'></script>

テキストの初期 scale を 0 に設定し、1 秒後に 1 になるように実装します。

  // 1文字ずつオブジェクト化
  var w = 'CoReports';
  for (var i = 0, width = 0; i < 9; i++) {
    var s = w.substring(i, i + 1);
    var text = new createjs.Text(s,"Bold 50px Tahoma", "#666666");

    // サイズ0
    text.scaleX = 0;
    text.scaleY = 0;

    // 直前の文字の横に描画
    text.x = width;
    container.addChild(text);
    width += text.getMeasuredWidth();
  }

  for (var i = 0; i < 9; i++) {
    // テキストの scaleX と scaleY を 0 → 1 へ
    new createjs.Tween(container.getChildAt(i))
      .to({scaleX:1,scaleY:1}, 1000, createjs.Ease.circOut);
  }

テキストがだんだん前面に出てくるような感じになりました。

以上で終わりです。

コード全体はコチラ。

<!DOCTYPE html>
<head>
<style>
  body {
    margin: 0px;
    padding: 0px;
  }
  #c {
    background-color: Aliceblue;
    width: 600px;
    height: 200px;
  }
</style>
<script src='easeljs-0.7.0.min.js'></script>
<script src='tweenjs-0.5.0.min.js'></script>
<script>
window.onload = function() {
  // canvas を指定してステージを作成
  var stage = new createjs.Stage("c");
  // 1文字1オブジェクトにしてまとめて扱うために Container を使用
  var container = new createjs.Container();
  stage.addChild(container);

  // 1秒間に50回描画する（tick イベントが起きる）
  createjs.Ticker.setFPS(50);
  // Stage を渡すと Stage.update が呼ばれる
  createjs.Ticker.addEventListener("tick", stage);

  // 1文字ずつオブジェクト化
  var w = 'CoReports';
  for (var i = 0, width = 0; i < 9; i++) {
    var s = w.substring(i, i + 1);
    var text = new createjs.Text(s,"Bold 50px Tahoma", "#666666");

    // サイズ0
    text.scaleX = 0;
    text.scaleY = 0;

    // 直前の文字の横に描画
    text.x = width;
    container.addChild(text);
    width += text.getMeasuredWidth();
  }

  for (var i = 0; i < 9; i++) {
    // テキストの scaleX と scaleY を 0 → 1 へ
    new createjs.Tween(container.getChildAt(i))
      .to({scaleX:1,scaleY:1}, 1000, createjs.Ease.circOut);
  }
};
</script>
</head>
<body>
  <canvas id="c">
  未対応
  </canvas>
</body>
</html>

執筆担当：Masa