Maison > Article > interface Web > Comment créer un cadre de mouvement uniforme universel

Comment créer un cadre de mouvement uniforme universel

小云云original: 2018-01-15 14:19:181194parcourir

Cet article vous apporte principalement un article sur la création d'un cadre de mouvement uniforme universel (explication avec exemples). L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Cet article est une continuation de la explication précédente basée sur un mouvement uniforme (barre latérale, fondu entrant et sortant) Poursuivant, à la fin de cet article, nous avons fait 2 petits exemples : Side For la barre latérale et l'effet de fondu qui change la transparence, dans cet article nous continuons à transformer la fonction d'animation ci-dessus pour la rendre plus polyvalente et puissante :

1, prend en charge plusieurs objets Mouvement

2, mouvement simultané

3, mouvement séquentiel

Ces trois modes de mouvement sont également pris en charge par la fonction d'animation de jquery

1 Comment distinguer les différents styles dans la fonction d'animation ?

Dans ce qui précède, la fonction d'animation utilisée pour l'effet de la barre latérale modifie la valeur de gauche

function animate(obj, target, speed) {
 clearInterval(timer);
 timer = setInterval(function () {
 if (obj.offsetLeft == target) {
  clearInterval(timer);
 } else {
  obj.style.left = obj.offsetLeft + speed + &#39;px&#39;;
 }
 }, 30);
}

L'effet de fondu est utilisé La fonction animer change la transparence

function animate(obj, target, speed) {
  clearInterval(timer);
  var cur = 0;
  timer = setInterval(function () {
   cur = css( obj, &#39;opacity&#39;) * 100;
   if( cur == target ){
   clearInterval( timer );
   }else {
   cur += speed;
   obj.style.opacity = cur / 100;
   obj.style.filter = "alpha(opacity:" + cur + ")";
   }
  }, 30);
  }

Et si notre fonction encapsulée veut devenir universelle, le premier problème auquel nous sommes confrontés est que cette fonction doit supporter à la fois la valeur gauche et Pour les changements de transparence, une approche plus générale devrait consister à prendre en charge tous les changements de style, tels que la fonction carrousel, qui permet un glissement vers la gauche et la droite et un glissement vers le haut et vers le bas.

Nous pouvons simplement porter un jugement lors de l'obtention du style et du changement de style. Le jugement peut être divisé en deux catégories pour atteindre l'objectif, car d'autres styles (marge, gauche, haut, droite, taille de police, etc.) ) sont tous des px, tandis que la transparence n'a pas d'unité px

function animate(obj, attr, target, speed) {
 clearInterval(timer);
 var cur = 0;
 timer = setInterval(function () {
 if (attr == &#39;opacity&#39;) {
  cur = css(obj, &#39;opacity&#39;) * 100;
 } else {
  cur = parseInt(css(obj, attr));
 }

 if (cur == target) {
  clearInterval(timer);
 } else {
  if (attr == &#39;opacity&#39;) {
  obj.style.opacity = ( cur + speed ) / 100;
  obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
  } else {
  obj.style[attr] = cur + speed + "px";
  }
 }
 }, 30);
}

L'animation fusionnée a un paramètre attr de plus qu'avant. obj : L'objet du changement, cible : la valeur cible vers laquelle le style doit changer vitesse : la taille de chaque changement de style

tel que :

oImg.onmouseover = function () {
　　animate(this, &#39;opacity&#39;, 100, 10);
}

oImg est l'objet image obtenu. La signification de chaque paramètre ici est la suivante :

ceci : l'objet image actuel

opacité : le style changeant est la transparence

100 : lorsque la souris passe sur l'image, la transparence devient 100

10 : La transparence est augmentée de 10 à chaque fois en fonction de la valeur d'origine

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>合并的运动 - by ghostwu</title>
 <style>
 img {
  border: none;
  opacity: 0.3;
  filter: alpha(opacity:30);
  position: absolute;
  left: 200px;
 }

 #box {
  width: 150px;
  height: 300px;
  background: red;
  position: absolute;
  left: -150px;
  top: 50px;
 }

 #box p {
  width: 28px;
  height: 100px;
  position: absolute;
  right: -28px;
  top: 100px;
  background: green;
 }
 </style>
 <script>
 window.onload = function () {
  var oImg = document.getElementById("img"),
  oBox = document.getElementById("box"),
  timer = null;

  oImg.onmouseover = function () {
  animate(this, &#39;opacity&#39;, 100, 10);
  }
  oImg.onmouseout = function () {
  animate(this, &#39;opacity&#39;, 30, -10);
  }

  oBox.onmouseover = function () {
  animate(this, &#39;left&#39;, 0, 10);
  }

  oBox.onmouseout = function () {
  animate(this, &#39;left&#39;, -150, -10);
  }

  function animate(obj, attr, target, speed) {
  clearInterval(timer);
  var cur = 0;
  timer = setInterval(function () {
   if (attr == &#39;opacity&#39;) {
   cur = css(obj, &#39;opacity&#39;) * 100;
   } else {
   cur = parseInt(css(obj, attr));
   }

   if (cur == target) {
   clearInterval(timer);
   } else {
   if (attr == &#39;opacity&#39;) {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
   } else {
    obj.style[attr] = cur + speed + "px";
   }
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
<p id="box">
 <p>分享到</p>
</p>
<img src="./img/h4.jpg" alt="" id="img"/>
</body>
</html>

Ce qui précède est l'exemple de code complet.

Lorsque vous testez ces deux fonctions séparément :

Déplacez-vous vers l'image puis sortez

Déplacez-vous pour partager, puis sortez

C'est pas de problème

Si vous testez comme ceci :

passez au partage, puis passez rapidement à l'image A ce moment, vous constaterez que le partage s'arrête, ce qui n'est pas logique. ! Logiquement parlant, déplacer la souris sur l'image équivaut à déclencher le mouseout (événement mouse out) de "Partager vers", alors "Partager vers" devrait être masqué à ce moment, pas arrêté. Pourquoi cela se produit-il ? Étant donné que ces deux sports partagent un minuteur, lorsque la souris se déplace sur l'image et que le minuteur est activé, le minuteur « partager vers » est arrêté. Ensuite, lorsque nous effectuons un mouvement multi-objets, nous devons diviser le minuteur. Chaque objet doit avoir un minuteur. Comment faire cela ? C'est très simple. Ne définissez pas une simple variable timer. Il suffit d'ajouter le timer à l'objet obj. Ensuite, chaque objet a un attribut timer, qui obtient l'effet de séparation du timer. après modification Comme suit, veuillez le développer vous-même :

À ce stade, nous avons terminé la modification du mouvement multi-objets et des différents styles

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 img {
  border: none;
  opacity: 0.3;
  filter: alpha(opacity:30);
  position: absolute;
  left: 200px;
 }

 #box {
  width: 150px;
  height: 300px;
  background: red;
  position: absolute;
  left: -150px;
  top: 50px;
 }

 #box p {
  width: 28px;
  height: 100px;
  position: absolute;
  right: -28px;
  top: 100px;
  background: green;
 }
 </style>
 <script>
 window.onload = function () {
  var oImg = document.getElementById("img"),
  oBox = document.getElementById("box");

  oImg.onmouseover = function () {
  animate(this, &#39;opacity&#39;, 100, 10);
  }
  oImg.onmouseout = function () {
  animate(this, &#39;opacity&#39;, 30, -10);
  }

  oBox.onmouseover = function () {
  animate(this, &#39;left&#39;, 0, 10);
  }

  oBox.onmouseout = function () {
  animate(this, &#39;left&#39;, -150, -10);
  }

  function animate(obj, attr, target, speed) {
  clearInterval(obj.timer);
  var cur = 0;
  obj.timer = setInterval(function () {
   if (attr == &#39;opacity&#39;) {
   cur = css(obj, &#39;opacity&#39;) * 100;
   } else {
   cur = parseInt(css(obj, attr));
   }

   if (cur == target) {
   clearInterval(obj.timer);
   } else {
   if (attr == &#39;opacity&#39;) {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
   } else {
    obj.style[attr] = cur + speed + "px";
   }
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
<p id="box">
 <p>分享到</p>
</p>
<img src="./img/h4.jpg" alt="" id="img"/>
</body>
</html>

2. Laissez la fonction d'animation prendre en charge plusieurs styles changeant en même temps

Par exemple :

oBox est un élément p, animer La signification de chaque paramètre :

oBox.onmouseover = function(){
　　animate( this, { "width" : 500, "height" : 400 }, 10 );
}

this : élément p actuel

{width : 500, "height" : 400 } : changer la largeur à 500 et la hauteur à 400. Ces deux styles doivent être complétés en même temps,

10 : Le style change de 10 par rapport à la valeur d'origine à chaque fois (comme la valeur initiale de largeur 200--> 210 , 220, 230....)

Code de changement de mouvement simultané complet :

Veuillez développer vous-même ce code. Ce code peut se déplacer à. en même temps, mais il y a un problème :

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 p {
 width: 200px;
 height: 200px;
 background: red;
 }
 </style>
 <script>
 window.onload = function () {
  var oBox = document.getElementById("box");
  oBox.onmouseover = function(){
//  animate( this, { "width" : 500, "height" : 500 }, 10 );
  animate( this, { "width" : 500, "height" : 400 }, 10 );
  }

  function animate(obj, attr, speed) {
  clearInterval(obj.timer);
  var cur = 0;
  obj.timer = setInterval(function () {
   for ( var key in attr ) {
   if (key == &#39;opacity&#39;) {
    cur = css(obj, &#39;opacity&#39;) * 100;
   } else {
    cur = parseInt(css(obj, key));
   }
   var target = attr[key];
   if (cur == target) {
    clearInterval(obj.timer);
   } else {
    if (key == &#39;opacity&#39;) {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
    } else {
    obj.style[key] = cur + speed + "px";
    }
   }
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
 <p id="box"></p>
</body>
</html>

La largeur initiale de p est la même que la hauteur (largeur : 200, hauteur : 200)

Le pas de changement est le même (10 )

Le temps de changement est le même (change toutes les 30 millisecondes)

Cible (largeur : 500, hauteur : 400)

Pouvez-vous penser à des problèmes ? (Deux personnes sont sur la même ligne de départ, avec la même vitesse et le même temps, mais elles doivent atteindre des objectifs différents en même temps, l'une vaut 500 et l'autre 400)

La réponse est évidente , ce doit être celui avec la cible la plus proche (hauteur : 400) Celui qui arrive en premier, éteint ensuite le timer sur l'objet, et l'autre cible avec une cible plus loin (largeur : 500) ne sera définitivement pas atteinte

Vous pouvez afficher la valeur actuelle et la valeur cible sous ce code :

Le résultat de sortie est :

var target = attr[key];
console.log( key, cur, target );

从上图可以看出，height已经达到了400px，但是width停在了410px,为什么不是400px ? 因为width = 400的时候，就是( cur == 500 ) 相当于( 400 == 500 ) 不成立，所以执行了else语句，width = cur + 10 = 400 + 10 = 410，然后height到达400px停止了定时器，所以width停在了410px.

那么我们怎么解决这个问题呢？

其实也好办，就是height = 400的时候不要把定时器关了，应该等width = 500的时候再关闭定时器，不就在同一时间，完成了同时到达目标的效果吗？

修改后的代码如下：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 p {
 width: 200px;
 height: 200px;
 background: red;
 }
 </style>
 <script>
 window.onload = function () {
  var oBox = document.getElementById("box");
  oBox.onmouseover = function(){
  animate( this, { "width" : 500, "height" : 400 }, 10 );
  }

  function animate(obj, attr, speed) {
  clearInterval(obj.timer);
  var cur = 0;
  obj.timer = setInterval(function () {
   var bFlag = true;
   for ( var key in attr ) {
   if (key == &#39;opacity&#39;) {
    cur = css(obj, &#39;opacity&#39;) * 100;
   } else {
    cur = parseInt(css(obj, key));
   }
   var target = attr[key];
   if (cur != target) {
    bFlag = false;
    if (key == &#39;opacity&#39;) {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
    } else {
    obj.style[key] = cur + speed + "px";
    }
   }
   }
   if ( bFlag ) {
   clearInterval( obj.timer );
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
 <p id="box"></p>
</body>
</html>

声明一个变量，每次变化完一次( width, height )样式把bFlag = true，只要在for循环中有一个没有到达目标，bFlag的值都是false，这样就不会关闭定时器。当两个都到达目标，才关闭定时器.

三、顺序运动

如样式变化，按顺序来，不是同时变化，如：

oBox.onmouseover = function(){
//回调函数： 把函数当做参数传递给另一个函数
　　animate( this, { &#39;width&#39; : 500 }, 10, function(){
　　　　animate( this, { &#39;height&#39; : 500 }, 10 );
　　} );
}

当把width变成500px的时候，如果传递了回调函数，再接着执行回调函数里面的运动

修改后的完整代码：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>通用的匀速运动框架 - by ghostwu</title>
 <style>
 p {
  width: 200px;
  height: 200px;
  background: red;
 }
 </style>
 <script>
 window.onload = function () {
  var oBox = document.getElementById("box");
  oBox.onmouseover = function(){
  //回调函数： 把函数当做参数传递给另一个函数
  animate( this, { &#39;width&#39; : 500 }, 10, function(){
   animate( this, { &#39;height&#39; : 500 }, 10 );
  } );
  }

  function animate(obj, attr, speed, fn ) {

  clearInterval(obj.timer);
  var cur = 0;
  obj.timer = setInterval(function () {
   var bFlag = true;
   for (var key in attr) {
   if (key == &#39;opacity&#39;) {
    cur = css(obj, &#39;opacity&#39;) * 100;
   } else {
    cur = parseInt(css(obj, key));
   }
   var target = attr[key];
   if (cur != target) {
    bFlag = false;
    if (key == &#39;opacity&#39;) {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
    } else {
    obj.style[key] = cur + speed + "px";
    }
   }
   }

   if (bFlag) {
   clearInterval(obj.timer);
   fn && fn.call( obj );
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
<p id="box"></p>
</body>
</html>

Articles Liés

Voir plus