js动画学习（二）

四、简单动画之缓冲运动

     

      实现速度的缓冲，即不同位置的速度不同，越靠近目标值速度越小，所以速度值与目标值与当前值之差成正比。这里要注意一个问题就是物体在运动中速度是连续变化的，不是按照整数变化的，当物体停止时由于小数的原因，位置可能不会回到原起点，会差一点，所以缓冲运动里变化的速度要取整。

//鼠标移到元素上元素右移，鼠标离开元素回去。
var timer="";
function Move(locat) {//移动终点位置
    var ob=document.getElementById('box1');
    clearInterval(timer);
    timer=setInterval(function () {
        var speed=(locat-ob.offsetLeft)/10;//speed的大小和移动距离成正比，分母控制缓冲的快慢，即比例系数K，可调整
        speed=speed>0?Math.ceil(speed):Math.floor(speed);//凡是缓冲运动速度一定要取整！！！向右运动时坐标向上取整，向左运动时坐标向下取整
        if (ob.offsetLeft==locat) {//当前位置到达指定终点，关闭定时器
            clearInterval(timer);            
        } else {
            ob.style.left=ob.offsetLeft+speed+'px';
        }
    }, 30)
}

      在下面的HTML文档里调用上面的JS函数。还用上次的那个div为例：

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    
    #box1{
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        left: 0;
    }
    
</style>

<div id="box1"></div>
<script type="text/javascript">
    window.onload=function(){
        var ob=document.getElementById('box1');
        ob.onmouseover=function(){
            Move(200);
        }  
        ob.onmouseout=function(){
            Move(0);
        }  
    }
</script>