読者です 読者をやめる 読者になる 読者になる

はしくれエンジニアもどきのメモ

情報・Web系技術の勉強メモ・備忘録です。

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

Canvas CreateJS JavaScript アニメーション

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);
  }
}