分享一些常用的定时器运动函数

//匀速运动的animate函数
 function animate(tag, target) {


    clearInterval(tag.timer);// 开始位置清除定时器防止加速


    tag.timer = setInterval(function () {


      var leader = tag.offsetLeft;// 元素当前位置


      var step = 9;
      //根据当前位置和目标位置之间的大小关系，设置step的正负


      step = leader > target ? -step : step;
      
      //有可能用户设置的步长无法正好运动到指定的目标位置


      //会导致，元素在目标位置左右来回运动，形成抽搐


      //我们可以通过判断leader和target之间的距离与step的大小关系来决定走多少


      if (Math.abs(leader - target) > Math.abs(step)) {


        leader = leader + step;// 简单运动公式 ： 元素的新位置 = 元素的当前位置 + 步长


        tag.style.left = leader + "px";// 将计算出的新位置设置给box
      } else {


        //说明当前元素与目标位置之间的距离不足一步，这时让元素直接运动到指定位置


        tag.style.left = target + "px";


        clearInterval(tag.timer);// 到达指定位置后，清除定时器
      }
    }, 20);
  }










//简单的缓动animate


  function animateEasy(tag, target) {


    clearInterval(tag.timer);//放止加速


    tag.timer = setInterval(function () {


      var leader = tag.offsetLeft;


      var step = (target - leader) / 10;


      //设置取整，保证元素可以进行运动


      step = step > 0 ? Math.ceil(step) : Math.floor(step);


      leader = leader + step;


      tag.style.left = leader + "px";


      if (leader == target) {//清除定时器


        clearInterval(tag.timer);
      }
    }, 20);
  }
  




  
  //可以让任意样式进行运动的animate


  function animateAnyStyle(tag, attr, target) {


    clearInterval(tag.timer);//放止加速


    tag.timer = setInterval(function () {


      var leader = parseInt(getStyle(tag, attr)) || 0;


      var step = (target - leader) / 10;


      //设置取整，保证元素可以进行运动


      step = step > 0 ? Math.ceil(step) : Math.floor(step);


      leader = leader + step;


      tag.style[attr] = leader + "px";


      if (leader == target) {//清除定时器


        clearInterval(tag.timer);
      }
    }, 20);
  }






  
   //可以让多个样式同时进行运动的animate


  function animate(tag, obj, fn) {   


    clearInterval(tag.timer);//放止加速


    tag.timer = setInterval(function () {


      var flag = true;//假设本次可以进行清除


      for (var k in obj) {


        //针对opacity和zIndex进行单独处理


        if (k == "opacity") {


          var target = obj[k] * 100;


          var leader = getStyle(tag, k) * 100 || 0;


          var step = (target - leader) / 10;


          //设置取整，保证元素可以进行运动


          step = step > 0 ? Math.ceil(step) : Math.floor(step);


          leader = leader + step;


          tag.style[k] = leader / 100;//缩小对应的倍数，并且去除单位
          
        } else if (k == "zIndex") {


          //zIndex不需要运动，只要进行修改设置即可


          tag.style.zIndex = obj[k];
          
        } else {


          //k - 属性名 - attr - 要修改的样式名


          //obj[k] - 属性值 - target - 要修改的样式的目标值


          var target = obj[k];


          var leader = parseInt(getStyle(tag, k)) || 0;


          var step = (target - leader) / 10;


          //设置取整，保证元素可以进行运动


          step = step > 0 ? Math.ceil(step) : Math.floor(step);


          leader = leader + step;


          tag.style[k] = leader + "px";
        }
        
        //如果有某一个样式没有运动到指定位置，阻止清除
        if (leader != target) {
          flag = false;
        }
      }
      if (flag) {
        clearInterval(tag.timer);
      
        fn && fn();
        
      }
    }, 20);
  }
  
  //由于获取标签任意样式的值
  function getStyle(tag, attr) {
    if (tag.currentStyle) {
      return tag.currentStyle[attr];
    } else {
      return getComputedStyle(tag, null)[attr];
    }
  }