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

以你之姓@ 2022-06-18 09:53 198阅读 0赞

//匀速运动的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\];  
    \}  
  \}