弹性运动——学习笔记

运动在js中，只需要开了个定时器，并且不断的改变对象的left和top值就可以了。当然，对象必须是相对定位的元素。js代码如下，例1：

<pre class="javascript" name="code">window.onload=function(){
var oDiv=document.getElementById('div');
var oBtn=document.getElementById('btn');
var left=0;

oBtn.onclick=function(){
setInterval(function(){
left+=5;
oDiv.style.left=left+'px';
},30)
};
};

在上例中可以发现对象每隔30毫秒就改变一下自身的left值，+5的匀速增值下去。我们可以设置一个变量做为速度来代替5，代码如下，例2：

window.onload=function(){
var oDiv=document.getElementById('div');
var oBtn=document.getElementById('btn');
var left=0;
var iSpeed=5;

oBtn.onclick=function(){
setInterval(function(){
left+=iSpeed;
oDiv.style.left=left+'px';
},30)
};
};

在运动过程中，距离和位置决定运动的轨迹，速度决定物体运动的快慢。在上面代码的基本上，制作一个left值在0到300之间的来回运动效果。代码如下，例3：

window.onload=function(){
var oDiv=document.getElementById('div');
var oBtn=document.getElementById('btn');
var left=0;
var iSpeed=0;
oBtn.onclick=function(){
setInterval(function(){
if(left<300){
iSpeed++;
}else{
iSpeed--;
}

left+=iSpeed;
oDiv.style.left=left+'px';
//document.title=iSpeed;
},30)
};
};

从代码上可以看出，对象在0到300之间匀速运动。 怎么就能让对象慢慢的停下来呢，只有当速度越来越小，只到为零时，对象就停下来了。这就是所谓的摩擦力。代码如下，例4：

window.onload=function(){
var oDiv=document.getElementById('div');
var oBtn=document.getElementById('btn');
//var left=0;
var iSpeed=20;
oBtn.onclick=function(){
setInterval(function(){
iSpeed*=0.95;
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
},30)
}
};

把例3改造一下，让对象燥起来，代码如下，例5：

window.onload=function(){
var oDiv=document.getElementById('div');
var oBtn=document.getElementById('btn');
var left=0;
var iSpeed=0;
oBtn.onclick=function(){
setInterval(function(){
if(left<300){
iSpeed+=300-left;

}else{
iSpeed-=left-300;
}

left+=iSpeed;
oDiv.style.left=left+'px';
//alert(iSpeed+',left:'+left);
},30)
};
};

显然这样不太合适，iSpeed的值分别是0和300，改造一下，让它们的值分别除上一个整数，速度就会有所变化。

//...
iSpeed+=(300-left)/5;
//...
iSpeen-=(left-300)/5;
//对上行进行数学运算改造下，同时加负号变为:iSpeed+=(300-left)/5;发现和第一行一样，所以这里是不需要if语句的。

现在把代码再整合一下，如下：

window.onload=function(){
var oDiv=document.getElementById('div');
var oBtn=document.getElementById('btn');
var left=0;
var iSpeed=0;
var timer=null;
oBtn.onclick=function(){
timer=setInterval(function(){
iSpeed+=(300-left)/5;
iSpeed*=0.7
left+=iSpeed;
oDiv.style.left=left+'px';
//alert('速度：'+iSpeed+',左边:'+left);
if(Math.round(iSpeed)==0 && Math.round(left)==300){
clearInterval(timer);
}
},30)
};
};

弹性运动的功能到这就要结束了。再来做个代码整理吧。做一个小小闭包吧。

;(function(global){
var left=0;
var iSpeed=0;
var timer=null;
global.moveSpring=function(obj,iTarget){
clearInterval(timer);
timer=setInterval(function(){
iSpeed+=(iTarget-left)/5;
iSpeed*=0.7;
left+=iSpeed;
obj.style.left=Math.round(left)+'px';
if(Math.round(iSpeed)==0 && Math.round(left)==iTarget)
{
clearInterval(timer);
}
},30)
}
})(window)

(function(global){....})(window)这里是把window当做参数传进闭包内，有global来接受参数，然后给global添加一个属性方法。也就是给window添加一个属性方法，这样的好处是闭包内凡是用到window的地方都不用再向外层查找了；只在进入闭包时找一次，内部就都可以用到了。提高效率。