JavaScript HTML DOM Animation
Tìm hiểu cách tạo hoạt ảnh HTML bằng JavaScript.
Một trang web cơ bản
Để trình bày cách tạo hoạt ảnh HTML bằng JavaScript, chúng tôi sẽ sử dụng một trang web đơn giản:
Thí dụ
<!DOCTYPE html>
<html>
<body>
<h1>My First
JavaScript Animation</h1>
<div id="animation">My animation will go here</div>
</body>
</html>
Tạo vùng chứa hoạt ảnh
Tất cả các hoạt ảnh phải liên quan đến một phần tử vùng chứa.
Thí dụ
<div id ="container">
<div id ="animate">My
animation will go here</div>
</div>
Tạo kiểu cho các phần tử
Phần tử vùng chứa phải được tạo với style = " position: relative
".
Phần tử hoạt ảnh phải được tạo với style = " position: absolute
".
Thí dụ
#container {
width: 400px;
height:
400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height:
50px;
position: absolute;
background: red;
}
Mã hoạt ảnh
Hoạt ảnh JavaScript được thực hiện bằng cách lập trình các thay đổi dần dần trong kiểu của phần tử.
Các thay đổi được gọi bằng bộ đếm thời gian. Khi khoảng thời gian hẹn giờ nhỏ, hoạt ảnh sẽ liên tục.
Mã cơ bản là:
Thí dụ
id = setInterval(frame, 5);
function frame() {
if (/*
test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}
Tạo hoạt ảnh đầy đủ bằng JavaScript
Thí dụ
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';
}
}
}