A detailed introduction to multi-valued motion in the JavaScript motion framework (4)-JS Tutorial-php.cn

A detailed introduction to multi-valued motion in the JavaScript motion framework (4)

黄舟

Release： 2017-05-21 13:24:31

Original

1313 people have browsed it

This article mainly introduces JavaScriptMotionFrameworkThe fourth part, multi-value movement, has certain reference value. Interested friends can refer to it.

Multi-valued motion, that is, for a certain object, not only one of the attribute values is changing, but several, such as width, height , font, transparency, etc. change simultaneously

Of course, multi-value movement will cause a problem, which is the problem of timerwhen to turn off! Of course, the timer can only be cleared when all attribute values have moved to the target value, that is, waiting for the slowest one. It's like ten people having a dinner together. You can't wait until one person arrives to start eating!

The previous articles talked about the movement of a certain attribute in an element object. This time we talked about the buffer movement of multiple attribute values in the same element object. Then each attribute has an end point. (Target point), we write these attributes and their target values in the form of an object, or in the form of json! The problem that easily arises is as mentioned above. The common speedfunction is used here, but some attribute values are from 100 –> 101, and some attribute values are from 100 –> 600. You have to wait. Only when the longest attribute value reaches the target value can the timer owned by the obj be turned off. The design idea is to set a bStob = true each time the polling function is executed; when traversing and scanning the attributes in json, as long as the target value is not reached, The value attribute is set to false, so that the timer will not be turned off. Even if some attribute values have reached the end point, the polling will still perform scanning at this time, but at this time the movement speed of the attribute is 0, and it will not Got some exercise. That is, before:

if(attr == cur) {
 cleartInterval(obj.timer);
}

Copy after login

will be enhanced to:

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

Copy after login

<!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() {
  var json = {
  width: 600,
  height: 200,
  opacity: 30
  };
  startMove(this, json);
 };
 op.onmouseout = function() {
  var json = {
  width: 100,
  height: 100,
  opacity: 100
  };
  startMove(this, json);
 };
 function getStyle(obj, attr) {
  if (obj.currentStyle) {
  return obj.currentStyle[attr];
  } else {
  return getComputedStyle(obj, false)[attr];
  }
 }

 function startMove(obj, json) {
  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));
   }
   var speed = (json[attr] - cur) / 10;
   speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
   if (cur != json[attr]) {//凡是有未到达目标点的，一律不让定时器停下，否则有的属性不能到达目标值
   bStop = false;
   }
   if (attr === &#39;opacity&#39;) {
   cur += speed;
   obj.style.filter = &#39;alpha(opacity:&#39; + cur + &#39;)&#39;;
   obj.style.opacity = cur / 100;//Chrome,IE
   } else {
   obj.style[attr] = cur + speed + &#39;px&#39;;
   }
  }
  //整个循环结束后，仍然保持着true，说明没有没到达目标值的属性，也就是都到了
  if (bStop) {
   clearInterval(obj.timer);//说明所有的属性都到达了目标值
  }

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

Copy after login

The above is the detailed content of A detailed introduction to multi-valued motion in the JavaScript motion framework (4). For more information, please follow other related articles on the PHP Chinese website!