Hoạt ảnh thủ công
Trong Hoạt ảnh thủ công, quá trình hoạt ảnh không được tự động hóa. Sau đây là cách thực hiện một hoạt ảnh đơn giản bằng cách sử dụng thuộc tính đối tượng DOM và các hàm JavaScript như sau. Danh sách sau chứa các phương thức DOM khác nhau.
- Chúng tôi đang sử dụng hàm JavaScript getElementById () để lấy một đối tượng DOM rồi gán nó cho một biến toàn cục imgObj.
- Chúng tôi đã xác định một hàm khởi tạo init () để khởi tạo imgObj nơi chúng tôi đã thiết lập vị trí và các thuộc tính bên trái của nó.
- Chúng tôi đang gọi hàm khởi tạo tại thời điểm tải cửa sổ.
- Cuối cùng, chúng tôi đang gọi moveRight () chức năng tăng khoảng cách bên trái lên 10 pixel. Bạn cũng có thể đặt nó thành giá trị âm để di chuyển nó sang bên trái.
Ví dụ
Bạn có thể thử chạy mã sau để triển khai hoạt ảnh trong JavaScript,
<html>
<head>
<title>JavaScript Animation</title>
<script>
<!--
var imgObj = null;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>Click button below to move the image to right</p>
<input type = "button" value = "Click Me" onclick = "moveRight();" />
</form>
</body>
</html> Hoạt ảnh tự động
Chúng tôi có thể tự động hóa quy trình này bằng cách sử dụng hàm JavaScript setTimeout () như sau -
Ở đây chúng tôi đã thêm nhiều phương pháp hơn. Vì vậy, hãy xem có gì mới ở đây -
- moveRight () hàm đang gọi setTimeout () hàm để đặt vị trí của imgObj.
- Chúng tôi đã thêm một hàm mới stop () để xóa bộ hẹn giờ do setTimeout () đặt và để đặt đối tượng ở vị trí ban đầu của nó.
Ví dụ
Bạn có thể thử chạy mã sau để triển khai Hoạt ảnh tự động trong JavaScript -
<html>
<head>
<title>JavaScript Animation</title>
<script>
<!--
var imgObj = null;
var animate ;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
animate = setTimeout(moveRight,20); // call moveRight in 20msec
}
function stop(){
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>Click the buttons below to handle animation</p>
<input type = "button" value = "Start" onclick = "moveRight();" />
<input type = "button" value = "Stop" onclick = "stop();" />
</form>
</body>
</html>