js动画学习（二）-白红宇

js动画学习（二）

阅读量：5302 次

发布时间：2019-06-14

本文共 832 字，大约阅读时间需要 2 分钟。

四、简单动画之缓冲运动

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

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

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

1 
     
 2

转载于:https://www.cnblogs.com/csxiaoyu/p/5203436.html

你可能感兴趣的文章

在16aspx.com上下了一个简单商品房销售系统源码，怎么修改它的默认登录名和密码...