使用原生JS实现动画-匀速动画

Posted on   |   In   |     |  

    其实动画效果无非就是根据时间一直移动而已，只不过移动的快而已，所以肯定需要通过定时器来实现，
下面的实现主要有几个点：

  • 效果是实现一个对象（obj）移动到目标位置（target)
  • 用之前先清一下定时器，防止导致出现存在多个定时器，无法停下来，导致出现bug;
  • 定时器间隔设为25ms是因为现在主流的大多是25ms效果比较好一点，具体你也可以根据需要改变;
  • step是指的步长，也就是每25ms走的距离，同样这个step也是可以调整的，step在这里做判断是因为目标位置有时候会小于对象现在所处的位置，也就是target < leader,这时就需要step变为负值了。
  • 清除定时器的时间点判断-当目标位置与现在的位置的差值小于step的时候，清除，需要使用Math.abs是因为step有可能是负值
    下面是具体代码实现：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function animate(obj,target) {  //匀速动画
         clearInterval(obj.timer);   //用之前先清定时器
         obj.timer = setInterval(function(){
                     var leader = obj.offsetLeft,
                         step = 20;
                     step = leader < target ? step : -step;  //根据当前位置与目标位置的大小来确定步长的正负；
             if (Math.abs(leader - target) > Math.abs(step)) {
                 obj.style.left = leader + step + "px"; //注意加上px
             } else {
                 clearInterval(obj.timer);
                 //手动将快要到达终点的对象放到终点,保证最终停在目标位置
                 obj.style.left = target + "px";
             }
         }, 25)
     }

下面是使用这个封装的animate实现的匀速动画效果;