动画函数封装

Posted 2021-05-16 她还会来吗

函数封装

话不多说,直接上代码

function animate(obj,target,callback){
    //对于存在按钮点击后,开启器定时器的情况下, 当我们不断的点击按钮,元素的速度就会越来越快,因为开启了太多的定时器
    // 解决方案:当我们开启下一个定时器的时候,清除上一个定时器
    clearInterval(obj.timer);
    // 给不同元素设置不同定时器,提高运行效率
    obj.timer = setInterval(function(){
      // 计算步长:(目标值-现在的位置)/10 作为每次移动的距离 
        var step = (target-obj.offsetLeft)/10;
        step = step > 0 ? Math.ceil(step):Math.floor(step);
          if(obj.offsetLeft==target)
          {    //停止动画,本质是停止定时器
              clearInterval(obj.timer);
            //   if(callback)
            //   {
            //       callback();
            //   }
            callback&&callback();

          }
          else{
              obj.style.left = obj.offsetLeft + step + 'px';
          }
    },15);
}

注意:使用该函数时,给元素一定要加定位,不然不会产生想要的效果