HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う

第1回 読み込んだ画像をトゥイーンアニメーションさせる

この記事を読むのに必要な時間:およそ 7 分

オブジェクトをトゥイーンアニメーションさせる

いよいよTweenJSライブラリを使ったトゥイーンアニメーションだ。左端に置いたインスタンスを,右端にトゥイーンさせる図4)⁠まず,Tweenクラスで,どのようなトゥイーンにするかを決める。Tweenクラスでスクリプトを書くのは,とても直感的だ。Tween.get()メソッドでつくったTweenオブジェクトにドット(.)を加えて,Tweenのメソッドでトゥイーンの設定をいくつでもつなげて呼び出せばよい。Tween.get()メソッドの引数は,トゥイーンするオブジェクトだ。

createjs.Tween.get(オブジェクト).Tweenのメソッド(設定).Tweenのメソッド(設定).…

なお,Tween.get()メソッドは,Tweenオブジェクトをつくることなく,クラスTweenに対して直に呼び出す。このようにクラスを参照して呼び出すメソッドは,⁠静的メソッド」と呼ばれる。

図4 インスタンスを左端から右端にトゥイーンさせる

図4 インスタンスを左端から右端にトゥイーンさせる

今回は,オブジェクトを左から右に動かすだけなので,Tweenのメソッドとしてはひとつだけ,Tween.to()を使う。メソッドの第1引数にオブジェクトのプロパティ値を定めると,オブジェクトのプロパティが今の状態からその値にトゥイーンされる。第2引数はトゥイーンにかけるミリ秒,第3引数にはイージング関数をEaseクラスの静的メソッドで指定する。

createjs.Tween.get(オブジェクト).to(プロパティ指定のオブジェクト, 時間, イージング関数)

Tween.to()メソッドの第1引数には,オブジェクトにプロパティとその値を納めて渡す。一般には,Objectインスタンスの記述({})に,⁠プロパティ:値」の組をカンマ(,)区切りで加えればよい。

{プロパティ:値, プロパティ:値, …, プロパティ:値}

ただ,今回トゥイーンするのはxy座標なので,初めからxy座標がプロパティとして備わっているPointクラスを用いる。

new createjs.Point(x座標, y座標)

Tween.to()メソッドの第3引数のイージング関数は,時間経過に対する値の変わり方を定め,Easeクラスの静的メソッドから選ぶ。バウンドするような変化がおもしろいので,Ease.bounceOut()にしよう。

トゥイーンするプロパティのx座標値(right)は,初めの位置と水平にCanvasの反対端(右端からインスタンス幅の半分内側)⁠y座標はもとのままだ。つまり,水平に左端から右端へアニメーションさせる。加えるスクリプトは,つぎのようになる。なお,Tween.get()メソッドの後ドット(.)を打つ前に改行したのは,Tweenのメソッドをさらにつなげても見やすいようにだ。

var right;
function initialize() {
  canvasObject = document.getElementById("myCanvas");

  right = canvasObject.width;

}
function draw(eventObject) {
  var myImage = eventObject.result;
  var halfWidth = myImage.width / 2;

  right -= halfWidth;

  setTween(myBitmap, new createjs.Point(right, bottom / 2), 3000, createjs.Ease.bounceOut);

}
function setTween(target, myPoint, time, easing) {
  createjs.Tween.get(target)
  .to({x:myPoint.x, y:myPoint.y}, time, easing);
}

もっとも,ここまでのスクリプトを書き加えただけでは,オブジェクトのアニメーション起こらない。実は,初めのほうで述べたつぎの一文が伏線になっている。

EaselJSはアニメーションのため一定の時間間隔で繰返し処理する仕組みをもつものの,おそらく無駄な負荷を省くため,画面はStage.update()メソッドで描き変える。

TweenJSライブラリがいくらオブジェクトのプロパティを変更しても,その結果を画面に描かなければアニメーションとして見ることはできない。足りないのは,Stage.update()メソッドを繰り返し呼び出す処理だ。それを関数として定め,⁠一定の時間間隔で繰返し処理する仕組み」に加える。それが,Tickerクラスの静的メソッドTicker.addListener()である。

createjs.Ticker.addListener(オブジェクト)

呼び出す関数はtick()という決まった名前で定める。今回は,ただStage.update()メソッドを呼び出せばよい。Ticker.addListener()メソッドの引数に渡すのは,tick()関数を定めたオブジェクトだ。HTMLドキュメントのscript要素でJavaScriptコードを書いている場所はWindowオブジェクト(windowプロパティ)になる。

function draw(eventObject) {

  createjs.Ticker.addListener(window);
}

function tick() {
  stage.update();
}

これでステージ左端に置かれたインスタンスが,水平に右端までバウンドするようにアニメーションする。書き上げたscript要素全体は,つぎのコード2のとおりだ。jsdo.itにも同じコードを掲げた。

コード2 TweenJSでオブジェクトの座標をトゥイーンさせる

<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.2.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.3.0.min.js"></script>
<script>
var stage;
var myBitmap;
var bottom;
var right;
function initialize() {
  canvasObject = document.getElementById("myCanvas");
  var file = "images/Pen.png";
  var loader = new createjs.PreloadJS(false);
  right = canvasObject.width;
  bottom = canvasObject.height;
  stage = new createjs.Stage(canvasObject);
  loader.onFileLoad = draw;
  loader.loadFile(file);
}
function draw(eventObject) {
  var myImage = eventObject.result;
  var halfWidth = myImage.width / 2;
  var halfHeight = myImage.height / 2;
  right -= halfWidth;
  myBitmap = new createjs.Bitmap(myImage);
  myBitmap.regX = halfWidth;
  myBitmap.regY = halfHeight;
  myBitmap.x = halfWidth;
  myBitmap.y = bottom / 2;
  stage.addChild(myBitmap);
  stage.update();
  setTween(myBitmap, new createjs.Point(right, bottom / 2), 3000, createjs.Ease.bounceOut);
  createjs.Ticker.addListener(window);
}
function setTween(target, myPoint, time, easing) {
  createjs.Tween.get(target)
  .to({x:myPoint.x, y:myPoint.y}, time, easing);
}
function tick() {
  stage.update();
}
</script>

Easeクラスのイージングを定めるメソッドには,どのように変化するものがあるか。興味をもたれた読者も多いだろう。TweenJSのページに,各メソッドのイージングをグラフで見せてくれるデモSpark Tableがある図5)⁠このデモの右の欄に「Ease Equations」として掲げられたメソッドは,上記コード2で用いたEase.bounceOut()メソッドと差替えれば,イージングが変わる。興味があったら,試してほしい。

図5 Easeクラスのイージングメソッドについて値の変わり方を比べる

図5 Easeクラスのイージングメソッドについて値の変わり方を比べる

これで,お題の基礎は学んだ。次回は,トゥイーンの設定をランダムに変えながら繰返すアニメーションに進もう。

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

  • preloadjsのバージョンに注意

    new createjs.PreloadJS(false);

    は0.3.xからはエラーになります。
    以下参照。
    http://kudox.jp/java-script/createjs-preloadjs-loadqueue

    Commented : #1  Y.Miyazaki (2014/06/29, 00:44)

コメントの記入