jQuery.bezierCurveの紹介
僕が働いている会社の後輩が昔作ったjQueryプラグインを紹介します。
jQuery.bezierCurve
このプラグインを使うと、jQueryのanimateメソッドを使って、オブジェクトをN次ベジエ曲線上にアニメーションさせることができます。また、オプションで以下のことができます。サンプルコードと実際の動きは上記の紹介ページからご覧ください。
- reverse()で反対方向にアニメーションさせる
- rotate()で、進行方向に向かって要素を回転させる
- canvasを使って、点と曲線を可視化できる(テスト用)
ベジエ(ベジェ)曲線って？
ドロー系ソフトやPhotoshopのペンツール、パス機能を使ったことがある人なら分かると思いますが、要は平面上に滑らかな曲線を描くための方法の一つです。
以下の説明がすごく分かりやすいです。ドロー系ソフトを使ったことのある人は、以下の3次ベジエ曲線のP1とP2がパスでいうところのハンドルと考えたら理解できると思います。
sigbus.info: 中学生でもわかるベジェ曲線
N次ベジエ曲線
一般的なドロー系ソフトでいうところのパスは、3次ベジエ曲線の組み合わせで複雑な曲線を表現できるようになっていますが、このプラグインではN次ベジエ曲線一つを使います。これがちょっと曲者で、放物線や単純なカーブなら難なく表現できるのですが、アンカーポイントが増えるほど直感的な動きが難しくなってきます。が、頑張ればこれ一つで複雑な曲線を表現できます。
似たjQueryプラグイン
jQuery.pathというプラグインを使えば、3次ベジエ曲線を表現できます。(こちらはハンドルの角度と長さを定義します。)
これに対するjQuery.bezierCurveの利点は、上記であげたrotate()でしょう。サンプルにあるように、飛行機とか車の画像の角度を自動で計算して適用してくれます。
試してみた
このプラグインを使って、ランダムな曲線上を散歩する猫のアニメーションをつくりましたので参考にしてみてください。
[追記2017/03/06] サンプルが消えていたので修正しました。
[追記2019/08/20] jsdo.itサービス終了に伴い、サンプルが閲覧できなくなりました。
