apply,before,afterの関係
- 2008 年 12月 11 日
Progressionでコマンドが持つメソッド、apply,before,afterの関係を確認します。
その前に僕が最初やってたこと。addCommandなどでコマンド追加する時、メソッド内につらつら書いていけると知らなくていちいちインスタンスを作っていました。
var com:DoTweener = new DoTweener( target, { x:100, time:1 } ); com.apply( trace, ["apply"] ); com.before( trace, ["before"] ); com.after( trace, ["after"] ); addCommand( com ); |
その後、addCommand内に書いていけると知ってつらつらのように書くようになった。
一カ所でしか使わないならこの方が解りやすいと思います。
addCommand( new DoTweener( square, { x:50, transition:"easeOutSine", time:2 } ) .apply( trace, ["apply"] ) .before( trace, ["before"] ) .after( trace, ["after"] ) ) |
本題の関係を確認してみます。以下の場合、どう動くかで確かめました。
addCommand( new DoTweener( square, { y:50, transition:"easeOutSine", time:2, delay:1 } ), new DoTweener( square, { x:50, transition:"easeOutSine", time:2 } ) .apply( function():void{ if(!this.parent){ new DoTweener( this.target, { _color:0xff0000, transition:"easeOutSine", time:4 } ).execute(); } } ) .before( function():void{ this.parent.insertCommand( new DoTweener( square, { x:200, transition:"easeOutSine", time:2 } ) ); } ) .after( function():void{ this.parent.insertCommand( new DoTweener( square, { y:200, transition:"easeOutSine", time:2 } ) ); } ) ); |
結果はこちら
動き的には何より先に二つ目のDoTweenerのapplyが動いています。applyはコマンドが作られたらすぐに動く感じ。applyが動く段階ではthisの参照は期待通り入っているけれど、parentなどはまだ入っていないのに注意。insertCommandは実行中のコマンドの直後に追加をするので、afterで追加したコマンドがbeforeで追加したコマンドより先に動いています。
ちなみにDoTweenerに対してもともとのTweenerのパラメーター、onStartやonUpdateなども使える。