快捷導(dǎo)航

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

更新時間：2018年08月27日 11:45:50 作者：心郎

這篇文章主要介紹了JS實現(xiàn)勻速與減速緩慢運動的動畫效果,結(jié)合實例形式分析了JavaScript封裝結(jié)合定時器的頁面元素動態(tài)變換效果動畫相關(guān)操作技巧,需要的朋友可以參考下

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

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>www.dbjr.com.cn 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.閃動。 （瞬間到達(dá)）
  //   2.勻速。 （每次走一樣距離）
  //   3.緩動。 （開始特快越走越慢，步長越來越小）
  //        （類似剎車，電梯停止，壓縮彈簧...）
  // 好處：
  //   1.有非常逼真的緩動效果，實現(xiàn)的動畫效果更細(xì)膩。
  //   2.如果不清除定時器，物體永遠(yuǎn)跟著目標(biāo)在移動。
  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);
    //我們要求盒子既能向前又能向后，那么我們的步長就得有正有負(fù)
    //目標(biāo)值如果大于當(dāng)前值取正，目標(biāo)值如果小于當(dāng)前值取負(fù)
    var speed = target>ele.offsetLeft?3:-3;
    ele.timer = setInterval(function () {
      //在執(zhí)行之前就獲取當(dāng)前值和目標(biāo)值之差
      var val = target - ele.offsetLeft;
      ele.style.left = ele.offsetLeft + speed + "px";
      //目標(biāo)值和當(dāng)前值只差如果小于步長，那么就不能在前進(jìn)了
      //因為步長有正有負(fù)，所有轉(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 () {
      //獲取步長 確定移動方向(正負(fù)值) 步長應(yīng)該是越來越小的，緩動的算法。
      var step = (target-ele.offsetLeft)/10;
      //對步長進(jìn)行二次加工(大于0向上取整,小于0項下取整)
      step = step>0?Math.ceil(step):Math.floor(step);
      //動畫原理： 目標(biāo)位置 = 當(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，可得到如下運行效果：