JavaScript motion framework - sample code from chain motion to perfect motion (5)-JS Tutorial-php.cn

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

黄舟

Release： 2017-05-21 13:25:42

Original

1384 people have browsed it

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>

Copy after login

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);
}

Copy after login

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!