jQuery.bezierCurve

jQuery.bezierCurveはjQueryのanimateメソッドを拡張して、曲線的な動きを再現するプラグインです。
デモページ

ブラウザ対応状況

メソッドのいくつかはIE9以上の対応になりますが、基本的な動作はIE8以下でも確認済みです。
IE8以下で動作しないメソッドは下記の[メソッド]項目で記述します。

使い方

まず動かしたい要素を絶対配置で指定します。

<style>
#hoge-wrap {
 position: relative;
}

#hoge {
 position: absolute;
}
</style>

<div id="hoge-wrap">
 <div id="hoge"></div>
</div>

$.bezierCurveの第一引数にスタート地点のX座標、第二引数にY座標を指定します。
※引数の指定は必須です。

addPointメソッドで座標を追加していき、animateメソッドでbezierPathを実行します。

var path = $.bezierCurve(x, y)
 .addPoint(x, y)
 .addPoint(angle, length, true)
 .addPoint(x, y);

$("#hoge").animate({bezierPath: path}, duration, easing, callback);

$.bezierCurveはaddPointメソッドで追加された座標を格納し、animateを実行した際に、格納した座標をもとにN次ベジェ曲線の公式を用いて曲線的なパスを生成します。

$.bezierCurveの詳細についてはデモページに記載してありますので、詳しくはデモページをどうぞ。
デモページ: How to use

※addPointについては下記のメソッド項目にて詳細を記述します。

メソッド

ここでは$.bezierCurveのメソッドを一つずつ紹介いたします。
ここでの説明は簡易的なものになりますので、詳しくはデモページのMethod項目をご覧ください。

addPoint

$.bezierCurveを動作させるのに必須のメソッドになります。
このメソッドを指定しなかった場合、$.bezierCurveは引数で指定した位置から動作することはありません。

指定の仕方は下記になります。

$bezierCurve(x, y).addPoint(a, b, is_angle);

第三引数is_angleが空、もしくはfalseの場合、第一引数aはX座標、第二引数bはY座標での指定となります。

第三引数is_angleがtrueの場合、$.bezierCurveの引数に指定したスタート地点の座標を基点として、第一引数aを角度、第二引数bを距離で指定することができます。

$.bezierCurve(x, y)
 .addPoint(x, y) //is_angleが空なので、第一引数がX座標、第二引数がY座標
 .addPoint(angle, length, true) //is_angleがtrueなので第一引数が角度、第二引数が距離

詳しくはデモページのaddPointをご覧ください。

reverse

$.bezierCurveで生成したパスをそのまま反転させます。

var path = $.bezierCurve(x, y)
 .addPoint(x, y)
 .addPoint(angle, length, true)
 .addPoint(x, y);

$("#hoge").animate({bezierPath: path}, duration, easing, callback)
 .animate({bezierPath: path.reverse()}, duration, easing, callback);

詳しくはデモページのreverseをご覧ください。

rotate

$.bezierCurveで生成したパスの進行方向に合わせて、要素の角度を変えることができます。
※IE9以上の対応メソッドです。
IE8以下で使用した場合は無視されます。

var path = $.bezierCurve(x, y)
 .addPoint(x, y)
 .addPoint(angle, length, true)
 .addPoint(x, y);

$("#hoge").animate({bezierPath: path.rotate()}, duration, easing, callback)
 .animate({bezierPath: path.reverse().rotate()}, duration, easing, callback);

詳しくはデモページのrotateをご覧ください。

canvasSimulator

$.bezierCurveで指定した座標位置と生成したパスを、HTML5のcanvasを使用することで視覚的に確認ができます。
※canvasの使える環境のみになりますので、IE8以下では動作しません。

var path = $.bezierCurve(x, y)
 .addPoint(x, y)
 .addPoint(angle, length, true)
 .addPoint(x, y);

$("#hoge").animate({bezierPath: path.canvasSimulator($("#hoge-wrap"))}, duration, easing, callback);

引数にはアニメーションさせる要素の基準となる親要素(position: relative or absolute)の要素を指定。
※引数の指定は必須になります。

詳細はデモページのcanvasSimulatorをご覧ください。


 

NOTES

今回はN次ベジェ曲線の公式を用いて実装してみましたが、やはりどう指定したらどう動くかが直感的にわかりづらいですね。
また時間のあるときに今度はIllustratorのようにアンカーとハンドルで指定を分けられるように改良したいなと思ってはいます。

他にもメソッドの改良や追加したい箇所はありますが、とりあえずは現状のもので使い道があれば使ってやってください。

ライセンスについて

MITで配布になりますので、なにか使い道がありましたら商用でもご自由にお使いください。
当プラグインを利用して発生した障害などについては、MITでの配布のため、一切の責任を負いませんので、ご了承の上ご利用ください。