SQLの窓

2016年05月03日


EASELJS を使用した画像の分割と分割されたエリア毎のアニメーション / createjs.Ticker の reset と init はうまく動きませんでした



createjs.Ticker でアニメーション用のループを作成するので、一旦実行すると CPU 負荷が少しかかった状態になります。そのリセットとかしたかったですけれど、createjs.Ticker の reset と init はうまく動きませんでした。

4分割固定で処理していますが、何分割でもできるようなパラメータ設定になっています。配列の数と、分割の割り算のところを引数にすればいいですね。

EASELJS で作成した Bitmap を TWEENJS でサンプルどおりに動かしてみました
※ 回転はあとから追加です。同時に元の座標に戻しています

<script>
if ( typeof createjs === 'undefined' ) {
	document.write("<"+"script src=\"https://code.createjs.com/easeljs-0.8.2.min.js\"></"+"script>");
	document.write("<"+"script src=\"https://code.createjs.com/tweenjs-0.6.2.min.js\"></"+"script>");
}
</script>

<script>
var bitmap = Array(),bitmap_all,rect = Array();
var tick = false;

$(function(){

	$("#tm_action_05103").on("click", function(){

		if ( !tick ) {
			// アニメーション開始
			createjs.Ticker.addEventListener("tick", stage1);
			tick = true;
		}

		for( i = 0; i < 4; i++ ) {
			bitmap[i].rotation = 0;
			createjs.Tween.get(bitmap[i], {loop: false})
				.to({x: 400}, 1000, createjs.Ease.getPowInOut(4))
				.to({alpha: 0, y: 75}, 500, createjs.Ease.getPowInOut(2))
				.to({alpha: 0, y: 125}, 100)
				.to({alpha: 1, y: 100}, 500, createjs.Ease.getPowInOut(2))
				.to({x: (i%2)*(bitmap_all.image.width/2), y: (parseInt((i/2)))*(bitmap_all.image.height/2), rotation:360 },
					800, createjs.Ease.getPowInOut(2))
				.call(function(){
					console.log("アニメーション終了(一応)");
				});
		}

	});

});
</script>
<input type="button" value="アニメーション" id="tm_action_05103">
<br>
<canvas id="load_area1" width="600" height="450" style='border:1px solid #000000'></canvas>
<script>
var stage1 = new createjs.Stage("load_area1");


img = new Image()
img.onload = function() {

	bitmap_all = new createjs.Bitmap(this);

	// トリミング用 bitmap
	for( i = 0; i < 4; i++ ) {
		bitmap[i] = new createjs.Bitmap(this);

		rect[i] = new createjs.Rectangle(
			(i%2)*(bitmap_all.image.width/2), 
			(parseInt((i/2)))*(bitmap_all.image.height/2), 
			bitmap_all.image.width/2, 
			bitmap_all.image.height/2
		);
		bitmap[i].sourceRect = rect[i];
		bitmap[i].x = (i%2)*(bitmap_all.image.width/2);
		bitmap[i].y = (parseInt((i/2)))*(bitmap_all.image.height/2);

		stage1.addChild(bitmap[i]);
	}

	// 最初の表示
	stage1.update();

}
img.src = "https://lh3.googleusercontent.com/-A5QW2HTze84/VyNZEIwxh4I/AAAAAAAAeRE/-rCcFQmsKawDMRrV6logONKz0i6LVhtYACCo/s600/wing_elf.jpg";

</script>


【JavaScript ライブラリの最新記事】
posted by lightbox at 2016-05-03 21:14 | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり