JS---封裝緩動（變速）動畫函數---增長任意一個屬性

時間 2019-12-22

標籤封裝緩動變速動畫函數增長任意一個屬性欄目 JavaScript 简体版

原文原文鏈接

封裝緩動(變速)動畫---增長任意一個屬性

1. 原本的變速動畫函數，是獲取特定的屬性(以前案例是向右移動，因此獲取的是left屬性)html

2. 如今改變爲，獲取任意一個屬性，使其移動到指定的target，至關於在原animate(element,target)函數上，增長了一個屬性，變爲animate(element, attr, target)函數瀏覽器

3. 改動一：在獲取當前元素的位置，var current，用getStyle來獲取，由於獲得的是字符串類型，包一個parseInt改成數字類型；函數

4. 改動二：移動步數時候，元素的當前位置等於current+"px"，element.style.left更新爲element.style[attr], 特定的元素用任意元素取代測試

得到的效果：就是能夠使任意元素的，任意一個樣式屬性，移動到指定的目標位置

attr位置，能夠改成left，能夠改成heigth, 能夠改成top，能夠改成bgc....等等動畫

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      margin-top: 20px;
      width: 200px;
      height: 100px;
      background-color: green;
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>

<body>
  <input type="button" value="移動到400px" id="btn1" />
  <input type="button" value="移動到800px" id="btn2" />
  <div id="dv">
    <script src="common.js"></script>
    <script>
      //點擊按鈕移動div

      my$("btn1").onclick = function () {
        //獲取div此時left的當前位置,達到目標400
        // animate(my$("dv"),"left",400);
        //獲取div此時的寬度,達到目標200
        animate(my$("dv"), "width", 200);
      };

      //獲取任意的一個屬性的當前的屬性值: 改用以前封裝的getStyle函數
      function getStyle(element, attr) {
        //判斷瀏覽器是否支持這個方法
        return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
      }

      //勻速動畫

      //element---元素
      //attr---屬性名字
      //target---目標位置
      function animate(element, attr, target) {
        //清理定時器
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
          //獲取元素的當前位置
          var current = parseInt(getStyle(element, attr));//數字類型//===============================
          //移動的步數
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;
          element.style[attr] = current + "px";//============================================
          if (current == target) {
            //清理定時器
            clearInterval(element.timeId);
          }
          //測試代碼:
          console.log("目標位置:" + target + ",當前位置:" + current + ",每次移動步數:" + step);
        }, 20);
      }
    </script>
  </div>
</body>

</html>