JS 运动学习（二）缓冲运动

缓冲运动就是速度会逐渐变慢的过程，看起来比较弹性，比匀速运动看起来爽，适用范围也广。

和匀速运动最主要的区别就是速度是动态变化的。目标到自身的距离是随着运动减小的，所以我们可以把速度设成这个距离除以一个数，这样速度就可以慢慢减小了。

以上一篇“分享到”为例。

<script type="text/javascript">
	var timer;
	function startMove(left){
		clearInterval(timer);
		var oDiv1=document.getElementById('div1');
		timer=setInterval(function(){
			var speed=(left-oDiv1.offsetLeft)/10;   //我们将速度设成距离/10，这样可以省去判断正负
			if(oDiv1.offsetLeft==left){
				clearInterval(timer);
			}
			else{
				oDiv1.style.left= oDiv1.offsetLeft+speed+'px';
			}
	        },30);
	}
</script>

但是通过运行代码，我们会发现div总是运动不到目的地就停下来了，这是为什么呢？

速度是除法计算后的数，所以到最后的时候基本变成了小数，比如倒数第二步我们算出的速度是0.8，注意了，单位是像素，最小的单位了，

小数不会四舍五入，而是直接舍弃，所以我们得到的speed会是0！我们明明还没到终点，速度却已经成了0。

所以，我们需要向上取整，函数Math.ceil()是向上去整，使小数变成整数，因为没到终点，我们不能让它停下来。

这时候，向右滑动分毫不差了，然而向左滑动有了问题，因为-0.5向上取整是0！所以，对于负数，我们需要向下取整 Math.floor()。
我们在speed处做一个判断，

if(speed>0){
	speed=Math.ceil(speed);
}
else{
	speed=Math.floor(speed);
}

写成三目运算符的形式：

<script type="text/javascript">
var timer;
function startMove(left){
	clearInterval(timer);
        var oDiv1=document.getElementById('div1');
		timer=setInterval(function(){      //Math.ceil()向上去整   Math.floor()向下去整
			var speed=(left-oDiv1.offsetLeft)/10;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);  //三目运算符
			/*if(speed>0){
				speed=Math.ceil(speed);
			}
			else{
				speed=Math.floor(speed);
			}*/
			if(oDiv1.offsetLeft==left){
				</span>clearInterval(timer);
			}
			else{
				oDiv1.style.left= oDiv1.offsetLeft+speed+'px';
			}
		},30);
	}
	window.οnlοad=function(){
		var oDiv1=document.getElementById('div1');
		oDiv1.οnmοuseοver=function(){
			startMove(0);
		}
		oDiv1.οnmοuseοut=function(){
			startMove(-120);
		}
	}
</script>

缓冲运动的思想大抵如此，我们需要注意的是，在有除法的地方需要多思考几秒，像素必须是整数，不然也可能出现元素抖动等异常动作。