JavaScript HTML DOM-animasie
Leer om HTML-animasies te skep met JavaScript.
'n Basiese Webblad
Om te demonstreer hoe om HTML-animasies met JavaScript te skep, sal ons 'n eenvoudige webblad gebruik:
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<h1>My First
JavaScript Animation</h1>
<div id="animation">My animation will go here</div>
</body>
</html>
Skep 'n animasiehouer
Alle animasies moet relatief tot 'n houerelement wees.
Voorbeeld
<div id ="container">
<div id ="animate">My
animation will go here</div>
</div>
Stileer die elemente
Die houerelement moet geskep word met style = " position: relative
".
Die animasie-element moet geskep word met style = " position: absolute
".
Voorbeeld
#container {
width: 400px;
height:
400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height:
50px;
position: absolute;
background: red;
}
Animasie kode
JavaScript-animasies word gedoen deur geleidelike veranderinge in 'n element se styl te programmeer.
Die veranderinge word deur 'n tydhouer geroep. Wanneer die timerinterval klein is, lyk die animasie deurlopend.
Die basiese kode is:
Voorbeeld
id = setInterval(frame, 5);
function frame() {
if (/*
test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}
Skep die volledige animasie 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';
}
}
}