CreateJS で読み込んだ画像をアニメーションさせる

CreateJS で読み込んだ画像をアニメーションさせてみたのでメモ、

以下の記事を再現できるか試してみました。
gihyo.jp

サンプル

画像が左から右へ移動して、バウンドするアニメーションです。

codepen.io

メモ

画像を読み込む

画像はPreloadJS で読み込む。

new PreloadJS(false) で、 XHR を使用せずクロスドメインの画像も読み込むことができる。

.addEventListener("fileload",<callback_func>) で、ファイルを読み込んだ後、登録したコールバック関数が呼ばれる。

読み込むファイルは、 loader.loadFile(<file_url>) 関数で指定する。


var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload",<callback_func>);
loader.loadFile(<file_url>);

画像の描画

コールバック関数の引数に読み込んだ画像のデータが格納されている。

.result で画像の場合、 img タグを取得できる。

画像を描画する場合、 new createjs.Bitmap(<img>) で、Bitmapインスタンスをを生成する。

このまま描画すると、 Bitmap の基準位置は、 Bitmapの左上(regX: 0, regY: 0) となり、描画される位置は、 Canvas上の左上(x: 0, y: 0)となる。


function drawLeftTop(eventObject) {
  var myImage = eventObject.result;
  // Bitmapインスタンス
  myBitmap = new createjs.Bitmap(myImage);

  stage.addChild(myBitmap);
  stage.update();
}

Bitmap の基準位置をBitmapの中心に変更するには、 .regX, .regY をBitmap の幅、高さの半分にすればいい。

Bitmap の描画位置は、 .x, .y で変更できる。以下の設定で、Canvas 上、左端中央に描画できる。


function drawLeftVertical(eventObject){
  var myImage = eventObject.result;
  myBitmap = new createjs.Bitmap(myImage);
  var myImage = eventObject.result;
  var img_halfWidth = myImage.width / 2;
  var img_halfHeight = myImage.height / 2;

  /*
   基準位置
    default: regX=0, regY=0 左上
  */
  myBitmap.regX = img_halfWidth;
  myBitmap.regY = img_halfHeight;

  // 画像位置
  var leftX = img_halfWidth;
  var centerY = canvas_height / 2;
  myBitmap.x = leftX;
  myBitmap.y = centerY;

  stage.addChild(myBitmap);
  stage.update();
}

アニメーション

アニメーションは、TweenJS を使う。


setTween(myBitmap, new createjs.Point(rightX, centerY), duration_ms, animation);

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

上のコードでアニメーションを設定している。今回では、Canvas上の左中央から右中央へ移動する。 easing は、createjs.Ease.bounceOut を設定しているので、バウンドするような動きになる。


function drawTweek(eventObject){
  var myImage = eventObject.result;
  myBitmap = new createjs.Bitmap(myImage);
  var myImage = eventObject.result;
  var img_halfWidth = myImage.width / 2;
  var img_halfHeight = myImage.height / 2;

  var leftX = img_halfWidth;
  var rightX = canvas_width - img_halfWidth;
  var centerY = canvas_height / 2;

  myBitmap.regX = img_halfWidth;
  myBitmap.regY = img_halfHeight;

  myBitmap.x = leftX;
  myBitmap.y = centerY;

  stage.addChild(myBitmap);
  stage.update();

  // animation
  setTween(myBitmap, new createjs.Point(rightX, centerY), duration_ms, animation);

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

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