suchen

Heim  >  Artikel  >  Web-Frontend  >  So erstellen Sie ein universelles einheitliches Bewegungsgerüst

So erstellen Sie ein universelles einheitliches Bewegungsgerüst

小云云
小云云Original
2018-01-15 14:19:181209Durchsuche

Dieser Artikel enthält hauptsächlich einen Artikel zum Erstellen eines universellen einheitlichen Bewegungsrahmens (Erklärung mit Beispielen). Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Dieser Artikel ist eine Fortsetzung der vorherigen Erklärung basierend auf gleichförmiger Bewegung (Seitenleiste, Ein- und Ausblenden) Weiterhin haben wir am Ende dieses Artikels zwei kleine Beispiele erstellt: Side For Neben der Seitenleiste und dem Fade-Effekt, der die Transparenz ändert, transformieren wir in diesem Artikel die obige Animationsfunktion weiter, um sie vielseitiger und leistungsfähiger zu machen:

1, unterstützt die Bewegung mehrerer Objekte

2, gleichzeitige Bewegung

3, sequentielle Bewegung

Diese drei Bewegungsmodi werden auch von der Animationsfunktion in jquery unterstützt

1 Wie unterscheidet man verschiedene Stile in der Animationsfunktion?

Oben ändert die für den Seitenleisteneffekt verwendete Animationsfunktion den linken Wert


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

Der Fade-Effekt ist Verwendet Die Animationsfunktion ändert die Transparenz 


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

Und wenn unsere gekapselte Funktion universell werden möchte, besteht das erste Problem darin, dass diese Funktion sowohl den linken Wert unterstützen muss und Bei Transparenzänderungen sollte ein allgemeinerer Ansatz darin bestehen, alle Stiländerungen zu unterstützen, beispielsweise die Karussellfunktion, die nach links und rechts sowie nach oben und unten gleitet.

Wir können einfach ein Urteil fällen, wenn wir den Stil erhalten und den Stil ändern. Das Urteil kann in zwei Kategorien unterteilt werden, um den Zweck zu erreichen, da andere Stile (Rand, links, oben, rechts, Schriftgröße, usw.) ) sind alle px, aber Transparenz hat keine px-Einheit 


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

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

Die zusammengeführte Animation hat einen Parameter mehr als zuvor. Dieser Parameter ist der geänderte Stil. obj: Das Objekt der Änderung, Ziel: der Zielwert, auf den sich der Stil ändern muss, Geschwindigkeit: die Größe jeder Änderung des Stils

wie zum Beispiel: 


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

oImg ist das erhaltene Bildobjekt. Die Bedeutung jedes Parameters hier ist wie folgt:

dies: das aktuelle Bildobjekt

Deckkraft: Der sich ändernde Stil ist Transparenz

100: Wenn die Maus über das Bild bewegt wird, beträgt die Transparenz 100

10: Die Transparenz wird jedes Mal um 10 erhöht, basierend auf dem ursprünglichen Wert


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

Das Obige ist das vollständige Codebeispiel.

Wenn Sie diese beiden Funktionen separat testen:

Zum Bild bewegen und dann herausziehen

Zum Teilen verschieben, dann herausziehen

Das ist Kein Problem

Wenn Sie wie folgt testen:

Bewegen Sie sich zum Teilen und wechseln Sie dann schnell zum Bild. Zu diesem Zeitpunkt werden Sie feststellen, dass die Freigabe stoppt, was nicht konsistent ist ! Logischerweise ist das Bewegen der Maus über das Bild gleichbedeutend mit dem Auslösen des Mouseout-Ereignisses (Mouse-Out-Ereignis) von „Teilen an“, dann sollte „Teilen an“ zu diesem Zeitpunkt ausgeblendet und nicht gestoppt werden. Warum passiert das? Da diese beiden Sportarten einen gemeinsamen Timer haben, wird der „Teilen an“-Timer gestoppt, wenn die Maus über das Bild bewegt und der Timer aktiviert wird. Wenn wir dann eine Bewegung mit mehreren Objekten ausführen, müssen wir den Timer aufteilen. Wie geht das? Es ist sehr einfach. Definieren Sie keine einfache Timer-Variable. Dann hat jedes Objekt ein Timer-Attribut, das den Trenneffekt des Timers erreicht nach der Änderung Bitte erweitern Sie es wie folgt selbst:


Zu diesem Zeitpunkt haben wir die Änderung der Bewegung mehrerer Objekte und verschiedener Stile abgeschlossen 
<!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. Lassen Sie die Animationsfunktion mehrere Stile unterstützen, die sich gleichzeitig ändern Zum Beispiel:


oBox ist ein p-Element, animieren Die Bedeutung jedes Parameters: 
oBox.onmouseover = function(){
　　animate( this, { "width" : 500, "height" : 400 }, 10 );
}

dies: aktuelles p-Element

{width : 500, "height" : 400 } : Ändern Sie die Breite auf 500 und die Höhe auf 400. Diese beiden Stile müssen gleichzeitig abgeschlossen werden,

10: Der Stil ändert sich jedes Mal um 10 vom ursprünglichen Wert (z. B. der Anfangswert der Breite 200--> 210). , 220, 230....)

Vollständiger gleichzeitiger Bewegungsänderungscode:


Bitte erweitern Sie diesen Code selbst. Dieser Code kann verschoben werden gleichzeitig, aber es gibt ein Problem: 
<!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>

Die anfängliche Breite von p ist dieselbe wie die Höhe (Breite: 200, Höhe: 200)

Die Änderungsschrittgröße ist dieselbe ( 10)

Die Änderungszeit ist gleich (Änderung alle 30 Millisekunden)

Ziel (Breite: 500, Höhe: 400)

Können Sie sich irgendwelche Probleme vorstellen? (Zwei Personen stehen an der gleichen Startlinie, mit der gleichen Geschwindigkeit und der gleichen Zeit, aber sie müssen gleichzeitig unterschiedliche Ziele erreichen, einer ist 500 und der andere ist 400)

Die Antwort liegt auf der Hand , es muss dasjenige mit dem nächstgelegenen Ziel sein (Höhe: 400). Dasjenige, das zuerst ankommt, schaltet dann den Timer für das Objekt aus, und das andere Ziel mit einem weiteren Ziel (Breite: 500) wird definitiv nicht erreicht

Unter diesem Code können Sie den aktuellen Wert und den Zielwert ausgeben:


Das Ausgabeergebnis ist: 
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>

相关推荐：

基于js匀速运动的实例讲解

用js指定步长实现单方向匀速运动

浅谈Javascript如何实现匀速运动_javascript技巧

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein universelles einheitliches Bewegungsgerüst. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js implementiert ein glattes Karussell am Anfang und Ende von BildernNächster Artikel：js implementiert ein glattes Karussell am Anfang und Ende von Bildern

In Verbindung stehende Artikel

Mehr sehen