Hoạt hình DOM HTML JavaScript
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:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h1>My First
JavaScript Animation</h1>
<div id="animation">My animation will go here</div>
</body>
</html>
Tạo một vùng chứa hoạt ảnh
Tất cả hoạt ảnh phải liên quan đến phần tử vùng chứa.
Ví 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 bằng style=" position: relative
".
Phần tử hoạt ảnh phải được tạo bằng style=" position: absolute
".
Ví dụ
#container {
width: 400px;
height:
400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height:
50px;
position: absolute;
background: red;
}
Hãy tự mình thử » Mã hoạt hì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 về kiểu dáng của một phần tử.
Những thay đổi được gọi bởi một bộ đếm thời gian. Khi khoảng thời gian hẹn giờ nhỏ, hoạt ảnh trông có vẻ liên tục.
Mã cơ bản là:
Ví 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
Ví 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';
}
}
}
Hãy tự mình thử »