JSFiddle - React, Tailwind, and code Playground

by tu genhua

HTML

<div class="btns" style="margin-top:20px">
		<a href="#" id="reset">重置</a>
		<a href="#" id="run">开始运动</a>
		<a href="#" id="stop">停止运动</a>
		<a href="#" id="setOptions">设置配置参数</a>
	</div>
	<div id="boll" class="boll"></div>
	<div id="target" class="target"></div>

CSS

.boll{position:absolute;left:100px;top:350px;border-radius:50px;width:50px;height:50px;background:red;}
	 .target{position:absolute;left:600px;top:180px;border-radius:50px;width:50px;height:50px;background:#CDCDCD;}

JavaScript

/*
 * 实现抛物线函数 Parabola
 * 切记既然是抛物线运动，那么运动的元素需要绝对定位
 * 具体了解抛物线 可以看张鑫旭的文章 
 * http://www.zhangxinxu.com/wordpress/2013/12/javascript-js-%E5%85%83%E7%B4%A0-%E6%8A%9B%E7%89%A9%E7%BA%BF-%E8%BF%90%E5%8A%A8-%E5%8A%A8%E7%94%BB/
 */
var Parabola = function(opts){
	this.init(opts);
};
Parabola.prototype = {
	constructor: Parabola,
	/*
	 * @fileoverview 页面初始化
	 * @param opts {Object} 配置参数
	 */
	init: function(opts){
		this.opts =  $.extend(defaultConfig, opts || {});
		// 如果没有运动的元素 直接return
		if(!this.opts.el) {
			return;
		}
		// 取元素 及 left top
		this.$el = $(this.opts.el);
		this.$elLeft = this._toInteger(this.$el.css("left"));
		this.$elTop = this._toInteger(this.$el.css("top"));
		// 计算x轴，y轴的偏移量
		if(this.opts.targetEl) {
			this.diffX = this._toInteger($(this.opts.targetEl).css("left")) - this.$elLeft;
			this.diffY = this._toInteger($(this.opts.targetEl).css("top")) - this.$elTop;
		}else {
			this.diffX = this.opts.offset[0];
			this.diffY = this.opts.offset[1];
		}
		// 运动时间
		this.duration = this.opts.duration;
		// 抛物线曲率
		this.curvature = this.opts.curvature;
		
		// 计时器
		this.timerId = null;
		/*
		 * 根据两点坐标以及曲率确定运动曲线函数（也就是确定a, b的值）
		 * 公式： y = a*x*x + b*x + c;
		 * 因为经过(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.diffY - this.curvature * this.diffX * this.diffX) / this.diffX;

		 // 是否自动运动
		 if(this.opts.autostart) {
			 this.start();
		 }
	},
	/*
	 * @fileoverview 开始
	 */
	start: function(){
		// 开始运动
		var self = this;
		// 设置起始时间 和 结束时间
		this.begin = (new Date()).getTime();
		this.end = this.begin + this.duration;
		
		// 如果目标的距离为0的话 就什么不做
		if(this.diffX === 0 && this.diffY === 0) {
			return;
		}
		if(!!this.timerId) {
			clearInterval(this.timerId);
			this.stop();
		}
		// 每帧（对于大部分显示屏）大约16~17毫秒。默认大小是166.67。也就是默认10px/ms
		this.timerId = setInterval(function(){
			var t = (new...