CreateJS(TweenJS)での連続した動き

現在CreateJSのTweenJSを使ってcanvas内の画像にアニメーションをつけています。
似たような画像が複数あり、一つ目の移動が完了したらその次の画像の移動をさせるというもので、
forを使ったループでやりたいのですが、そのまま書くとすべての画像が一斉に動いてしまいます。

for(i=0;i<5;i++){
var tween = createjs.Tween.get(box[i], {loop:false});
tween[i].to(移動処理);
}
（一部省略）

jQueryではqueueで行なっていたのですが、動作が完了するまで次の動作を行わない場合、
TweenJSではどのようにすればよいのでしょうか？

No.2 ベストアンサー 回答者： fujillin 回答日時： 2013/07/29 18:50

A No1です。

＞ループを使う関係上ちょっと都合がわるいので～～
callbackで行なうのが一番簡単だと思いますが、どうしてもループで処理したいのなら…

アニメーションに要する時間があらかじめわかっているのなら、
その時間経過後に次のアニメーションを行なうように、ループの中でsetTimeout等で処理を設定するといった方法があり得ます。
ただし、この方法だとアニメーションの時間が正確かどうかなどによって、動作にラップやギャップが生じてしまう可能性があり、怪しさがあります。
（私はTweenJSの内容を存じませんので、判断できませんが…）


もっとまともな方法を考えるなら、
＞jQueryではqueueで行なっていたのですが～～
queueと同じような関数を作っておいて、ループ内からはそちらを呼び出すようにすれば良いのではないでしょうか？
（一般化して作成するのは面倒でも、限定した関数なら比較的簡単にできると思います）

TweenJSを知らないので、かなり適当ですが…
　var myQueue = function(element, property, func){ 　～～　}
みたいにしておいて、ループ内からは
　myQueue(box[i], {loop:false}, function(){tween[i].to(移動処理);} );
のような呼び出し方をするといったもので良いのでは？

結局はcallbackを利用していますが、myQueueの処理内容は以下のような感じ。
対象要素ごとにスタックを作成しfuncをスタックしておいて、既存のスタックがなければ、callbackでスタックの次の内容を実行するようにセットして最初のアニメーションを実行する。
といったものでもいけると思います。
（↑に書いたままだと、作り方によっては、tween[i]の「i」の値が保存されない可能性がありますが…
）

この回答へのお礼

ありがとうございます。
JSソース自体をPHPで動的に生成するのでなるべくcallbackを使わずにシンプルに出来ればいいなと思っていましたが、かえって複雑になってしまいそうですね。

かかる秒数は一定なのでご意見の通り同じ秒数でウェイトさせる（TweenJSにはwaitという関数が有りました）を使って擬似的に連続させてみようと思います。

今回は厳密な秒数の一致は必要ありませんが今後のためにcallbackを簡単に扱えるような方法も検討してみようと思います。

お礼日時：2013/07/29 19:46

No.1 回答者： fujillin 回答日時： 2013/07/26 14:31

TweenJSはまったく存じませんので、検索してみただけの情報ですが…

各処理にcallbackを指定できるようになっているようですので、それを利用できないのでしょうか。
http://www.createjs.com/Docs/TweenJS/modules/Twe …

この回答へのお礼

回答有り難うございます。
callbackでもできそうですがforのループを使う関係上ちょっと都合がわるいのでこの方法では難しそうです。

お礼日時：2013/07/29 12:27