Hiệu ứng (Animation) trong JavaScript

Cát Tường

Bài trước

Mục lục

Bài sau

Bạn có thể sử dụng JavaScript để tạo một hiệu ứng phức tạp, không giới hạn, có các phần tử sau:

Fireworks
Fade Effect
Roll-in hoặc Roll-out
Page-in hoặc Page-out
Object movements

Bạn nên quan tâm đến thư viện hiệu ứng đang tồn tại xây dựng trên nền JavaScript: Script.Aculo.us.

Chương hướng dẫn này cung cấp cho bạn kiến thức cơ bản về cách sử dụng JavaScript để tạo một hiệu ứng.

JavaScript có thể được sử dụng để di chuyển một số phần tử DOM (<img />, <div> hoặc bất kỳ phần tử HTML nào khác) xung quanh trang theo một số mẫu được quyết định bởi một phương trình hoặc hàm logic.

JavaScript cung cấp hai hàm sau mà được sử dụng thường xuyên trong các chương trình animation.

setTimeout( function, duration) − Hàm này gọi Hàm sau quãng thời gian duration (tính bằng mili giây) từ bây giờ.
setInterval(function, duration) − Hàm này gọi Hàm sau mỗi quãng thời gian duration (tính bằng mili giây).
clearTimeout(setTimeout_variable) − Hàm này xóa bất cứ bộ bấm giờ nào được thiết lập bởi các hàm setTimeout().

JavaScript có thể cũng thiết lập một số thuộc tính của một đối tượng DOM bao gồm vị trí của nó trên màn hình. Bạn có thể thiết lập thuộc tính top và left của một đối tượng để xác định vị trí của nó bất cứ đâu trên màn hình. Dưới đây là cú pháp:

// 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;

Animation thao tác tay

Bây giờ chúng ta cùng thực hiện một animation đơn giản sử dụng các thuộc tính đối tượng DOM và các hàm JavaScript như sau. Sau đây liệt kê các phương thức DOM khác nhau:

Chúng tôi đang sử dụng hàm getElementById() để nhận một đối tượng DOM và sau đó gán nó tới một biến Global là imgObj.

Chúng tôi đã định nghĩa một hàm khởi tạo init() để khởi tạo imgObj, ở đây chúng tôi đã thiết lập các thuộc tính position và left 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 hàm moveRight() để tăng khoảng cách trái bởi 10 pixel. Bạn có thể cũng thiết lập nó một giá trị âm để di chuyển nó sang cạnh trái.

Ví dụ

Bạn 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>

Kết quả

Chạy theo lệnh trên để xem kết quả

Animation tự động hóa

Trong ví dụ trên, chúng ta đã thấy cách một hình ảnh di chuyển qua phải mỗi khi nhấp chuột. Chúng ta có thể tự độ hóa tiến trình này bởi sử dụng hàm setTimeout() như sau:

Dưới đây, chúng tôi thêm nhiều phương thức hơn. Đó là:

Hàm moveRight() đang gọi hàm setTimeout() để thiết lập vị trí của imgObj.

Chúng tôi đã thêm một hàm mới là stop() để xóa bộ bấm giờ được thiết lập bởi hàm setTimeout() và để thiết lập đối tượng tại vị trí khởi tạo.

Ví dụ

Bạn thử code 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>

Kết quả

Chạy theo lệnh trên để xem kết quả

Rollover với một Mouse Event

Dưới đây là ví dụ đơn giản minh họa rollover hình ảnh với một Mouse Event.

Chúng ta cùng quan sát những gì đang được sử dụng trong ví dụ này:

Tại thời điểm tải trang này, lệnh if kiểm tra cho sự tồn tại của đối tượng Image. Nếu đối tượng Image này không có sẵn, khối này sẽ không được thực thi.

Image() constructor tạo và tải lại một đối tượng Image mới gọi là image1.

Thuộc tính src được gán tên của image file ngoại vi 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 # vô hiệu hóa đường link để mà trình duyệt không cố gắng tới URL khi được click. Link này là một hình ảnh.

Phương thức xử lý lỗi onMouseOver được kích hoạt khi người dùng di chuyển chuột qua link (hình ảnh đó), và onMouseOut event handler đươc kích hoạt khi người dùng di chuyển chuột ra khỏi link đó.

Khi di chuyển chuột qua hình ảnh, HTTP image thay đổi từ hình ảnh đầu tiên tới hình ảnh thứ hai. Khi di chuyển chuột ra khỏi hình ảnh, thì hình ảnh ban đầu được hiển thị.

Khi di chuyển chuột ra khỏi link, hình ảnh khởi tạo đầu tiên html.gif sẽ tái xuất hiện 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>