js缓冲运动

 

缓冲运动

现象：逐渐变慢，最后停止

原理：距离越远，速度越大

 

速度的计算方式：

1，速度由距离决定

2，速度＝（目标值-当前值）/缩放系数

说明：速度为正负数时，也决定了物体移动的方向

 

示例：div缓冲运动

Bug: 1,div向右运动时，无法到达指定位置 解决：速度向上取整,Math.ceil()

2,div向左运动时，无法到达指定位置 解决：速度向下取整，Math.floor()

原因：速度为小数时，造成的

 

总结：但凡做缓冲运动时，速度一定要取整 速度为正，向上取整 速度为负，向下取整

 

注意：此时不需要用if/else隔开，因为速度最后会变成0,停止下来的

 

html部分 

<input type="button" value="开始移动"　id="btn1" onclick="moveStart();" />
<div id="div1"></div>
<div id="div2"></div>

<style>
#div1 { position:absolute; left:600px; width:100px; height:100px; background:red;}
#div2 { width:1px; height:200px; position:absolute; left:300px; background:black;}
</style>

js部分

<script>
var timer = null;
var speed;
function moveStart(){
	var oDiv = document.getElementById("div1");
	clearInterval(timer);
	timer = setInterval(function(){
		speed = (300 - oDiv.offsetLeft)/10;
		//speed = Math.ceil(speed);	//向上取整
		//speed = Math.floor(speed);	//向下取整
		speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
		
		oDiv.style.left = oDiv.offsetLeft + speed + "px";
		document.title = oDiv.offsetLeft + speed;		
	},30);
	
}
</script>