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

時間 2019-12-22

原文原文鏈接

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

回掉函數fn，在全部元素到達目的位置後，判斷是否傳入一個函數，有就調用 if(fn){fn()};html

這樣一次點擊，產生多個動畫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.currentStyle[attr] || 0;
    }


    //element---元素
    //json---對象---多個屬性及多個目標值
    //fn---函數

    function animate(element, json, fn) {
      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);
          if (fn) {
            fn();
          }
        }
        //測試代碼
        console.log("目標：" + target + "，當前：" + current + "，每次移動的步數" + step);
      }, 20)
    }

    my$("btn1").onclick = function () {
      var json1 = { "width": 400, "height": 200, "left": 500, "top": 80 };
      animate(my$("dv"), json1, function () {
        var json2 = { "width": 200, "height": 100, "left": 200, "top": 120 };
        animate(my$("dv"), json2, function () {
          var json3 = { "width": 400, "height": 300, "left": 300, "top": 80 };
          animate(my$("dv"), json3);
        });
      });
    };


  </script>
</body>

</html>