JavaScript實現(xiàn)緩動動畫

更新時間：2020年11月25日 11:51:08 作者：Time_Ho

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)緩動動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

JavaScript原生定時器實現(xiàn)動畫的緩動效果，供大家參考，具體內(nèi)容如下

原理很簡單通過定時器修改邊距達到移動動畫效果

實現(xiàn)速度的變化

緩動必然移動速度會有變化,這里需要用到一個小公式或者說算法?

移動單位 = (指定移動位置邊距 - obj.offsetLeft) / 10;
var step = (ydpx - obj.offsetLeft) / 10;

有一個細節(jié)需要注意下:

移動的步數(shù)應(yīng)該去掉小數(shù),否者因為除法的原因無法移動到指定位置,會有一些差距
當step小于0對應(yīng)的是向左移動舍去小數(shù)如:1.2 為1
大于0向右移動,進位,如:1.2為2
這應(yīng)該是個數(shù)學(xué)問題**

之后代碼的實現(xiàn)就簡單多了：

//ydjl:移動到指定位置 (obj.offsetLeft)
function animate(obj,ydpx) {
 //清除定時器 防止每一次調(diào)用都產(chǎn)生一個定時器,疊加導(dǎo)致問題(速度變快)
 clearInterval(obj.timer); 
 obj.timer=setInterval(function () {
  var step = (ydpx - obj.offsetLeft) / 10; //移動距離
  //取整
  step = step>0 ? Math.ceil(step) : Math.floor(step);
  //判斷是否移動到指定位置
  if(obj.offsetLeft == ydpx)
  {
  //清除定時器,停止移動
   clearInterval(obj.timer);
  }
  //修改left實現(xiàn)移動
  obj.style.left = obj.offsetLeft + step + 'px';

 },15)//移動間隔設(shè)置
}

下面是演示:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  .boks{
   position: absolute;
   top: 300px;
   left:0;
   width: 100px;
   height: 100px;
   background-color: #ff0011;
  }
 </style>

</head>
<body>
<button class="yd500">移動500px</button>
<button class="yd800">移動800px</button>
<div class="boks">hezi</div>
</body>
<script>
 function animate(obj,ydpx) {
  //清除定時器
  clearInterval(obj.timer);
  obj.timer=setInterval(function () {
   var step = (ydpx - obj.offsetLeft) / 10;
   step = step>0 ? Math.ceil(step) : Math.floor(step);
    if(obj.offsetLeft == ydpx)
    {
     clearInterval(obj.timer);
    }
   obj.style.left = obj.offsetLeft + step + 'px';

  },15);
 }
 var yd500 = document.querySelector(".yd500");
 var yd800 = document.querySelector(".yd800");
 //盒子
 var boks = document.querySelector(".boks");

 yd500.addEventListener('click', function() {
  // 調(diào)用函數(shù)
  animate(boks, 500); //傳遞要移動的對象 和 移動位置
 })

 yd800.addEventListener('click', function() {
  // 調(diào)用函數(shù)
  animate(boks, 800); //傳遞要移動的對象 和 移動位置
 })
</script>
</html>

萌新小白的學(xué)習(xí)記錄