Maison > Article > interface Web > Une introduction détaillée au mouvement à valeurs multiples dans le framework de mouvement JavaScript (4)

Une introduction détaillée au mouvement à valeurs multiples dans le framework de mouvement JavaScript (4)

黄舟original: 2017-05-21 13:24:311275parcourir

Cet article présente principalement le JavaScriptMotionFramework en détail à tout le monde. La quatrième partie, le mouvement à valeurs multiples, a une certaine valeur de référence. 🎜>

Mouvement à valeurs multiples, c'est-à-dire que pour un certain

objet, non seulement une des valeurs attribut change, mais plusieurs, telles que la largeur, la hauteur , la police, la transparence, etc. changent en même temps

Bien sûr, le mouvement à valeurs multiples posera un problème, qui est le problème du moment où la

minuterie s'éteint ! Bien entendu, le minuteur ne peut être effacé que lorsque toutes les valeurs d'attribut sont passées à la valeur cible, c'est-à-dire en attendant la plus lente. C'est comme si dix personnes dînaient ensemble. Vous ne pouvez pas attendre qu'une seule personne arrive pour commencer à manger !

Les articles précédents parlaient du mouvement d'un certain attribut dans un objet élément. Cette fois, nous avons parlé du mouvement du tampon de plusieurs valeurs d'attributdans le même objet élément. a un point final. (Target point), on écrit ces attributs et leurs valeurs ciblessous forme d'objet, ou sous forme de

json ! Le problème qui se pose facilement est celui mentionné ci-dessus. La fonction de vitesse commune est utilisée ici, mais certaines valeurs d'attribut sont comprises entre 100 –> 600. Vous devez attendre. Ce n'est que lorsque la valeur d'attribut la plus longue atteint la valeur cible que le timer appartenant à l'obj peut être fermé. L'idée de conception est de définir un bStob = true à chaque fois que la fonction d'interrogation est exécutée lors du parcours et de l'analyse de l'objet. attributs dans json, tant que la valeur cible n'est pas atteinte, l'attribut value est défini sur false, de sorte que le minuteur ne sera pas désactivé Même si certaines valeurs d'attribut ont atteint le point final, l'interrogation sera toujours effectuée. scannant à ce moment-là, mais la vitesse de déplacement de l'attribut est de 0 à ce moment-là, et il ne fera pas d'exercice. Autrement dit, avant :

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

sera amélioré en :

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de partage de code du framework de mouvement JavaScript pour le mouvement de valeurs arbitraires de plusieurs objets (3)Article suivant：Exemple de partage de code du framework de mouvement JavaScript pour le mouvement de valeurs arbitraires de plusieurs objets (3)

Articles Liés

Voir plus