JS -- encapsulate slow motion (variable speed) animation function -- add multiple arbitrary multiple attributes

Encapsulate slow motion animation function - add multiple arbitrary attributes

On the basis of adding any attribute to the original slow motion animation function, the following changes have been made

1. The original function animate(element, attr, target), three variables, is replaced by json object to install a pair: attribute: the value of the target location, changed to function animate(element, json)

2. The previous variable speed animation function, any attribute, changes its current attribute position to reach the target attribute. Now there are multiple arbitrary attributes loaded with json objects, so it is necessary to traverse every value for (VaR key in json) {}. Key is the attr here, so the traversal for(var attr in json)

3. The target value corresponding to the current attribute, var target is the target of the value in json, var target=json[attr];

4. flag judgment is added to ensure that all the values in json reach the destination, and then clear the timer

<!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="Move to 400 px" id="btn1" />
  <div id="dv">
  </div>
  <script src="common.js"></script>
  <script>
    //Click the button to change the width to reach a target value
    //Click the button to change the width to reach a target value and the height to reach a target value

    //Get the current value of any attribute of any element
    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; //Default, assume, all reach target
        for (var attr in json) {
          //Gets the current value of this attribute of the element
          var current = parseInt(getStyle(element, attr));
          //Target value corresponding to the current attribute
          var target = json[attr];
          //Steps moved
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//Value after move
          element.style[attr] = current + "px";
          if (current != target) {
            flag = false;
          }
        }
        if (flag) {
          clearInterval(element.timeId);
        }
        //Test code
        console.log("Objectives:" + target + ",current" + current + ",Steps per move" + step);
      }, 20)
    }

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

  </script>
</body>

</html>

The effect is as follows:

Posted by dcinadr on Fri, 20 Dec 2019 06:15:35 -0800

Programmer Group

JS -- encapsulate slow motion (variable speed) animation function -- add multiple arbitrary multiple attributes

Encapsulate slow motion animation function - add multiple arbitrary attributes

Hot Keywords