用JavaScript写缓动动画

效果如下：

<button>200</button><button>400</button>
<div class="box"></div>
<script>
//需求：制作缓动动画，方块是缓缓的停下
//1.获取相关元素
var btnArr = document.getElementsByTagName("button");
var box = document.getElementsByClassName("box")[0];
//2.绑定事件
btnArr[0].onclick = function (){
	animate(box,200);
}
btnArr[1].onclick = function (){
	animate(box,400);
}
//3.书写相关事件程序
//ele为事件元素，target为目标值
function animate (ele,target){
	//在书写定时器之前需要清除原来存在的定时器
	clearInterval(ele.timer);
	ele.timer = setInterval(function(){
		//设置步长，步长逐渐减少
		var step = (target-ele.offsetLeft)/10;
		//判断最后几个step的值是否大于0，因为在获取offsetLeft时会产生四舍五入，影响步长，从而方块到不了目标值。
		step = step>0?Math.ceil(step):Math.floor(step);
		//为盒子设置每次移动的距离
		ele.style.left = ele.offsetLeft + step + "px";
		var val  = target-ele.offsetLeft;
		if(Math.abs(val)<=Math.abs(step)){
			ele.style.left = target + "px";
			clearInterval(ele.timer);
		}
	},50)
}
</script>