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

時間 2019-12-22

原文原文鏈接

封裝緩動動畫函數---增長多個任意多個屬性

在原來緩動動畫函數，增長任意一個屬性的基礎上，作了以下改變html

1. 原來function animate(element, attr, target)，三個變量，改成用json對象來裝一對：屬性:目標位置的值，變爲function animate(element, json)json

2. 以前的變速動畫函數，都任意一個屬性，改變其當前屬性的位置，到達目標屬性。如今有多個任意屬性，用json對象裝，因此要遍歷json對象裏面每個值 for(var key in json){}, key就是這裏的attr, 因此遍歷的for(var attr in json)函數

3. 當前屬性對應的目標值，var target就是json裏面值的目標，var target=json[attr];測試

4. 添加了flag的判斷，是爲了，保證在json中全部的值都到達目的位置後，再清除定時器動畫

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

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

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

<body>
  <input type="button" value="移動到400px" id="btn1" />
  <div id="dv">
  </div>
  <script src="common.js"></script>
  <script>
    //點擊按鈕，改變寬度到達一個目標值
    //點擊按鈕，改變寬度到達一個目標值，高度到達一個目標值

    //獲取任意一個元素的任意一個屬性的當前的值
    function getStyle(element, attr) {
      return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentSytle[attr] || 0;
    }

    function animate(element, json) {
      clearInterval(element.timeId);
      element.timeId = setInterval(function () {
        var flag = true; //默認，假設，所有到達目標
        for (var attr in json) {
          //獲取元素這個屬性的當前的值
          var current = parseInt(getStyle(element, attr));
          //當前的屬性對應的目標值
          var target = json[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) {
            flag = false;
          }
        }
        if (flag) {
          clearInterval(element.timeId);
        }
        //測試代碼
        console.log("目標：" + target + ",當前" + current + ",每次移動的步數" + step);
      }, 20)
    }

    my$("btn1").onclick = function () {
      animate(my$("dv"), { "width": 400, "height": 200, "left": 500, "top": 80 })
    };

  </script>
</body>

</html>