Bạn có thể sử dụng JavaScript để tạo một hoạt ảnh phức tạp có, nhưng không giới hạn, các yếu tố sau –
- Fireworks
- Fade Effect
- Roll-in or Roll-out
- Page-in or Page-out
- Object movements
Bạn có thể quan tâm đến thư viện hoạt hình dựa trên JavaScript hiện có: Script.Aculo.us.
Hướng dẫn này cung cấp kiến thức cơ bản về cách sử dụng JavaScript để tạo hoạt ảnh.
JavaScript có thể được sử dụng để di chuyển một số phần tử DOM (,
hoặc bất kỳ phần tử HTML nào khác) xung quanh trang theo một số loại mẫu được xác định bởi một hàm hoặc phương trình logic.
JavaScript cung cấp hai chức năng sau thường được sử dụng trong các chương trình hoạt hình.
setTimeout( function, duration) − Hàm này gọi hàm sau khoảng thời gian tính bằng mili giây kể từ bây giờ. setInterval(function, duration) − Hàm này gọi hàm sau mỗi mili giây thời lượng. clearTimeout(setTimeout_variable) − Hàm này gọi xóa bất kỳ bộ đếm thời gian nào được đặt bởi các hàm setTimeout().
JavaScript cũng có thể đặt một số thuộc tính của đối tượng DOM bao gồm cả vị trí của nó trên màn hình. Bạn có thể đặt thuộc tính top và left của một đối tượng để định vị nó ở bất kỳ đâu trên màn hình. Đây là cú pháp của nó.
// Set distance from left edge of the screen. object.style.left = distance in pixels or points; or // Set distance from top edge of the screen. object.style.top = distance in pixels or points;
Manual Animation
Vì vậy, hãy triển khai một hoạt ảnh đơn giản bằng cách sử dụng các thuộc tính đối tượng DOM và các hàm JavaScript như sau. Danh sách sau đây 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 và sau đó gán nó cho một biến toàn cục imgObj. Chúng ta đã định nghĩa một hàm khởi tạo init() để khởi tạo imgObj nơi chúng ta đã đặt thuộc tính position và left của nó. Chúng tôi đang gọi chức năng khởi tạo tại thời điểm tải cửa sổ. Cuối cùng, chúng ta đang gọi hàm moveRight() để tăng khoảng cách bên trái thêm 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ụ
Hãy thử ví dụ sau.
<html>
<head>
<title>JavaScript Animation</title>
<script type = "text/javascript">
<!--
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>
Automated Animation
Trong ví dụ trên, chúng ta đã thấy cách một hình ảnh di chuyển sang phải với mỗi cú nhấp chuột. Chúng ta 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 –
Hàm moveRight() đang gọi hàm setTimeout() để đặ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ờ được đặt bởi hàm setTimeout() và đặt đối tượng ở vị trí ban đầu.
Ví dụ
Hãy thử mã ví dụ sau.
<html>
<head>
<title>JavaScript Animation</title>
<script type = "text/javascript">
<!--
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>
Rollover with a Mouse Event
Đây là một ví dụ đơn giản hiển thị di chuột qua hình ảnh với sự kiện chuột.
Hãy xem những gì chúng ta đang sử dụng trong ví dụ sau –
Tại thời điểm tải trang này, câu lệnh 'if' sẽ kiểm tra sự tồn tại của đối tượng hình ảnh. Nếu đối tượng hình ảnh không có sẵn, khối này sẽ không được thực hiện. Hàm tạo Image() tạo và tải trước một đối tượng hình ảnh mới gọi là image1. Thuộc tính src được gán tên của tệp hình ảnh bên ngoài được gọi là /images/html.gif. Tương tự, chúng ta đã tạo đối tượng image2 và gán /images/http.gif trong đối tượng này. Dấu # (dấu băm) vô hiệu hóa liên kết để trình duyệt không cố truy cập URL khi được nhấp. Liên kết này là một hình ảnh. Trình xử lý sự kiện onMouseOver được kích hoạt khi chuột của người dùng di chuyển vào liên kết và trình xử lý sự kiện onMouseOut được kích hoạt khi chuột của người dùng di chuyển ra khỏi liên kết (hình ảnh). Khi chuột di chuyển qua hình ảnh, hình ảnh HTTP sẽ thay đổi từ hình ảnh đầu tiên sang hình ảnh thứ hai. Khi di chuyển chuột ra khỏi hình ảnh, hình ảnh ban đầu được hiển thị. Khi di chuột ra khỏi liên kết, hình ảnh ban đầu html.gif sẽ xuất hiện lại trên màn hình.
<html>
<head>
<title>Rollover with a Mouse Events</title>
<script type = "text/javascript">
<!--
if(document.images) {
var image1 = new Image(); // Preload an image
image1.src = "/images/html.gif";
var image2 = new Image(); // Preload second image
image2.src = "/images/http.gif";
}
//-->
</script>
</head>
<body>
<p>Move your mouse over the image to see the result</p>
<a href = "#" onMouseOver = "document.myImage.src = image2.src;"
onMouseOut = "document.myImage.src = image1.src;">
<img name = "myImage" src = "/images/html.gif" />
</a>
</body>
</html>