快捷導(dǎo)航

JS實(shí)現(xiàn)勻速與減速緩慢運(yùn)動(dòng)的動(dòng)畫效果封裝示例

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

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

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

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>m.fzitv.net JS勻速/減速運(yùn)動(dòng)</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>勻速移動(dòng)</button>
<button>減速移動(dòng)</button>
<div class="box1" ></div>
<div class="box2" ></div>
<script>
  // 動(dòng)畫原理 = 盒子位置 + 步長。
  //   1.閃動(dòng)。 （瞬間到達(dá)）
  //   2.勻速。 （每次走一樣距離）
  //   3.緩動(dòng)。 （開始特快越走越慢，步長越來越?。?
  //        （類似剎車，電梯停止，壓縮彈簧...）
  // 好處：
  //   1.有非常逼真的緩動(dòng)效果，實(shí)現(xiàn)的動(dòng)畫效果更細(xì)膩。
  //   2.如果不清除定時(shí)器，物體永遠(yuǎn)跟著目標(biāo)在移動(dòng)。
  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);
  }
  //勻速動(dòng)畫
  function animate1(ele,target){
    //要用定時(shí)器，先清除定時(shí)器
    //一個(gè)盒子只能有一個(gè)定時(shí)器，這樣兒的話，不會(huì)和其他盒子出現(xiàn)定時(shí)器沖突
    //而定時(shí)器本身講成為盒子的一個(gè)屬性
    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)了
      //因?yàn)椴介L有正有負(fù)，所有轉(zhuǎn)換成絕對(duì)值來比較
      if(Math.abs(val)<=Math.abs(speed)){
        ele.style.left = target + "px";
        clearInterval(ele.timer);
      }
    },30)
  }
  //緩動(dòng)動(dòng)畫封裝
  function animate2(ele,target) {
    clearInterval(ele.timer); //清楚歷史定時(shí)器
    ele.timer = setInterval(function () {
      //獲取步長 確定移動(dòng)方向(正負(fù)值) 步長應(yīng)該是越來越小的，緩動(dòng)的算法。
      var step = (target-ele.offsetLeft)/10;
      //對(duì)步長進(jìn)行二次加工(大于0向上取整,小于0項(xiàng)下取整)
      step = step>0?Math.ceil(step):Math.floor(step);
      //動(dòng)畫原理： 目標(biāo)位置 = 當(dāng)前位置 + 步長
      console.log(step);
      ele.style.left = ele.offsetLeft + step + "px";
      //檢測緩動(dòng)動(dòng)畫有沒有停止
      if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
        ele.style.left = target + "px"; //直接移動(dòng)指定位置
        clearInterval(ele.timer);
      }
    },30);
  }
</script>
</body>
</html>

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