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

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

デモ

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

サンプルコード

HTML

CSS

JavaScript

var getPointQuadraticCurve = function(t, x1, y1, x2, y2, x3, y3) {
									var tp = 1 - t;
									var x = t * t * x3 + 2 * t * tp * x2 + tp * tp * x1;
									var y = t * t * y3 + 2 * t * tp * y2 + tp * tp * y1;

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

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

var startPos = { x : 0,   y : 180 }; // 始点（座標）
									var endPos   = { x : 180, y : 0 };   // 終点（座標）
									var ctrlPos  = { x : 180, y : 180 }; // 制御点（座標）

startAnimate();
								});