JS實現(xiàn)勻速與減速緩慢運動的動畫效果封裝示例

發(fā)布時間：2020-08-30 06:04:02 來源：腳本之家閱讀：500 作者：心郎欄目：web開發(fā)

本文實例講述了JS實現(xiàn)勻速與減速緩慢運動的動畫效果。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>www.jb51.net JS勻速/減速運動</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box1 {
      width: 100px;
      height: 100px;
      background-color: pink;
      margin-top: 10px;
      position: relative;
    }
    .box2 {
      width: 100px;
      height: 100px;
      background-color: red;
      margin-top: 10px;
      position: relative;
    }
  </style>
</head>
<body>
<button>勻速移動</button>
<button>減速移動</button>
<div class="box1" ></div>
<div class="box2" ></div>
<script>
  // 動畫原理 = 盒子位置 + 步長。
  //   1.閃動。 （瞬間到達）
  //   2.勻速。 （每次走一樣距離）
  //   3.緩動。 （開始特快越走越慢，步長越來越?。?  //        （類似剎車，電梯停止，壓縮彈簧...）
  // 好處：
  //   1.有非常逼真的緩動效果，實現(xiàn)的動畫效果更細膩。
  //   2.如果不清除定時器，物體永遠跟著目標在移動。
  var box1 = document.getElementsByClassName("box1")[0];
  var box2 = document.getElementsByClassName("box2")[0];
  var but1 = document.getElementsByTagName("button")[0];
  var but2 = document.getElementsByTagName("button")[1];
  console.log(box1.offsetLeft);
  but1.onclick = function () {
    animate1(box1,200);
  }
  but2.onclick = function () {
    animate2(box2,500);
  }
  //勻速動畫
  function animate1(ele,target){
    //要用定時器，先清除定時器
    //一個盒子只能有一個定時器，這樣兒的話，不會和其他盒子出現(xiàn)定時器沖突
    //而定時器本身講成為盒子的一個屬性
    clearInterval(ele.timer);
    //我們要求盒子既能向前又能向后，那么我們的步長就得有正有負
    //目標值如果大于當(dāng)前值取正，目標值如果小于當(dāng)前值取負
    var speed = target>ele.offsetLeft?3:-3;
    ele.timer = setInterval(function () {
      //在執(zhí)行之前就獲取當(dāng)前值和目標值之差
      var val = target - ele.offsetLeft;
      ele.style.left = ele.offsetLeft + speed + "px";
      //目標值和當(dāng)前值只差如果小于步長，那么就不能在前進了
      //因為步長有正有負，所有轉(zhuǎn)換成絕對值來比較
      if(Math.abs(val)<=Math.abs(speed)){
        ele.style.left = target + "px";
        clearInterval(ele.timer);
      }
    },30)
  }
  //緩動動畫封裝
  function animate2(ele,target) {
    clearInterval(ele.timer); //清楚歷史定時器
    ele.timer = setInterval(function () {
      //獲取步長 確定移動方向(正負值) 步長應(yīng)該是越來越小的，緩動的算法。
      var step = (target-ele.offsetLeft)/10;
      //對步長進行二次加工(大于0向上取整,小于0項下取整)
      step = step>0?Math.ceil(step):Math.floor(step);
      //動畫原理： 目標位置 = 當(dāng)前位置 + 步長
      console.log(step);
      ele.style.left = ele.offsetLeft + step + "px";
      //檢測緩動動畫有沒有停止
      if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
        ele.style.left = target + "px"; //直接移動指定位置
        clearInterval(ele.timer);
      }
    },30);
  }
</script>
</body>
</html>

這里使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下運行效果：

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

向AI問一下細節(jié)

JS實現(xiàn)勻速與減速緩慢運動的動畫效果封裝示例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽