Wie erstelle ich eine Frame-by-Frame-Animation mit CSS und JavaScript?-js-Tutorial-php.cn

Wie erstelle ich eine Frame-by-Frame-Animation mit CSS und JavaScript?

WBOY

Freigeben： 2023-08-31 23:37:02

nach vorne

1556 Leute haben es durchsucht

如何使用 CSS 和 JavaScript 创建逐帧动画？

Frame-by-Frame-Animation ist eine Technik, die in der Animation verwendet wird, um Bewegung zu erzeugen, indem eine Reihe statischer Bilder angezeigt wird, die nacheinander angezeigt werden. Erzielen Sie den Eindruck von Bewegung, indem Sie Bilder in schneller Folge anzeigen.

Bevor wir eine Frame-für-Frame-Animation erstellen, benötigen wir Folgendes:

Eine Reihe von Bildern (Rahmen)
Webseiten mit CSS und JavaScript

Methode

Das Erstellen einer Frame-für-Frame-Animation mit CSS und JavaScript ist relativ einfach.

Schritt 1 – Zuerst müssen Sie eine Reihe von Bildern (Rahmen) erstellen, die Sie kontinuierlich anzeigen möchten.

Schritt 1 – Als nächstes müssen Sie CSS und JavaScript verwenden, um eine Webseite zu erstellen, die Bilder in schneller Folge lädt und anzeigt.

Vollständig funktionierendes Codebeispiel

Hier ist ein vollständiges Beispiel für einen funktionierenden Code, der zeigt, wie man mit CSS und JavaScript eine Frame-für-Frame-Animation erstellt. Dieser Code lädt und zeigt 2 Bilder nacheinander an.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Frame by Frame Animation</title>
   <style>
      #container {
         width: 400px;
         height: 400px;
         position: relative;
      }
      #container img {
         position: absolute;
         top: 0;
         left: 0;
      }
   </style>
</head>
<body>
   <div id="container">
   <img src="https://www.tutorialspoint.com/static/images/logo-color.png" />
   <img src="https://www.tutorialspoint.com/images/QAicon-black.png" />
   </div>
   <script>
      var container = document.getElementById('container');
      var images = container.getElementsByTagName('img');
      var currentImage = 0;
      function changeImage() {
         images[currentImage].style.display = 'none';
         currentImage = (currentImage + 1) % images.length;
         images[currentImage].style.display = 'block';
      }
      setInterval(changeImage, 1000);
   </script>
</body>
</head>

Nach dem Login kopieren

HTML

HTML-Code ist sehr einfach. Es besteht aus einem div-Element mit der ID „container“. Es gibt 2 img-Elemente innerhalb des div-Elements. Diese img-Elemente sind die Frames der Animation.

CSS

CSS-Code zum Formatieren von div-Elementen und img-Elementen. Das div-Element erhält Breite und Höhe. Das img-Element befindet sich absolut innerhalb des div-Elements.

JavaScript

JavaScript-Code ist der Ort, an dem die Magie geschieht. Zunächst erhält der Code Verweise auf das div-Element und das img-Element. Als nächstes definiert der Code eine Variable namens „currentImage“. Diese Variable wird verwendet, um den Überblick über das aktuell angezeigte Bild zu behalten.

Dann definiert der Code eine Funktion namens „changeImage“. Diese Funktion blendet das aktuelle Bild aus und zeigt das nächste Bild in der Sequenz an.

Schließlich verwendet der Code die Funktion setInterval, um alle 1000 Millisekunden (1 Sekunde) die Funktion „changeImage“ aufzurufen. Dadurch erscheinen Bilder in schneller Folge und erzeugen die Illusion von Bewegung.

Das ist alles! Mit nur wenigen Codezeilen können Sie mit CSS und JavaScript eine einfache Frame-by-Frame-Animation erstellen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Frame-by-Frame-Animation mit CSS und JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!