Hoe OM - JavaScript HTML-animasies
Leer hoe om animasies te skep met JavaScript.
'n Basiese Webblad
Om te demonstreer hoe om HTML-animasies met JavaScript te skep, kan ons 'n eenvoudige webblad gebruik.
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>
Stileer die elemente
Om 'n animasie moontlik te maak, moet die geanimeerde element geanimeer word relatief tot 'n "ouerhouer".
Die houerelement moet geskep word met styl = "posisie: relatief".
Die animasie-element moet geskep word met styl = "posisie: absoluut".
Voorbeeld
#myContainer {
width: 400px;
height:
400px;
position: relative;
background: yellow;
}
#myAnimation {
width: 50px;
height:
50px;
position: absolute;
background: red;
}
Die animasiekode
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
var id = setInterval(frame, 5);
function frame() {
if (/*
test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}
Skep die animasie 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';
}
}
}