Flashの曲線を描く関数curveToは、2次ベジェ曲線だ、とマニュアルに書いてあったのだけど、このスクリプトで描く線を、モーションガイドのように使いたいなぁ、と思った次第です。
ベジェ曲線の式は、リンク先の通りなので、とりあえずここから。
とりあえず、普通に描いた曲線の上を移動してみます。
ぴったり座標が合いますね。当たり前なんでしょうけど。数式って気持ちよいです。
//座標を取得するのはこんな感じ private function getPosOnBezje2D( x0:Number,y0:Number,x1:Number,y1:Number,cx:Number,cy:Number,t:Number ):Point{ var tp:Number = 1.0 - t; return new Point( x0*tp*tp + 2*cx*t*tp + x1*t*t , y0*tp*tp + 2*cy*t*tp + y1*t*t ); }
次は曲線の傾きに合わせてみます。
地味ですねぇ。上の式を微分すると⊿xと⊿yが得られるので、それを回転にあてています。
private function getDeffOnBezje2D( x0:Number,y0:Number,x1:Number,y1:Number,cx:Number,cy:Number,t:Number ):Number{ var dx:Number = 2 * ( t * ( x0 + x1 - 2 * cx ) - x0 + cx ); var dy:Number = 2 * ( t * ( y0 + y1 - 2 * cy ) - y0 + cy ); return Math.atan2( dy , dx ); }
よく眺めると、速度が一定でないですね…。次はそこに手を入れようかと。地味ですが。