JS---最終版本--封裝緩動（變速）動畫函數---增長任意多個屬性&回調函數&層級&透明度

時間 2019-12-22

標籤最終版本封裝緩動變速動畫函數增長任意多個屬性層級透明度欄目 JavaScript 简体版

原文原文鏈接

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

相較以前的，增長了2個判斷，第一個判斷是否是透明度，第二個判斷是否是zindex, 都不是，就只是普通屬性和以前同樣html

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

    div {

      width: 200px;
      height: 100px;
      background-color: green;
      position: absolute;
      left: 0;
      top: 0;
    }

    input {
      z-index: 10;
      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;
  }


  function animate(element, json, fn) {
    clearInterval(element.timeId);//清理定時器
    //定時器,返回的是定時器的id
    element.timeId = setInterval(function () {
      var flag = true;//默認,假設,所有到達目標
      //遍歷json對象中的每一個屬性還有屬性對應的目標值
      for (var attr in json) {
        //判斷這個屬性attr中是否是opacity
        if (attr == "opacity") {
          //獲取元素的當前的透明度,當前的透明度放大100倍
          var current = getStyle(element, attr) * 100;
          //目標的透明度放大100倍
          var target = json[attr] * 100;
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//移動後的值
          element.style[attr] = current / 100;
        } else if (attr == "zIndex") { //判斷這個屬性attr中是否是zIndex
          //層級改變就是直接改變這個屬性的值
          element.style[attr] = json[attr];
        } else {
          //普通的屬性
          //獲取元素這個屬性的當前的值
          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);
  }

  //zIndex:1000
  //透明度: 數字類型----小數---放大100倍
  my$("btn1").onclick = function () {

    var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2};
    animate(my$("dv"), json1, function () {
      animate(my$("dv"), {"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000});
    });
  };

</script>
</body>
</html>