CreateJSを使ってみる - アニメーションしつつ変形 nackpan Follow 2013-10-18 06:35:11 License: MIT License Fork5 Fav4 View7572 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 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> CreateJSを使ってみる - アニメーションしつつ変形 * { 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; } 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; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? transform ボタンを押すと、アニメーションしながら変形します 製作過程をブログに書きました。 [CreateJSを使ってみる – 読み込んだ画像をアニメーションさせながら変形](http://nackpan.net/blog/2013/10/17/createjs-transform-animation/) Matrix2D変形用に作ったTweenJS用プラグイン [TransformMatrixPlugin.js](http://jsdo.it/nackpan/4w0b) Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author nackpan URLhttp://nackpan.net よろしくおねがいします Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/x1OL/js"></script> canvas CreateJS EaselJS html5_elements&api javascript Matrix2D PreloadJS smartphones&tablets TweenJS Discussion Questions on this code? Tags CreateJS EaselJS Matrix2D PreloadJS TweenJS canvas html5_elements&api javascript smartphones&tablets Favorite by ball koukunRS gameQB djankey Forked sort by latest page views favorite forked forked: CreateJSを使ってみる - アニメーシ ohisama1 00 700 189/8/30 CreateJS EaselJS Matrix2D PreloadJS TweenJS canvas html5_elements&api javascript smartphones&tablets forked: CreateJSを使ってみる - アニメーシ koukunRS 10 2079 160/5/30 CreateJS EaselJS Matrix2D PreloadJS TweenJS canvas html5_elements&api javascript smartphones&tablets forked: CreateJSを使ってみる - アニメーシ jt5d 00 1271 160/5/30 CreateJS EaselJS Matrix2D PreloadJS TweenJS canvas html5_elements&api javascript smartphones&tablets 1 2NEXT>>