necotech

ベジエ(ベジェ)曲線って？

ドロー系ソフトやPhotoshopのペンツール、パス機能を使ったことがある人なら分かると思いますが、要は平面上に滑らかな曲線を描くための方法の一つです。

以下の説明がすごく分かりやすいです。ドロー系ソフトを使ったことのある人は、以下の3次ベジエ曲線のP1とP2がパスでいうところのハンドルと考えたら理解できると思います。
sigbus.info: 中学生でもわかるベジェ曲線

N次ベジエ曲線

一般的なドロー系ソフトでいうところのパスは、3次ベジエ曲線の組み合わせで複雑な曲線を表現できるようになっていますが、このプラグインではN次ベジエ曲線一つを使います。これがちょっと曲者で、放物線や単純なカーブなら難なく表現できるのですが、アンカーポイントが増えるほど直感的な動きが難しくなってきます。が、頑張ればこれ一つで複雑な曲線を表現できます。

似たjQueryプラグイン

jQuery.pathというプラグインを使えば、3次ベジエ曲線を表現できます。(こちらはハンドルの角度と長さを定義します。)
これに対するjQuery.bezierCurveの利点は、上記であげたrotate()でしょう。サンプルにあるように、飛行機とか車の画像の角度を自動で計算して適用してくれます。