javaScript - 动画函数

1.动画函数的封装

  // 给不同元素指定不同的定时器
  function animate(obj,target) {
    // 当我们不断点击按钮是时，span元素运动速度会越来越快，因为开启了太多定时器
    // 为了让元素只有一个定时器执行，我们要先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer)
    obj.timer = setInterval(function () {
      // 将步长改为整数
      var step = (target - obj.offsetLeft) / 10;
      step = step > 0 ? Math.ceil(step) : Math.floor(step)
      if (obj.offsetLeft == target) {
        // 停止动画本质是停止定时器
        clearInterval(obj.timer)
      }
      // 每次加1 这个步长值改为一个慢慢变小的值 步长公式(目标值 - 现在位置) / 10
      obj.style.left = obj.offsetLeft + step + 'px';
    }, 30);
  }