JavaScript实现的抛物线运动效果
原文：http://www.css88.com/archives/5355
作者的主要实现代码：
;
(function () {
var _$ = function (_this) {
return _this.constructor == jQuery ? _this : $(_this);
};
// 获取当前时间
function now() {
return +new Date();
}
// 转化为整数
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;
// 根据两点坐标以及曲率确定运动曲线函数（也就是确定a, b的值）
//a=this.curvature
/* 公式： 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.driftY - this.curvature * this.driftX * this.driftX ) / this.driftX;
//自动开始
if (ops.autostart) {
this.start();
}
},
/**
* 初始化 配置参数 返回参数MAP
* @param {Object} options 插件配置 .
* @return {Object} 配置参数
*/
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;
},
/**
* 每一步执行
* @param {Data} now 当前时间 .
* @return {Object} this
*/
step: function (now) {
var ops = this.options;
var x, y;
if (now > this.end) {
// 运行结束
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;
},
/**
* 设置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;
// 设置起止时间
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，设置了这个参数，offset将失效
targetEl: null,
//运动的时间，默认500毫秒
duration: 500,
//抛物线曲率，就是弯曲的程度，越接近于0越像直线，默认0.001
curvature: 0.001,
//运动后执行的回调函数
callback: null,
// 是否自动开始，默认为false
autostart: false,
//运动过程中执行的回调函数
stepCallback: null
};
window.Parabola = Parabola;
})();使用：
var bool = new Parabola({
el: "#boll",
offset: [500, 100],
curvature: 0.005,
duration: 3000,
callback: function () {
alert("完成后回调")
},
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"
});
}
});demo地址： http://www.css88.com/demo/parabola/index.html
demo内容：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>抛物线运动效果</title>
<style type="text/css">
.boll {
width: 50px;
height: 50px;
background-color: #ff3333;
position: absolute;
top: 380px;
left: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.target {
width: 50px;
height: 50px;
background-color: #CDCDCD;
position: absolute;
top: 180px;
left: 600px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
</style>
<script type="text/javascript" src="http://www.css88.com/jqapi-1.9/js/jquery.min.js"></script>
<script type="text/javascript" src="js/parabola.js"></script>
</head>
<body>
<div class="btns" style="margin-top:20px">
<a href="http://www.css88.com/archives/5355" target="_blank">回到JavaScript实现的抛物线运动效果</a>
</div>
<div class="btns" style="margin-top:20px">
<a href="#" class="btnA btn-danger" id="reset" rel="popover" title="A Title" style="">reset</a>
<a href="#" class="btnA btn-danger" id="run" rel="popover" title="A Title" style="">run</a>
<a href="#" class="btnA btn-danger" id="stop" rel="popover" title="A Title" style="">stop</a>
<a href="#" class="btnA btn-danger" id="setOptions" rel="popover" title="A Title" style="">setOptions</a>
</div>
<div id="boll" class="boll"></div>
<div id="target" class="target"></div>
<script type="text/javascript">
var bool = new Parabola({
el: "#boll",
offset: [500, 100],
curvature: 0.005,
duration: 3000,
callback:function(){
alert("完成后回调")
},
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"
});
}
});
$("#reset").click(function (event) {
event.preventDefault();
bool.reset()
});
$("#run").click(function (event) {
event.preventDefault();
bool.start();
});
$("#stop").click(function (event) {
event.preventDefault();
bool.stop();
});
$("#setOptions").click(function (event) {
event.preventDefault();
bool.setOptions({
targetEl: $("#target"),
curvature: 0.001,
duration: 1000
});
});
</script>
</body>
</html>
另外一个仿天猫的抛物线效果，原作者地址： https://github.com/amibug/fly
demo: http://codepen.io/hzxs1990225/full/ogLaVp
<script src="jquery.js"></script>
<script src="dist/jquery.fly.min.js"></script>
<script>
jQuery(function($) {
$('#fly').fly({
start:{
left: 11, //开始位置（必填）#fly元素会被设置成position: fixed
top: 600, //开始位置（必填）
},
end:{
left: 500, //结束位置（必填）
top: 130, //结束位置（必填）
width: 100, //结束时高度
height: 100, //结束时高度
},
autoPlay: false, //是否直接运动,默认true
speed: 1.1, //越大越快，默认1.2
vertex_Rtop：100, //运动轨迹最高点top值，默认20
onEnd: function(){} //结束回调
});
$('#fly').play(); //autoPlay: false后，手动调用运动
$('#fly').destory(); //移除dom
});
</script>
IE10以下，引入src/requestAnimationFrame.js
(function () {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame){
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () {
callback(currTime + timeToCall);
},
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame){
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}
}());