弹性运动——学习笔记

运动在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.7left+=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的地方都不用再向外层查找了；只在进入闭包时找一次，内部就都可以用到了。提高效率。