このページではjQueryのanimateメソッドを拡張するプラグイン、jQuery.bezierCurveをご紹介します。
このプラグインを使えばjQuery単体では実現困難だったFlashみたいな曲線的な動きが実装できるようになります!

しかもJSだからiPhoneでもグニャグニャ動きます!
※スマホではスクロール時にアニメーション描画自体が停止するので、スクロール中は動作が停止してしまいます。

ダウンロードはこちらから

このプラグインではN次ベジェ曲線の公式を用いてパスを引き、それに沿って下記のように絶対配置の要素をアニメーションさせることができます。

DEMO1

How to use

使い方はまず、jQueryとjquery.bezierCurve.jsを読み込みます。

<script src="/path/jquery.js">
<script src="/path/jquery.bezierCurve.js">

<!-- /path/にはファイルを設置したディレクトリを指定。 -->

続いて動かしたい要素をposition: absolute;で配置。

<!-- HTML -->
<div id="hoge-parent">
  <div id="hoge">HOGEHOGE</div>
</div>
/* CSS */
#hoge-parent {
  position: relative;
}
#hoge {
  position: absolute;
}

そしてJSで下記のように記述をします。

  $("#hoge").animate({
    bezierPath: $.bezierCurve(x, y)  //スタート地点(横方向, 縦方向)
      .addPoint(x, y)  //追加座標(横方向, 縦方向)
      .addPoint(angle, length, true)  //追加座標(角度, 距離, 角度指定をon)
  }, duration, "easing", callback);

指定の仕方は$.bezierCurve()の引数にスタート地点をx(横方向の座標), y(縦方向の座標)で指定し、addPointメソッドでさらに座標を追加していきます。
addPointの詳しい使い方は後述いたします。

jQueryのanimateのプロパティに新たにbezierPathが追加されておりますので、そこで$.bezierCurveの返り値を入れればOKです。

animateメソッドを拡張しているだけなので、もちろんopacity操作などの他のプロパティとの併用や、duration・easing・callback関数の使用もできます。

$.bezierCurve自体はaddPointで追加された座標を格納し、animate実行時に動作させるパスを生成するオブジェクトを返します。
ですので、ご使用される場合上記の様な使い方もありですが、下記のように一度変数に格納した方が使いやすいかもしれません。

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

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

Method

$.bezierCurveには下記の四つのメソッドがあります。

  • addPoint()
  • reverse()
  • rotate()
  • canvasSimulator()

ここでは、一つずつ説明していきます。

addPoint

$.bezierCurveを使用する際に必須のメソッドとなっております。
一度も指定されなかった場合、エラーは起こしませんが、要素は$.bezierCurveの引数に入れたスタート地点から一切動きません。

$.bezierCurve自体に指定したスタート地点の引数に続き指定された順に座標を格納していきます。
指定の仕方は下記のようにメソッドチェーンで指定することができます。

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

第三引数(is_angle)が未指定もしくは、falseだった場合、第一引数がx(横方向の座標)、第二引数がy(縦方向の座標)となります。
第三引数(is_angle)がtrueだった場合、第一引数をスタート地点の座標を基点とした角度、第二引数をスタート地点からの距離で指定することができます。
※角度はradian(弧度)ではなくdegree(度)でご指定ください。

指定した要素が実際に通過する座標は最初に$.bezierCurveの引数で指定したスタート地点と最後にaddPointで指定された座標になります。
途中にaddPointで指定された座標はすべてIllustratorのペンツールに例えるとハンドルとして判別されます。

reverse

一度格納したパスと反対方向から動かすことができます。

var path = $.bezierCurve(0, 0).addPoint(400, 200).addPoint(0, 370);

$("hoge").animate({bezierPath: path}, 3000)
  .animate({bezierPath: path.reverse()}, 3000);
DEMO2

上記のデモでは、上(0, 0)から下(0, 370)へパスを指定し、次のキューでreverse()を使用することにより、そのままパスをなぞってスタート地点へ戻しています。

また、下記のようにメソッドチェーンで他のメソッドと併用することも可能です。

var path = $.bezierCurve(0, 0).addPoint(400, 200).addPoint(0, 370);

$("hoge").animate({bezierPath: path}, 3000)
  .animate({
    bezierPath: path.reverse().rotate().canvasSimulator()
  }, 3000);

rotate

rotateメソッドはパスに応じて要素の角度を変化させるメソッドです。
下記の座標指定では、飛行機の角度を変えてアクロバット飛行させてみてます。

var path = $.bezierCurve(980, 200).addPoint(140, 800, true)
      .addPoint(260, 400, true)
      .addPoint(200, 800, true)
      .addPoint(160, 800, true)
      .addPoint(100, 800, true)
      .addPoint(270, 800, true)
      .addPoint(175, 1400, true);

$("hoge").animate({bezierPath: path.rotate()}, 5000, "easeInSine");
DEMO3

使い方はaddPointで座標を指定した後に、rotate()を実行するのみ。

rotate自体の処理としては、animate実行時に格納した座標に応じたパスを生成する処理に合わせ、現在地から次に移動する座標までの角度を取得するオブジェクトを返します。

また、下記のようにメソッドチェーンで他のメソッドと併用することも可能です。

var path = $.bezierCurve(980, 200).addPoint(140, 800, true)
      .addPoint(260, 400, true)
      .addPoint(200, 800, true)
      .addPoint(160, 800, true)
      .addPoint(100, 800, true)
      .addPoint(270, 800, true)
      .addPoint(175, 1400, true);

$("hoge").animate({
  bezierPath: path.rotate().reverse().canvasSimulator()
}, 5000, "easeInSine");

rotateメソッドの対応ブラウザはIE9以上となります。

canvasSimulator

このメソッドでは、自分の指定した座標位置と生成されたパスをcanvasを使用して視覚的にシミュレートすることできます。

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

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

canvasSimulatorメソッドの引数にはアニメーションをさせる要素の基準となる(position:relative もしくは position: absoluteの)親要素をjQueryオブジェクトで指定してください。
親要素が正しく指定されなかったり、引数が空だった場合は、canvasSimulatorは無視され通常動作のみが実行されます。

$.bezierCurveでは上記のように生成されたパスを要素の左上を基準にアニメーションさせます。
細かくパスを指定したいときなどにcanvasSimulatorを使用して、調整を行ってください。

canvasSimulator実行後にaddPointで座標を指定することは可能ですが、canvas上のパスには反映されません。
基本canvasSimulatorは最後に実行するものとしてください。

同親要素内で使用できるシミュレータは一つまでとなっています。
尚、canvasSimulatorメソッドはIE9以降よりご使用いただけます。

notes

やっぱN次ベジェ曲線だと、「どう指定したらどう動くのか」が直感的にわかりづらいですね。

当ページメインビジュアルの車の座標指定はちょっとしんどかったです。(笑

これからまた時間ができたら、Illustratorみたいにアンカーポイントとハンドルを別々に指定できるようにしたいと思ってます。
その他にもIE対応など、改善できる箇所は結構ありそうなので、のらりくらりと改修していきたいと思います。

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

ダウンロードはこちらから