第24回　マウスポインタの動きに弾みがついた曲線を滑らかに描く | gihyo.jp

第24回　マウスポインタの動きに弾みがついた曲線を滑らかに描く | gihyo.jp

前回の第23回「マウスポインタの軌跡を滑らかな線で描きながら消す」は、マウスポインタの動きに沿って...概要を表示 前回の第23回「マウスポインタの軌跡を滑らかな線で描きながら消す」は、マウスポインタの動きに沿って、滑らかに描かれては消える線のアニメーションをつくった。その線は、マウスポインタの動きに少し遅れて描かれた。今回は、線の表現にもう少し手を入れて仕上げよう。 弾みのついた軌跡を描く マウスポインタの動きに少し遅れて、減速しながら目的の位置にたどりつく、いわゆるイーズアウトの動きはインタラクティブなアニメーションでよく見かける。けれど、今回はむしろ線の描き方に弾みをつけたい。勢い余って目的地を通り越す、バネやゴムの動きだ。 第23回コード2「マウスポインタの動きに沿って描いた線を後から順に消してゆく」に手を加えてゆこう。Ticker.tickイベントのリスナー関数（draw()）をつぎのように書き改めた。新たな変数（friction）もひとつ定めた。これで、マウスポインタの動きに勢いの加わった線