Hur man skapar: JavaScript HTML-animation
- Föregående sida Syntax highlighter
- Nästa sida JS stränglängd
Lär dig hur du skapar animation med JavaScript.
En grundläggande webbsida
För att visa hur man skapar HTML-animation med JavaScript kan vi använda en enkel webbsida.
exempel
<!DOCTYPE html>
<html>
<body>
<h1>Min första JavaScript-animation</h1>
<div id="myContainer">
<div id="myAnimation">Min animation kommer att vara här</div>
</div>
</body>
<html>
Ställ in elementets stil
För att göra animation möjlig måste animationselementet animeras relativt till en "förälder-container".
Använd containerelementet style="position: relaterad" skapa
Använd animationselementet style="position: absolut" skapa
exempel
#myContainer {
width: 400px;
height: 400px;
position: relaterad;
background: yellow;
{}
#myAnimation {
width: 50px;
height: 50px;
position: absolut;
background: red;
{}
Animationens kod
JavaScript-animation uppnås genom att programmatiskt gradvis ändra elementets stil.
Dessa förändringar utförs av en timer. När tidsintervallet är mycket litet, ser animationen kontinuerlig ut.
Grundläggande kod är:
exempel
var id = setInterval(ram, 5);
function ram() {
om (/* kontrollera om det är klart */) {
clearInterval(id);
} annars {
/* Ändra elementets stil */
{}
{}
Skapa animation med JavaScript
exempel
var id = null;
function minRor() {
var elem = document.getElementById("myAnimation");
var pos = 0;
clearInterval(id);
id = setInterval(ram, 10);
function ram() {
om (pos == 350) {
clearInterval(id);
} annars {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
{}
{}
{}
- Föregående sida Syntax highlighter
- Nästa sida JS stränglängd
