Home > Article > Web Front-end > JavaScript motion framework - sample code from chain motion to perfect motion (5)

JavaScript motion framework - sample code from chain motion to perfect motion (5)

黄舟Original: 2017-05-21 13:25:421297browse

This article mainly introduces the fifth part of JavaScriptMotionFramework, from chain motion to perfect motion, which has certain reference value. Interested friends can refer to it.

Based on the motion framework foundation of the previous articles, this article mainly explains chain motion, which is to continue the motion after the motion. For example, in many websites, the appearance of a box and exit : When it appears, it first becomes wider and then taller; when it exits, it first becomes shorter and then narrower to exit!
The previous model is:

startMove(obj, json);

Now change to:

startMove(obj, json, fn);

That is, fn() is executed at the end of the first movement; fn is a parameter passed in. This parameter is a function, timermanually run fn() after cleaning; if you want to use chain motion, then call startMove in fn (obj, json, fn), and then call startMove(obj, json, fn) in the fn inside, you can continue playing

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>运动框架(五)：链式运动到完美运动</title>
  <style type="text/css">
    p {
      width: 100px;
      height: 100px;
      background: orange;
      margin: 10px;
      float: left;
    }
  </style>
</head>
<body>
  <p id="p1"></p>

  <script type="text/javascript">
    var op = document.getElementById(&#39;p1&#39;);
    op.onmouseover = function() {
      startMove(op, {width:300,opacity:30}, function() {
        startMove(op, {height:500});
      });
    };
    op.onmouseout = function() {
      startMove(op, {height:100}, function() {
        startMove(op, {width:100,opacity:100});
      })
    };

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

    function startMove(obj, json, fn) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function() {
        var bStop = true;
        for (var attr in json) {
          var cur = 0;
          if (attr === &#39;opacity&#39;) {
            cur = Math.round(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 ? Math.ceil(speed) : Math.floor(speed);
          cur += speed;
          if (attr === &#39;opacity&#39;) {
            obj.style.filter = &#39;alpha(opacity:&#39; + cur + &#39;)&#39;;
            obj.style.opacity = cur/100;
          } else {
            obj.style[attr] = cur + &#39;px&#39;;
          }

        }
        if (bStop) {
          clearInterval(obj.timer);
          if (fn) fn();
        }

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

The final extracted perfect motion frame is as follows, motionFrame.js:

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

function startMove(obj, json, fn) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    var bStop = true;
    for (var attr in json) {
      var cur = 0;
      if (attr === &#39;opacity&#39;) {
        cur = Math.round(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 ? Math.ceil(speed) : Math.floor(speed);
      cur += speed;
      if (attr === &#39;opacity&#39;) {
        obj.style.filter = &#39;alpha(opacity:&#39; + cur + &#39;)&#39;;
        obj.style.opacity = cur/100;
      } else {
        obj.style[attr] = cur + &#39;px&#39;;
      }

    }
    if (bStop) {
      clearInterval(obj.timer);
      if (fn) fn();
    }

  }, 30);
}

The above is the detailed content of JavaScript motion framework - sample code from chain motion to perfect motion (5). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A detailed introduction to multi-valued motion in the JavaScript motion framework (4)Next article：A detailed introduction to multi-valued motion in the JavaScript motion framework (4)

See more

JavaScript motion framework - sample code from chain motion to perfect motion (5)

Related articles