CIRCLES」をお題にした。同心円のリングが,ステージ上のクリックした位置に,時間差でトゥイーンする。前回,一応それらしい動きはできた。Canvasのあちこちを続けざまにクリックすると,同心円にしたリングのトゥイーンがばらばらになってしまった(図1⁠)⁠。今回は,アニメーションやインタラクションをよく確かめて,スクリプトの仕上げにかかる。Trial」よりキャプチャ隊列を乱さないステージ上を素早くあちこちクリックすると,なぜリングのトゥイーンは隊列を乱してしまうのか。それは,先頭と後尾でトゥイーンを時間的にずらしているからだ。先頭は前のトゥイーンをすでに終えていて,すぐにつぎのトゥイーンに向かう。最後尾はまだ前のトゥイーンが終わっていないため,つぎの目的地には向かえず,今のトゥイーンを終えようとする。それぞれの向かう先がばらばらになってしまうのだ。これを避けるには,新しいトゥイーンを命じるときには,前のトゥイーンは途中であっても止めさせればいい。そのメソッドが,静的メソッドTween.removeTweens()だ。引数には対象となるインスタンスを渡す。すると,そのインスタンスに定められたすべてのトゥイーンは解除される。Tween.removeTweens(対象オブジェクト);前回のコード2のトゥイーンを定める関数には,つぎのようなTween.removeTweens()メソッドの呼出しを加えればよい。createjs.Ease.bounceOut);}もっとも,新しいトゥイーンを命じたら,前のトゥイーンはつねに無視してよいなら,Tween.get()メソッドの第2引数でも定められる。今回のお題なら,こちらの方が簡単だ。...})第2引数はObjectインスタンスで渡す。オブジェクトには,設定したいプロパティとその値を納める。新たなトゥイーンを加えるとき前のトゥイーンはすべて除いてしまいたいときは,overrideプロパティにtrueを定めればよい(デフォルト値はfalse⁠)⁠。createjs.Ease.bounceOut);}これで,ステージを素早く続けざまにクリックしても,古いトゥイーンはすべてのリングから除かれるため,全体が新たな目的地に向かってトゥイーンを始める。隊列の乱れはない(図2⁠)⁠。修正はわずかに引数ひとつではあるが,前回までのおさらいもかねて,つぎのコード1にscript要素全体を掲げる。