JavaScript實(shí)現(xiàn)緩動(dòng)動(dòng)畫

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

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

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

原理很簡單通過定時(shí)器修改邊距達(dá)到移動(dòng)動(dòng)畫效果

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

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

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

有一個(gè)細(xì)節(jié)需要注意下:

移動(dòng)的步數(shù)應(yīng)該去掉小數(shù),否者因?yàn)槌ǖ脑驘o法移動(dòng)到指定位置,會有一些差距
當(dāng)step小于0對應(yīng)的是向左移動(dòng)舍去小數(shù)如:1.2 為1
大于0向右移動(dòng),進(jìn)位,如:1.2為2
這應(yīng)該是個(gè)數(shù)學(xué)問題**

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

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

 },15)//移動(dòng)間隔設(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">移動(dòng)500px</button>
<button class="yd800">移動(dòng)800px</button>
<div class="boks">hezi</div>
</body>
<script>
 function animate(obj,ydpx) {
  //清除定時(shí)器
  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); //傳遞要移動(dòng)的對象 和 移動(dòng)位置
 })

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

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