Heim > Artikel > Web-Frontend > Teilen eines Beispiels für einen js-Gleitanimationseffekt

Teilen eines Beispiels für einen js-Gleitanimationseffekt

小云云Original: 2018-03-14 17:30:272377Durchsuche

In diesem Artikel werden hauptsächlich Beispiele für js-Gleitanimationseffekte vorgestellt. Ich hoffe, dass jeder lernen kann, mit js einfache gleitende Animationseffekte zu erstellen.

<!DOCTYPE html><html><head>
  <meta charset="utf-8">
  <title>JS animation</title>
  <style>
    *{ margin: 0; padding: 0; }
    p{ background-color: green; width: 100px; height: 100px; }
  </style></head><body><p id="p1"></p><script>
  p1.style.position = 'absolute'
  p1.style.left = 0
  var n = 0
  var id = setInterval(  ()=>  {
    n = n + 5
    p1.style.left = n + 'px'
    if(n>100){
      window.clearInterval(id)
    }
  },1000/24)</script></body></html>

Wir wissen, dass uns die Kombination statischer Bilder aufgrund der visuellen Retention die Illusion einer Animation vermittelt. Hier bewege ich dieses kleine Quadrat 24 Mal pro Sekunde, jedes Mal 5 Pixel, und nutze diese Illusion, um es so aussehen zu lassen, als würde es sich langsam bewegen.
Legen Sie zunächst den Stil von p1 fest, damit wir dessen Versatz nach links steuern können. Der Offset wird durch n gesteuert, das immer größer wird.
Da die Animation gestoppt werden muss, verwenden wir die if-Beurteilung, um das Intervall mit dem Namen id zu löschen, wenn n>100, sodass es nicht mehr funktioniert.

Verwandte Empfehlungen:

jQuery-Methode zur Implementierung des menüsensitiven Mausgleitanimationseffekts_jquery

Das obige ist der detaillierte Inhalt vonTeilen eines Beispiels für einen js-Gleitanimationseffekt. 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：Wie implementiert man den Animationseffekt des Mausantwortpuffers?Nächster Artikel：Wie implementiert man den Animationseffekt des Mausantwortpuffers?

In Verbindung stehende Artikel

Mehr sehen