Cách thực hiện - Hoạt ảnh HTML JavaScript
Tìm hiểu cách tạo hoạt ảnh bằng JavaScript.
Một trang web cơ bản
Để minh họa 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.
Ví 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>
Hãy tự mình thử » Tạo kiểu cho các phần tử
Để có thể tạo hoạt ảnh, phần tử hoạt ảnh phải được tạo hoạt ảnh tương ứng với "vùng chứa chính".
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 bằng style="position:absolute".
Ví dụ
#myContainer {
width: 400px;
height:
400px;
position: relative;
background: yellow;
}
#myAnimation {
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ụ
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
Ví 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';
}
}
}
Hãy tự mình thử »