缓冲运动的特性
- 逐渐变慢，最后停止
- 距离越远速度越大
- 速度由距离决定
- 速度=（目标值-当前值）/缩放系数
距离大，速度大。
距离小，速度小。
速度和距离成正比。
缓冲运动的时候速度一定要取整，如果速度0.9的话，不取整会直接变成0；速度大于0应向上取整，小于0应向下取整。
下面我们就来做一个div从0移动到300的缓冲运动，做一个div从600移动到300的缓冲运动。
代码实现缓冲运动
<!DOCTYPE html>
<html>
<head>
<title>缓冲运动</title>
<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
/* left: 0; */
left: 600px;
top: 50px;
}
#div2{
/* 300位置的参考线 */
width: 1px;
height: 300px;
position: absolute;
left: 300px;
top: 0;
background: #000;
}
</style>
<script>
window.onload=function(){
var oBtn=document.getElementById("btn1");
oBtn.onclick=function(){
startMove();
}
}
function startMove(){
var oDiv=document.getElementById("div1");
setInterval(function(){
var speed=(300-oDiv.offsetLeft)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);//取整
oDiv.style.left=oDiv.offsetLeft+speed+"px";
},30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="开始运动" />
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。