Animacje HTML DOM JavaScript

Nauka tworzenia animacji HTML za pomocą JavaScript.

Podstawowa strona

Aby pokazać, jak tworzyć animacje HTML za pomocą JavaScript, użyjemy prostej strony internetowej:

Przykład

<!DOCTYPE html>
<html>
<body>
<h1>Moja pierwsza animacja JavaScript</h1>
<div id="animation">Moja animacja tutaj.</div>
</body>
</html>

Utwórz kontener animacji

Wszystkie animacje powinny być powiązane z elementem kontenera.

Przykład

<div id ="container">
    <div id ="animate">Moja animacja tutaj.</div>
</div>

dodaj styl do elementu

powinno się użyć style = "position: relative" utworzyć element kontenera.

powinno się użyć style = "position: absoluteUtwórz element animacji.

Przykład

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

Spróbuj sam

Kod animacji

Animacje JavaScript są tworzone poprzez programowanie stopniowych zmian stylu elementu.

Zmiany są wywoływane przez licznik. Kiedy licznik ma małą wartość między licznikami, animacja wygląda płynnie.

Podstawowy kod to:

Przykład

var id = setInterval(frame, 5);
function frame() {
    if (/* test, czy zakończono */) {
        clearInterval(id);
    } else {
         /* Kod zmiany stylu elementu */
    }
}

Tworzenie animacji za pomocą JavaScript

Przykład

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'; 
        }
     }
}

Spróbuj sam