JavaScript HTML DOM Animationen

Lernen Sie, wie man HTML-Animationen mit JavaScript erstellt.

Basisseite

Um zu demonstrate, wie man HTML-Animationen mit JavaScript erstellt, verwenden wir eine einfache Webseite:

Beispiel

<!DOCTYPE html>
<html>
<body>
<h1>Meine erste JavaScript-Animation</h1>
<div id="animation">Meine Animation ist hier.</div>
</body>
</html>

Erstellen Sie den Animationskontainer

Alle Animationen sollten mit dem Container-Element verbunden sein.

Beispiel

<div id ="container">
    <div id ="animate">Meine Animation ist hier.</div>
</div>

Fügen Sie dem Element ein Style hinzu

sollte durch style = "position: relative" das Containerobjekt erstellen.

sollte durch style = "position: absolute"Erstellen Sie das Animationsobjekt.

Beispiel

#container {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
}
#animate {
    width: 50px;
    height: 50px;
    position: absolute;
    background: red;
}

Versuchen Sie es selbst

Animationcode

JavaScript-Animationen werden durch Programmierung von schrittweisen Veränderungen der Elementstile durchgeführt.

Diese Änderungen werden durch einen Zähler aufgerufen. Wenn der Zählerintervall sehr klein ist, scheint die Animation flüssig zu sein.

Der Grundcode ist:

Beispiel

var id = setInterval(frame, 5);
function frame() {
    if (/* Testen, ob das Testen abgeschlossen ist */) {
        clearInterval(id);
    } else {
         /* Code zum Ändern der Elementstil */
    }
}

Verwenden Sie JavaScript, um Animationen zu erstellen

Beispiel

function myMove() {
    var elem =  document.getElementById("animate"); 
    var pos = 0;
    var id = setInterval(frame, 5);
     function frame() {
        if (pos ==  350) {
             clearInterval(id);
        } else {
             pos++; 
             elem.style.top = pos + 'px'; 
             elem.style.left = pos + 'px'; 
        }
     }
}

Versuchen Sie es selbst