SoFunction
Updated on 2025-02-28

JavaScript Movement Frame Chain Movement to Perfect Movement (V)

Based on the sports framework foundation of the previous articles, this article mainly explains chain movement, which means moving after the exercise. For example, in many websites, the appearance and exit of a box: when it appears, it becomes wider and then taller, and when it exits, it becomes shorter and narrower and then exits!
The previous model was:

startMove(obj, json);

Now change to:

startMove(obj, json, fn);

That is, when the first movement is over, fn() is executed; fn is a parameter passed, this parameter is a function, and run fn() manually after the timer is cleaned; if you want to use chain motion, then call startMove(obj, json, fn) in fn, and then call startMove(obj, json, fn) in fn, and you can keep playing

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Movement frame(five)：Chain movement to perfect movement</title>
  <style type="text/css">
    div {
      width: 100px;
      height: 100px;
      background: orange;
      margin: 10px;
      float: left;
    }
  </style>
</head>
<body>
  <div ></div>

  <script type="text/javascript">
    var oDiv = ('div1');
     = function() {
      startMove(oDiv, {width:300,opacity:30}, function() {
        startMove(oDiv, {height:500});
      });
    };
     = function() {
      startMove(oDiv, {height:100}, function() {
        startMove(oDiv, {width:100,opacity:100});
      })
    };

    function getStyle(obj, attr) {
      if () {
        return [attr];
      } else {
        return getComputedStyle(obj, null)[attr];
      }
    }

    function startMove(obj, json, fn) {
      clearInterval();
       = setInterval(function() {
        var bStop = true;
        for (var attr in json) {
          var cur = 0;
          if (attr === 'opacity') {
            cur = (parseFloat(getStyle(obj, attr)) * 100);
          } else {
            cur = parseInt(getStyle(obj, attr));
          }
          if (cur != json[attr]) {
            bStop = false;
          }
          var speed = (json[attr] - cur)/10;
          speed = speed > 0 ? (speed) : (speed);
          cur += speed;
          if (attr === 'opacity') {
             = 'alpha(opacity:' + cur + ')';
             = cur/100;
          } else {
            [attr] = cur + 'px';
          }

        }
        if (bStop) {
          clearInterval();
          if (fn) fn();
        }

      }, 30);
    }
  </script>
</body>
</html>

The final perfect motion frame extracted is as follows:

function getStyle(obj, attr) {
  if () {
    return [attr];
  } else {
    return getComputedStyle(obj, null)[attr];
  }
}

function startMove(obj, json, fn) {
  clearInterval();
   = setInterval(function() {
    var bStop = true;
    for (var attr in json) {
      var cur = 0;
      if (attr === 'opacity') {
        cur = (parseFloat(getStyle(obj, attr)) * 100);
      } else {
        cur = parseInt(getStyle(obj, attr));
      }
      if (cur != json[attr]) {
        bStop = false;
      }
      var speed = (json[attr] - cur)/10;
      speed = speed > 0 ? (speed) : (speed);
      cur += speed;
      if (attr === 'opacity') {
         = 'alpha(opacity:' + cur + ')';
         = cur/100;
      } else {
        [attr] = cur + 'px';
      }

    }
    if (bStop) {
      clearInterval();
      if (fn) fn();
    }

  }, 30);
}

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.