How TO - JavaScript HTML-animaties
Leer hoe u animaties maakt met JavaScript.
Een eenvoudige webpagina
Om te demonstreren hoe HTML-animaties met JavaScript kunnen worden gemaakt, kunnen we een eenvoudige webpagina gebruiken.
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<h1>My First
JavaScript Animation</h1>
<div id ="myContainer">
<div id ="myAnimation">My
animation will go here</div>
</div>
</body>
<html>
De elementen stylen
Om een animatie mogelijk te maken, moet het geanimeerde element geanimeerd zijn ten opzichte van een "oudercontainer".
Het containerelement moet worden gemaakt met style = "position: relative".
Het animatie-element moet worden gemaakt met style = "position: absoluut".
Voorbeeld
#myContainer {
width: 400px;
height:
400px;
position: relative;
background: yellow;
}
#myAnimation {
width: 50px;
height:
50px;
position: absolute;
background: red;
}
De 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
var id = setInterval(frame, 5);
function frame() {
if (/*
test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}
Maak de animatie met JavaScript
Voorbeeld
var id = null;
function myMove() {
var elem =
document.getElementById("myAnimation");
var pos = 0;
clearInterval(id);
id = setInterval(frame, 10);
function frame() {
if (pos ==
350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}