3次ベジェ曲線を使った要素の曲線移動（アニメーション）

3次ベジェ曲線を使った要素の曲線移動（アニメーション）の方法をご紹介します。

デモ

次のデモは、始点を左下、終点を右上、制御点1を下中央、制御点2を右中央にした動きです。

サンプルコード

HTML

CSS

JavaScript

var getPointBezierCurve = function(t, x1, y1, x2, y2, x3, y3, x4, y4) {
									var tp = 1 - t;
									var x = t * t * t * x4 + 3 * t * t * tp * x3 + 3 * t * tp * tp * x2 + tp * tp * tp * x1;
									var y = t * t * t * y4 + 3 * t * t * tp * y3 + 3 * t * tp * tp * y2 + tp * tp * tp * y1;

return { x : x, y : y };
								};

$(function() {
									var $point = $('.sample .point');

startAnimate();
								});