Eine ausführliche Einführung in mehrwertige Bewegungen im JavaScript-Bewegungsframework (4)-js-Tutorial-php.cn

Eine ausführliche Einführung in mehrwertige Bewegungen im JavaScript-Bewegungsframework (4)

黄舟

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

Original

1325 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich das JavaScriptFramework im Detail vor. Der vierte Teil, die mehrwertige Bewegung, hat einen gewissen Referenzwert

Mehrwertige Bewegung, das heißt, für ein bestimmtes

Objekt ändert sich nicht nur einer der Attributwerte, sondern mehrere, wie zum Beispiel Breite, Höhe , Schriftart, Transparenz usw. ändern sich gleichzeitig

Natürlich führt die mehrwertige Bewegung zu einem Problem, und zwar dann, wenn sich der

Timer ausschaltet! Natürlich kann der Timer erst gelöscht werden, wenn sich alle Attributwerte auf den Zielwert bewegt haben, also auf den langsamsten Wert gewartet wird. Es ist, als würden zehn Leute zusammen zu Abend essen. Sie können es kaum erwarten, bis eine Person mit dem Essen beginnt!

In den vorherigen Artikeln ging es um die Bewegung eines bestimmten Attributs in einem Elementobjekt. Dieses Mal haben wir über die Pufferbewegung mehrerer Attributwerte im selben Elementobjekt gesprochen hat einen Endpunkt (Zielpunkt), wir schreiben diese Attribute und ihre Zielwerte in Form eines Objekts oder in Form von

json! Das Problem, das leicht auftritt, ist wie oben erwähnt. Die übliche Geschwindigkeitsfunktion wird hier verwendet, aber einige Attributwerte liegen zwischen 100 und 101, und einige Attributwerte liegen zwischen 100 und gt; 600. Sie müssen warten, bis der längste Attributwert den Zielwert erreicht. Die Entwurfsidee besteht darin, bei jeder Ausführung der Abfragefunktion einen bStob = true festzulegen Attribute in JSON, solange der Zielwert nicht erreicht ist, ist das Wertattribut auf false gesetzt, sodass der Timer nicht ausgeschaltet wird. Auch wenn einige Attributwerte den Endpunkt erreicht haben, wird die Abfrage weiterhin durchgeführt Zu diesem Zeitpunkt wird gescannt, aber zu diesem Zeitpunkt ist die Bewegungsgeschwindigkeit des Attributs 0 und es wird nicht trainiert. Das heißt, bevor:

zu:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

<!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>

Nach dem Login kopieren

erweitert wird

Das obige ist der detaillierte Inhalt vonEine ausführliche Einführung in mehrwertige Bewegungen im JavaScript-Bewegungsframework (4). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!