実務上は、ease:Sine.easeIn で加速した後、ease:Linear.easeNone で等速運動を実行すればいいという。幸い、TweenLiteではdelay:で秒数を指定して次の動きを書くことができる。
しかし、それでは加速段階の最後の速度と、等速段階の速度が必ずしもイコールにはならない。
左がb1,右がb2だ。いずれも1秒後に等速運動になるようにしているが、つなぎ目がぎこちないのがわかるだろう(まぁ、わざとぎこちない例を作ったのだけど)。速度の変化が連続でないのだ。
package{ import flash.display.Sprite; import com.greensock.*; import com.greensock.easing.*; public class main extends Sprite{ public var b1:ball; public var b2:ball; public function main(){ b1=new ball(); b1.x=80; b1.y=24; addChild(b1); b2=new ball(); b2.x=240; b2.y=24; addChild(b2); TweenLite.to(b1,1,{y:b1.y+100,ease:Sine.easeIn}); TweenLite.to(b1,1,{y:b1.y+432,overwrite:false,delay:1,ease:Linear.easeNone}); TweenLite.to(b2,1,{y:b2.y+332,ease:Sine.easeIn}); TweenLite.to(b2,1,{y:b2.y+432,overwrite:false,delay:1,ease:Linear.easeNone}); } } }
Sine.easeInはサインカーブにしたがうのだろうから、グラフにすればこんな感じだ。b1(グリーン)は等速運動になったとたん前より速くなり、b2(オレンジ)は遅くなっている(ただし、このグラフはイメージ図。実際は加速段階で1秒かけて動く距離がb1,b2で異なるので、速度のサインカーブが重なるわけではない)。
目標はサインカーブ(水色)と滑らかにつながるピンク色の直線だ。
admin says:
2011/08/03 22:15 /
Illustratorでサインカーブを作図するにあたり、
http://d.hatena.ne.jp/pyopyopyo/20070106/p1
こちらのJavaScriptを使用させていただきました。