Sådan oprettes: JavaScript HTML-animation
- Previous page Syntax highlighter
- Next page JS string length
Lær, hvordan man bruger JavaScript til at skabe animationer.
En grundlæggende webside
For at demonstrere, hvordan man bruger JavaScript til at skabe HTML-animation, kan vi bruge en simpel webside.
eksempel
<!DOCTYPE html>
<html>
<body>
<h1>Min første JavaScript-animation</h1>
<div id="myContainer">
<div id="myAnimation">Min animation vil komme her</div>
</div>
</body>
<html>
sæt elementets stil
For at gøre animationen mulig, skal animationselementet animeres relativt til en 'overordnede container'.
containerelementet skal bruge style="position: relativ" opret
animationselementet skal bruge style="position: absolut" opret
eksempel
#myContainer {
bredde: 400px;
højde: 400px;
position: relativ;
baggrund: guld;
}
#myAnimation {
bredde: 50px;
højde: 50px;
position: absolut;
baggrund: rød;
}
Animationsskript
JavaScript-animationer opnås ved programmering af gradvis ændring af elementets stil.
Disse ændringer udføres af en tidsstyring. Når tidsstyringsintervallet er meget lille, ser animationen ud til at være kontinuerlig.
Grundlæggende kode er:
eksempel
var id = setInterval(frame, 5);
function frame() {
hvis (/* test for færdig */) {
clearInterval(id);
} ellers {
/* Ændre elementets stil */
}
}
Opret animation med JavaScript
eksempel
var id = null;
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
clearInterval(id);
id = setInterval(frame, 10);
function frame() {
hvis (pos == 350) {
clearInterval(id);
} ellers {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
- Previous page Syntax highlighter
- Next page JS string length
