2013-10-18 06:35:11

License: MIT License

Fork: 5

Fav: 4

View: 7218

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 159 lines
HTML 5 lines
CSS 30 lines

transform ボタンを押すと、アニメーションしながら変形します

製作過程をブログに書きました。 CreateJSを使ってみる – 読み込んだ画像をアニメーションさせながら変形

Matrix2D変形用に作ったTweenJS用プラグイン TransformMatrixPlugin.js

CreateJSを使ってみる - アニメーションしつつ変形
TransformMatrixPlugin.js

(function (window){
	
	var cj = createjs;
	
	cj.TransformMatrixPlugin.install();
	
	var canvas;
	
	var animationState = 1;
	var transitionFlag = false;
	
	var container;
	var imgLayers = [];
	var imgs = [];
	
	initialize();
	 
	function initialize() {
		canvas = document.getElementById("myCanvas");
		var loader = new cj.LoadQueue(false);
		stage = new cj.Stage(canvas);
		container = new cj.Container();
		container.x = 10;
		container.y = 10;
		stage.addChild(container);
		
		var btn1 = document.getElementById("transformBtn");
		btn1.addEventListener("click", pushTransformBtn);//matrixTransform);//

//// 画像読み込み
		
		loader.addEventListener("fileload", imageLoad);
		loader.addEventListener("complete", completeImageLoad);
		
		var manifest = [{ id: '1', src: 'http://jsrun.it/assets/r/x/q/T/rxqTf.png' },
                        { id: '2', src: 'http://jsrun.it/assets/w/Z/u/i/wZuib.png' },
                        { id: '3', src: 'http://jsrun.it/assets/z/c/f/e/zcfer.png' },
                        { id: '4', src: 'http://jsrun.it/assets/3/c/m/9/3cm9z.png' },
                        { id: '5', src: 'http://jsrun.it/assets/9/p/q/P/9pqPA.png' },
                        { id: '6', src: 'http://jsrun.it/assets/9/w/4/v/9w4vb.png' }
		];
		loader.loadManifest(manifest);
	}
	
	function imageLoad(event) {
		var myImage = event.result;
		var myBitmap = new createjs.Bitmap(myImage);
		myBitmap.id = event.item.id;
		imgs.push(myBitmap);
	}
	
	function completeImageLoad(event)
	{
		var i;
		// 読み込んだ画像を番号順に並べる 
		imgs.sort(function(a,b){return a.id - b.id;});

for(i = 0; i < imgs.length; i++){
			// 画像に枠線を追加
			var rect = addBorderLine(imgs[i]);
			var imgLayer = new cj.Container();
			imgLayer.addChild(imgs[i],rect);
			imgLayers.push(imgLayer);
			container.addChild(imgLayers[i]);
			// 画像の中心を基準点にする
			var bounds = imgLayers[i].getBounds();
			var w = bounds.width;
			var h = bounds.height;
			imgLayers[i].regX = w / 2;
			imgLayers[i].regY = h / 2;
			imgLayers[i].x = w / 2;
			imgLayers[i].y = h / 2;
		}
		
		stage.update();
		
		function addBorderLine(img)
		{
			var bounds = img.getBounds();
			var w = bounds.width;
			var h = bounds.height;
			var rect = new cj.Shape();
			rect.graphics.setStrokeStyle(4).beginStroke("darkGray").drawRect( 0, 0, w, h);
			return rect;	
		}
	}

function onComplete() {
			//console.log('+++++++ complete +++++++++ ',(animationState));
			animationState++;
            if(animationState > 3) animationState = 1;
            transitionFlag = false;
            cj.Ticker.removeEventListener("tick", stage);
        }
	}
	
}(window));

CreateJSを使ってみる - アニメーションしつつ変形

transform ボタンを押すと、アニメーションしながら変形します製作過程をブログに書きました。 [CreateJSを使ってみる – 読み込んだ画像をアニメーションさせながら変形](http://nackpan.net/blog/2013/10/17/createjs-transform-animation/) Matrix2D変形用に作ったTweenJS用プラグイン [TransformMatrixPlugin.js](http://jsdo.it/nackpan/4w0b)(function (window){ var cj = createjs; cj.TransformMatrixPlugin.install(); var canvas; var animationState = 1; var transitionFlag = false; var container; var imgLayers = []; var imgs = []; initialize(); function initialize() { canvas = document.getElementById("myCanvas"); var loader = new cj.LoadQueue(false); stage = new cj.Stage(canvas); container = new cj.Container(); container.x = 10; container.y = 10; stage.addChild(container); var btn1 = document.getElementById("transformBtn"); btn1.addEventListener("click", pushTransformBtn);//matrixTransform);// //// 画像読み込み loader.addEventListener("fileload", imageLoad); loader.addEventListener("complete", completeImageLoad); var manifest = [{ id: '1', src: 'http://jsrun.it/assets/r/x/q/T/rxqTf.png' }, { id: '2', src: 'http://jsrun.it/assets/w/Z/u/i/wZuib.png' }, { id: '3', src: 'http://jsrun.it/assets/z/c/f/e/zcfer.png' }, { id: '4', src: 'http://jsrun.it/assets/3/c/m/9/3cm9z.png' }, { id: '5', src: 'http://jsrun.it/assets/9/p/q/P/9pqPA.png' }, { id: '6', src: 'http://jsrun.it/assets/9/w/4/v/9w4vb.png' } ]; loader.loadManifest(manifest); } function imageLoad(event) { var myImage = event.result; var myBitmap = new createjs.Bitmap(myImage); myBitmap.id = event.item.id; imgs.push(myBitmap); } function completeImageLoad(event) { var i; // 読み込んだ画像を番号順に並べる imgs.sort(function(a,b){return a.id - b.id;}); for(i = 0; i < imgs.length; i++){ // 画像に枠線を追加 var rect = addBorderLine(imgs[i]); var imgLayer = new cj.Container(); imgLayer.addChild(imgs[i],rect); imgLayers.push(imgLayer); container.addChild(imgLayers[i]); // 画像の中心を基準点にする var bounds = imgLayers[i].getBounds(); var w = bounds.width; var h = bounds.height; imgLayers[i].regX = w / 2; imgLayers[i].regY = h / 2; imgLayers[i].x = w / 2; imgLayers[i].y = h / 2; } stage.update(); function addBorderLine(img) { var bounds = img.getBounds(); var w = bounds.width; var h = bounds.height; var rect = new cj.Shape(); rect.graphics.setStrokeStyle(4).beginStroke("darkGray").drawRect( 0, 0, w, h); return rect; } } function pushTransformBtn(){ if(transitionFlag) return; cj.Ticker.addEventListener("tick", stage); transitionFlag = true; switch(animationState){ case 1: animate1(); break; case 2: animate2(); break; case 3: animate3(); break; default: break; } function animate1() { for(var i = 0; i < imgLayers.length; i++){ var tween = cj.Tween.get(imgLayers[i],{override:false}) .to({x:80, y: 80}, i * 10) .set({matEnabled:true}) .to({mat:{rotation:45,scaleX:1.0, scaleY:0.3}, x:160, y:280 - i * 10}, 500,cj.Ease.quadIn) .set({matEnabled:false}) .to({x:160, y: 280 - i * 35},500, cj.Ease.backOut); if(i == (imgLayers.length - 1)){ tween.call(onComplete); } } } function animate2() { for(var i = 0; i < imgLayers.length; i++){ var tween = cj.Tween.get(imgLayers[i],{override:false}) .set({matEnabled:true}) .to({mat:{skewY:30, rotation:0,scaleX:0.5, scaleY:0.8}, x:300 - i * 4, y:100 + i * 2}, 500,cj.Ease.quadOut) .set({matEnabled:false}) .to({x:300 - i * 40, y: 100 + i * 20},500, cj.Ease.backOut); if(i == (imgLayers.length - 1)){ tween.call(onComplete); } } } function animate3() { for(var i = 0; i < imgLayers.length; i++){ var tween = cj.Tween.get(imgLayers[i],{override:false}) .set({matEnabled:true}) .to({mat:{skewY:0, rotation:0,scaleX:1, scaleY:1}, x:80, y:100}, 500,cj.Ease.quadOut) .set({matEnabled:false}); if(i == (imgLayers.length - 1)){ tween.call(onComplete); } } } function onComplete() { //console.log('+++++++ complete +++++++++ ',(animationState)); animationState++; if(animationState > 3) animationState = 1; transitionFlag = false; cj.Ticker.removeEventListener("tick", stage); } } }(window));<canvas id="myCanvas" width="320" height="320"></canvas> <div id="buttonArea"> <input type="button" id="transformBtn" value="transform"/> </div> <script src="http://code.createjs.com/createjs-2013.09.25.min.js" type="text/javascript"></script>* { margin: 0; padding: 0; border: 0; } body { background-color: #DDDDDD; font: 30px sans-serif; } canvas { background-color: white; } input { margin-left:100px; margin-right:auto; padding: 5px 20px; font-weight: bold; cursor: pointer; background-color:#F0C8C8; border-color:#D0A2A2; color: #000000; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } input:hover { background-color:#F8DFDF; color: #4A1A18; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

nackpan

URL
http://nackpan.net

よろしくおねがいします

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/x1OL/js"></script>

QR Code

Discussion

Questions on this code?

Favorite by

ball

koukunRS

gameQB

djankey

Forked

sort by

forked: CreateJSを使ってみる - アニメーシ

ohisama1

189/8/30

forked: CreateJSを使ってみる - アニメーシ

koukunRS

1
0
1973

160/5/30

forked: CreateJSを使ってみる - アニメーシ

jt5d

0
0
1154

160/5/30

CreateJSを使ってみる - アニメーションしつつ変形

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Favorite by

Forked