前提・実現したいこと
・tweenjsでアニメーションが終わったら終了地点から再度最初の位置にかけてアニメーションがなされるはずなのですが
されずに1回ずつ終了するたびにアニメーションさせたいシェイプが消えてから開始地点始まりで再度アニメーションがなされてしまいます。
処理を終えるたびに消えずにアニメーションさせたいのですが、どうすればよいでしょうか?
処理としてはこのようになってほしいです。
https://ics-creative.github.io/tutorial-createjs/samples/tween_loop.html
簡単な処理のはずなのですが自分のコードだと上手くいってません...
回答のほうよろしくお願いします。
発生している問題
特にコンソールなど見てもエラーは吐いていないため。さっぱり分かりません。
ソースコード
html
1<html> 2 <head> 3 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 4 <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> 5 <script src="javascript.js"></script> 6 <link rel="stylesheet" href="style.css"> 7 </head> 8 <body> 9 <canvas id="demoCanvas" width="600" height="600"></canvas> 10 </body> 11</html>
javascript
1$(function(){ 2 //グローバル変数、配列定義ここから 3 var stage = new createjs.Stage("demoCanvas"); 4 var circleArray = { 5 "circle":{ 6 "x":200, 7 "y":200, 8 "size":75, 9 "beginFill":"yellow" 10 }, 11 "background":{ 12 "x":175, 13 "y":175, 14 "size":100, 15 "beginFill":"rgb(0,0,21)" 16 } 17 } 18 var windowWidth = $(window).innerWidth(); 19 var windowHeight = $(window).innerHeight(); 20 21 //グローバル変数、配列定義ここまで 22 function canvasResize(){ 23 $("#demoCanvas").attr({ 24 "width":windowWidth, 25 "height":windowHeight 26 }).css({ 27 "width":windowWidth, 28 "height":windowHeight 29 }); 30 } 31 32 //シェイプ作成用関数 33 function createShape(){ 34 $.each(circleArray,function(key,elem){ 35 var circle = new createjs.Shape(); 36 circle.graphics.beginFill(elem.beginFill).drawCircle(0,0,elem.size); 37 circle.x = windowWidth / 2; 38 circle.y = windowHeight / 2; 39 stage.addChild(circle); 40 //配列circleの時だけtween用関数呼び出し 41 if(key === "circle"){ 42 circleTween(circle); 43 } 44 }); 45 } 46 47 //tween用関数 48 function circleTween(circle){ 49 createjs.Tween.get(circle,{loop:true}).to({ 50 alpha:1,x:circle.x +25,y:circle.y + 25,scaleX:1,scaleY:1 51 },2500,createjs.Ease.getPowInOut(2)).to({ 52 alpha:1,x:circle.x - 25,y:circle.y - 25,scaleX:1,scaleY:1 53 },2500,createjs.Ease.getPowInOut(2)).to({ 54 alpha: 0.5, x:circle.x, y: circle.y , scaleX: 1.35, scaleY: 1.35 55 },1000,createjs.Ease.getPowInOut(2)).to({ 56 alpha:0.5,x:circle.x,y:circle.y,scaleX: 1.34, scaleY: 1.34 57 },2000,createjs.Ease.getPowInOut(2)); 58 59 } 60 61 //ロードイベント 62 $(window).on("load",function(){ 63 init(); 64 }); 65 66 //初期化用関数 67 function init(){ 68 createjs.Ticker.setFPS(60); 69 createjs.Ticker.addEventListener("tick", stage); 70 createShape(); 71 canvasResize(); 72 } 73}); 74
あなたの回答
tips
プレビュー