弹性运动——学习笔记

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

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

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

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

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

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

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

window.οnlοad=function(){
	var oDiv=document.getElementById('div');
	var oBtn=document.getElementById('btn');
	var left=0;
	var iSpeed=0;
	oBtn.οnclick=function(){
		setInterval(function(){
			if(left<300){
				iSpeed++;
			}else{
				iSpeed--;
			}
			
			left+=iSpeed;
			oDiv.style.left=left+'px';
			//document.title=iSpeed;
		},30)
	};	
};

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

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

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

window.οnlοad=function(){
	var oDiv=document.getElementById('div');
	var oBtn=document.getElementById('btn');
	var left=0;
	var iSpeed=0;
	oBtn.οnclick=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.οnlοad=function(){
	var oDiv=document.getElementById('div');
	var oBtn=document.getElementById('btn');
	var left=0;
	var iSpeed=0;
	var timer=null;
	oBtn.οnclick=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的地方都不用再向外层查找了；只在进入闭包时找一次，内部就都可以用到了。提高效率。