JavaScript HTML DOM-animatie
Leer HTML-animaties maken met JavaScript.
Een eenvoudige webpagina
Om te demonstreren hoe u HTML-animaties maakt met JavaScript, gebruiken we een eenvoudige webpagina:
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<h1>My First
JavaScript Animation</h1>
<div id="animation">My animation will go here</div>
</body>
</html>
Een animatiecontainer maken
Alle animaties moeten relatief zijn aan een containerelement.
Voorbeeld
<div id ="container">
<div id ="animate">My
animation will go here</div>
</div>
Stijl de elementen
Het containerelement moet worden gemaakt met style = " position: relative".
Het animatie-element moet worden gemaakt met style = " position: absolute".
Voorbeeld
#container {
width: 400px;
height:
400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height:
50px;
position: absolute;
background: red;
}
Animatiecode
JavaScript-animaties worden gedaan door geleidelijke veranderingen in de stijl van een element te programmeren.
De wijzigingen worden opgeroepen door een timer. Als het timerinterval klein is, ziet de animatie er continu uit.
De basiscode is:
Voorbeeld
id = setInterval(frame, 5);
function frame() {
if (/*
test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}
Maak de volledige animatie met JavaScript
Voorbeeld
function myMove() {
let id = null;
const elem = document.getElementById("animate");
let pos = 0;
clearInterval(id);
id = setInterval(frame, 5);
function frame() {
if (pos ==
350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}