CreateJS で読み込んだ画像をアニメーションさせる
CreateJS で読み込んだ画像をアニメーションさせる
CreateJS で読み込んだ画像をアニメーションさせてみたのでメモ、
以下の記事を再現できるか試してみました。
gihyo.jp
サンプル
画像が左から右へ移動して、 バウンドするアニメーションです。
メモ
画像を読み込む
画像は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);
}
}
参考リンク