最近做購物車功能，看到天貓上的購物車有元素拋物線運動效果，所以也想湊熱鬧實現(xiàn)一個。

網(wǎng)上搜索了一下，看了一下張鑫旭的《 小折騰：JavaScript與元素間的拋物線軌跡運動 》，原理張鑫旭已經(jīng)講的很清楚了，多說了也沒什么意思，就是數(shù)學公式。不過看代碼個人覺得有點變扭，那不是我的習慣，所以自己重新寫了一個。

先看demo： http://www.css88.com/demo/parabola/index.html

如何使用：

運動位移的元素必須設(shè)置為 position: absolute ，通過絕對定位控制 left ， top 來實現(xiàn)的；

首先你可以 new 一個對象：

		var bool = new Parabola({
		el: "#boll",
		offset: [500, 100],
		curvature: 0.005,
		duration: 3000,
		callback: function () {
		alert("完成后回調(diào)")
		},
		stepCallback: function (x, y) {
		console.log(x, y);
		$("<div>").appendTo("body").css({
		"position": "absolute",
		"top": this.elOriginalTop + y,
		"left": this.elOriginalLeft + x,
		"background-color": "#CDCDCD",
		"width": "5px",
		"height": "5px",
		"border-radius": "5px"
		});
		}
		});
	

參數(shù)說明：

方法：

.reset()

重置元素的位置

.start()

開始執(zhí)行動畫

.stop()

停止動畫

.setOptions(options)

重置options參數(shù)

先看demo： http://www.css88.com/demo/parabola/index.html

JS代碼：

		;
		(function () {
		var _$ = function (_this) {
		return _this.constructor == jQuery ? _this : $(_this);
		};
		// 獲取當前時間
		function now() {
		return +new Date();
		}
		// 轉(zhuǎn)化為整數(shù)
		function toInteger(text) {
		text = parseInt(text);
		return isFinite(text) ? text : 0;
		}
		var Parabola = function (options) {
		this.initialize(options);
		};
		Parabola.prototype = {
		constructor: Parabola,
		/**
		* 初始化
		* @classDescription 初始化
		* @param {Object} options 插件配置 .
		*/
		initialize: function (options) {
		this.options = this.options || this.getOptions(options);
		var ops = this.options;
		if (!this.options.el) {
		return;
		}
		this.$el = _$(ops.el);
		this.timerId = null;
		this.elOriginalLeft = toInteger(this.$el.css("left"));
		this.elOriginalTop = toInteger(this.$el.css("top"));
		// this.driftX X軸的偏移總量
		//this.driftY Y軸的偏移總量
		if (ops.targetEl) {
		this.driftX = toInteger(_$(ops.targetEl).css("left")) - this.elOriginalLeft;
		this.driftY = toInteger(_$(ops.targetEl).css("top")) - this.elOriginalTop;
		} else {
		this.driftX = ops.offset[0];
		this.driftY = ops.offset[1];
		}
		this.duration = ops.duration;
		// 處理公式常量
		this.curvature = ops.curvature;
		// 根據(jù)兩點坐標以及曲率確定運動曲線函數(shù)（也就是確定a, b的值）
		//a=this.curvature
		/* 公式： y = a*x*x + b*x + c;
		*/
		/*
		* 因為經(jīng)過(0, 0), 因此c = 0
		* 于是：
		* y = a * x*x + b*x;
		* y1 = a * x1*x1 + b*x1;
		* y2 = a * x2*x2 + b*x2;
		* 利用第二個坐標：
		* b = (y2+ a*x2*x2) / x2
		*/
		// 于是
		this.b = ( this.driftY - this.curvature * this.driftX * this.driftX ) / this.driftX;
		//自動開始
		if (ops.autostart) {
		this.start();
		}
		},
		/**
		* 初始化 配置參數(shù) 返回參數(shù)MAP
		* @param {Object} options 插件配置 .
		* @return {Object} 配置參數(shù)
		*/
		getOptions: function (options) {
		if (typeof options !== "object") {
		options = {};
		}
		options = $.extend({}, defaultSetting, _$(options.el).data(), (this.options || {}), options);
		return options;
		},
		/**
		* 定位
		* @param {Number} x x坐標 .
		* @param {Object} y y坐標 .
		* @return {Object} this
		*/
		domove: function (x, y) {
		this.$el.css({
		position: "absolute",
		left: this.elOriginalLeft + x,
		top: this.elOriginalTop + y
		});
		return this;
		},
		/**
		* 每一步執(zhí)行
		* @param {Data} now 當前時間 .
		* @return {Object} this
		*/
		step: function (now) {
		var ops = this.options;
		var x, y;
		if (now > this.end) {
		// 運行結(jié)束
		x = this.driftX;
		y = this.driftY;
		this.domove(x, y);
		this.stop();
		if (typeof ops.callback === 'function') {
		ops.callback.call(this);
		}
		} else {
		//x 每一步的X軸的位置
		x = this.driftX * ((now - this.begin) / this.duration);
		//每一步的Y軸的位置y = a*x*x + b*x + c;   c==0;
		y = this.curvature * x * x + this.b * x;
		this.domove(x, y);
		if (typeof ops.stepCallback === 'function') {
		ops.stepCallback.call(this);
		}
		}
		return this;
		},
		/**
		* 設(shè)置options
		*  @param {Object} options 當前時間 .
		*/
		setOptions: function (options) {
		this.reset();
		if (typeof options !== "object") {
		options = {};
		}
		this.options = this.getOptions(options);
		this.initialize('parabola', this.options);
		return this;
		},
		/**
		* 開始
		*/
		start: function () {
		var self = this;
		// 設(shè)置起止時間
		this.begin = now();
		this.end = this.begin + this.duration;
		if (this.driftX === 0 && this.driftY === 0) {
		// 原地踏步就別浪費性能了
		return;
		}
		/*timers.push(this);
		Timer.start();*/
		if (!!this.timerId) {
		clearInterval(this.timerId);
		this.stop();
		}
		this.timerId = setInterval(function () {
		var t = now();
		self.step(t);
		}, 13);
		return this;
		},
		/**
		* 重置
		*/
		reset: function (x, y) {
		this.stop();
		x = x ? x : 0;
		y = y ? y : 0;
		this.domove(x, y);
		return this;
		},
		/**
		* 停止
		*/
		stop: function () {
		if (!!this.timerId) {
		clearInterval(this.timerId);
		}
		return this;
		}
		};
		var defaultSetting = {
		el: null,
		//偏移位置
		offset: [0, 0],
		//終點元素，這時就會自動獲取該元素的left、top，設(shè)置了這個參數(shù)，offset將失效
		targetEl: null,
		//運動的時間，默認500毫秒
		duration: 500,
		//拋物線曲率，就是彎曲的程度，越接近于0越像直線，默認0.001
		curvature: 0.001,
		//運動后執(zhí)行的回調(diào)函數(shù)
		callback: null,
		// 是否自動開始，默認為false
		autostart: false,
		//運動過程中執(zhí)行的回調(diào)函數(shù)
		stepCallback: null
		};
		window.Parabola = Parabola;
		})();