javascript封裝動畫函式(勻速、變速)

程式碼在路上發表於2020-11-15

勻速動畫函式--------任意一個元素移動到指定的目標位置(水平方向)

function animate(element,target){
   //先清理定時器
   clearInterval(element.timeId);
   //定時器的id儲存到物件的一個屬性中,為了清理定時器(只能產生一個定時器)
   element.timeId=setInterval(function(){
      //獲取元素的當前位置
      var current=element.offsetLeft;
      //元素每次移動多少畫素
      var step=10;
      //判斷是向左走還是向右走
      step=current<target?step:-step;
      //每次移動後的距離
      current+=step;
      //判斷當前移動後的位置是否到達目標位置
      if(Math.abs(target-current)>Math.abs(step)){
         element.style.left=current+"px";
      }else{
         //清理定時器
         clearInterval(element.timeId);
         element.style.left=target+"px";
      }
   },20);
}

變速動畫函式(緩動動畫)--------任意一個元素移動到指定的目標位置(水平方向)

function animate(element,target){
   //先清理定時器
   clearInterval(element.timeId);
   //定時器的id儲存到物件的一個屬性中,,為了清理定時器
   element.timeId=setInterval(function(){
      //獲取元素的當前位置
      var current=element.offsetLeft;
      //元素每次移動多少畫素
      var step=(target-current)/10;
      //判斷是向左走還是向右走
      step=step>0?Math.ceil(step):Math.floor(step);
      //每次移動後的距離
      current+=step;
      element.style.left=current+"px";
      if(current==target){
         //清理定時器
         clearInterval(element.timeId);
      }
   },20);
}

相關文章