CÁCH LÀM - JavaScript HTML Animations
Tìm hiểu cách tạo hoạt ảnh 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 ta có thể sử dụng một trang web đơn giản.
Thí dụ
<!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>
Tạo kiểu cho các phần tử
Để tạo hoạt ảnh khả thi, phần tử hoạt ảnh phải được làm động tương ứng với "vùng chứa mẹ".
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: tuyệt đối".
Thí dụ
#myContainer {
width: 400px;
height:
400px;
position: relative;
background: yellow;
}
#myAnimation {
width: 50px;
height:
50px;
position: absolute;
background: red;
}
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 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ụ
var id = setInterval(frame, 5);
function frame() {
if (/*
test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}
Tạo hoạt ảnh bằng JavaScript
Thí dụ
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';
}
}
}