質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

CreateJS

CreateJSは、HTML5でリッチコンテンツを制作できるJavaScriptライブラリ群です。JavaScriptの知識があれば、HTML5のCanvasをコントロールしコンテンツを作ることができます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

1432閲覧

canvasのtweenアニメーション

webStudy

総合スコア36

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

CreateJS

CreateJSは、HTML5でリッチコンテンツを制作できるJavaScriptライブラリ群です。JavaScriptの知識があれば、HTML5のCanvasをコントロールしコンテンツを作ることができます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2019/06/24 13:37

前提・実現したいこと

・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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問