JS实现匀速动画

摘自：http://www.jb51.net/article/95211.htm

1、匀速运动主要实现原理：

通过setInterval函数控制每n毫秒运动的距离x，在快要达到指定位置时，判断步长x于此刻距目标位置的距离distance。如果x>distance，则直接定位到目标位置，这样做是为了避免步长和总距离不是整数倍关系而产生最后到达位置和目标位置有差值的错误。

2、缓冲运动主要实现原理：

缓冲运动的基本函数是和匀速运动一样的，只是缓冲运动的步长我们是通过和目标位置的距离来确定的，这样我们的步长是不断变小的，从而实现缓冲运动的效果。在确定步长的时候我们使用Math.ceil和Math.floor对步长值进行取整是为了避免出现小数，因为如果出现小数后面最后到达的位置肯定是和目标位置有误差的。

html部分：

css部分：

*{ 
  margin: 0px; 
  padding: 0px; 
} 
.box{ 
  width: 100px; 
  height: 100px; 
  background-color: green; 
  position: relative; 
  margin-top: 10px; 
}

js部分：

window.onload=function () { 
  var btn1 = document.getElementById('move1'); 
  var btn2 = document.getElementById('move2'); 
  var box1 = document.getElementById('box1'); 
  var box2 = document.getElementById('box2'); 
  btn1.onclick = function () { 
    animate1(box1,500); 
  } 
  btn2.onclick = function () { 
    animate2(box2,500); 
  } 
  //匀速动画 
  function animate1(ele,target){ 
    //要用定时器，先清除定时器 
    //一个盒子只能有一个定时器，这样儿的话，不会和其他盒子出现定时器冲突 
    //而定时器本身讲成为盒子的一个属性 
    clearInterval(ele.timer); 
    //我们要求盒子既能向前又能向后，那么我们的步长就得有正有负 
    //目标值如果大于当前值取正，目标值如果小于当前值取负 
    var speed = target>ele.offsetLeft?3:-3; 
    ele.timer = setInterval(function () { 
      //在执行之前就获取当前值和目标值之差 
      var val = target - ele.offsetLeft; 
      ele.style.left = ele.offsetLeft + speed + "px"; 
      //目标值和当前值只差如果小于步长，那么就不能再前进了 
      //因为步长有正有负，所有转换成绝对值来比较 
      console.log(val); 
      if(Math.abs(val)<=Math.abs(speed)){ 
        ele.style.left = target + "px"; 
        clearInterval(ele.timer); 
  
      } 
    },30); 
  } 
  
  //缓动动画封装 
  function animate2(ele,target) { 
    clearInterval(ele.timer); //清楚历史定时器 
    ele.timer = setInterval(function () { 
      //获取步长 确定移动方向(正负值) 步长应该是越来越小的，缓动的算法。 
      var step = (target-ele.offsetLeft)/10; 
      //对步长进行二次加工(大于0向上取整,小于0项下取整) 
      step = step>0?Math.ceil(step):Math.floor(step); 
      //动画原理： 目标位置 = 当前位置 + 步长 
      console.log(step); 
      ele.style.left = ele.offsetLeft + step + "px"; 
      //检测缓动动画有没有停止 
      if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){ 
        ele.style.left = target + "px"; //直接移动指定位置 
        clearInterval(ele.timer); 
      } 
    },30); 
  } 
  
  
}