空话不多说,先上DEMO~
http://jsrun.net/PxKKp?uid=483
再上源码~
https://github.com/Nelson2016…
运转的道理
很简单的一个小殊效,接下来来讲一下他的道理。
不言而喻,这小东西一定和抛物线一定有着割不开的情缘啦~
上图!
那末我们将跑速先零丁拿出来看:
起首抛物线嘛~得有本身的方程啊,就像本身的身份证一样。
我们假定抛物线的方程为 y = ax^2 + bx + c。
为了盘算轻易呢,我们另抛物线经由(0,0)这一点,那末c的值就为0了。
上图即为归零后的坐标系,对称轴直线为 x2 = -b / 2a.
在抛物线方程中,a值得正负代表着抛物线的启齿方向,那末a值的绝对值也和抛物线的启齿大小有着反比例的关联。那末a值我们即定位一个已知值作为参数传给活动。
到现在为止,y = ax^2 + bx + c;方程中的a值与c之就为已知了
那末抛物线对称轴的x值-x2 在肇端点坐标与尽头坐标已知的情况下是苛求的,那末x2变成已知量。
经由过程x2 = -b / 2a即可就出b值,那末全部抛物线方程我们就得出啦~
码代码
1.定义一个全局的对象。
nelsonAddtoCartAnimation{}
2.在nelsonAddtoCartAnimation中我们定义几个值:
a:"",//抛物线系数
b:"",//抛物线系数
c:"",//抛物线系数
startX:"",//肇端X坐标
startY:0,//实在Y坐标
endX:"",//尽头X坐标
endY:0,//尽头Y坐标
second:0,//动画总计时
speed:10,//动画速率
3.接下来我们用一个init函数来初始化这个‘小球’:建立“小球”的DOM,把它放到肇端位置,并盘算动画须要的时候。
function init(startX,endX,rC,txt){
if(!document.getElementById("nelsonATCAContainer")){
var _nelsonATCAContainer = document.createElement("div");
_nelsonATCAContainer.className = "nelsonATCAContainer";
_nelsonATCAContainer.id = "nelsonATCAContainer";
_nelsonATCAContainer.innerText = txt?txt:"";
_nelsonATCAContainer.style.left = startX + "px";
nelsonATCAControlBar.appendChild(_nelsonATCAContainer);
nelsonATCAContainer = _nelsonATCAContainer;
_nelsonATCAContainer = null;
his.startX = startX;
this.endX = endX;
this.formula(rC);
this.second = Math.abs(startX - endX) * this.speed / 1000;
return this;
}
}
4.盘算a、b、c的值:起首依据出发点、尽头坐标盘算对称轴的坐标centerX,然后依据a值和centerX值盘算b的值,因为我们强迫使抛物线经由(0,0)点,而现实中我们须要对抛物线举行挪动,依据抛物线尽头坐标和出发点坐标盘算c的值,终究获得抛物线方程。
function formula(rC){
var centerX = (this.startX - this.endX) / 2 + this.endX;
this.a = rC;
this.b = -2 * this.a * centerX;
this.c = -1 * this.a * this.startX * this.startX - this.b * this.startX;
}
5.最先漂移
function move(){
var that = this;
for(var i in prefixes){
nelsonATCAContainer.style[prefixes[i] + prefixes[i]?"A":"a" + "nimation"] = "moveAnimation " + that.second + "s forwards";
}
nelsonATCAContainer.style.display = "block";
var s = setInterval(function(){
var startLeft = nelsonATCAContainer.offsetLeft;
if(startLeft <= that.endX){
clearInterval(s);
that.resetPosition();
return that;
}
nelsonATCAContainer.style.left = startLeft - 1 + "px";
startLeft = nelsonATCAContainer.offsetLeft;
nelsonATCAContainer.style.top = that.a * startLeft * startLeft + that.b * startLeft + that.c + "px";
},that.speed)
}
6.功德圆满~