JavaScript - 動畫

您可以使用 JavaScript 建立複雜的動畫，包括但不限於以下元素：

煙火
淡入淡出效果
捲入或卷出
頁面進入或頁面退出
物件移動

您可能對現有的基於 JavaScript 的動畫庫感興趣：Script.Aculo.us。

本教程提供了一個關於如何使用 JavaScript 建立動畫的基本理解。

JavaScript 可用於根據某種由邏輯方程式或函式確定的模式，在頁面上移動多個 DOM 元素（<img />、<div> 或任何其他 HTML 元素）。

JavaScript 提供了以下兩個函式，這些函式在動畫程式中經常使用。

setTimeout( function, duration) − 此函式在從現在開始的 duration 毫秒後呼叫 function。
setInterval(function, duration) − 此函式每隔 duration 毫秒呼叫 function。
clearTimeout(setTimeout_variable) − 此函式清除由 setTimeout() 函式設定的任何計時器。

JavaScript 還可以設定 DOM 物件的多個屬性，包括其在螢幕上的位置。您可以設定物件的 top 和 left 屬性以將其放置在螢幕上的任何位置。以下是其語法。

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

手動動畫

因此，讓我們使用 DOM 物件屬性和 JavaScript 函式實現一個簡單的動畫，如下所示。以下列表包含不同的 DOM 方法。

我們使用 JavaScript 函式 getElementById() 獲取 DOM 物件，然後將其分配給全域性變數 imgObj。
我們定義了一個初始化函式 init() 來初始化 imgObj，其中我們設定了它的 position 和 left 屬性。
我們在視窗載入時呼叫初始化函式。
最後，我們呼叫 moveRight() 函式將左側距離增加 10 畫素。您也可以將其設定為負值以將其移動到左側。

示例

嘗試以下示例。

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

自動動畫

在上面的示例中，我們看到了影像如何隨著每次點擊向右移動。我們可以使用 JavaScript 函式 setTimeout() 自動執行此過程，如下所示：

在這裡，我們添加了更多方法。讓我們看看這裡有什麼新東西：

moveRight() 函式呼叫 setTimeout() 函式來設定 imgObj 的位置。
我們添加了一個新函式 stop() 來清除由 setTimeout() 函式設定的計時器，並將物件設定在其初始位置。

示例

嘗試以下示例程式碼。

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

滑鼠事件的懸停效果

這是一個簡單的示例，顯示了影像在滑鼠事件上的懸停效果。

讓我們看看我們在以下示例中使用了什麼：

在載入此頁面時，“if”語句檢查影像物件是否存在。如果影像物件不可用，則不會執行此塊。
Image() 建構函式建立並預載入一個名為 image1 的新影像物件。
src 屬性被分配了名為 /images/html.gif 的外部影像檔案的名稱。
類似地，我們建立了 image2 物件並在該物件中分配了 /images/http.gif。
＃（井號）停用連結，以便瀏覽器在單擊時不會嘗試轉到 URL。此連結是影像。
當用戶的滑鼠移到連結上時，將觸發 onMouseOver 事件處理程式，當用戶的滑鼠移開連結（影像）時，將觸發 onMouseOut 事件處理程式。
當滑鼠移到影像上時，HTTP 影像從第一個影像更改為第二個影像。當滑鼠從影像移開時，將顯示原始影像。
當滑鼠從連結移開時，初始影像 html.gif 將重新出現在螢幕上。

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

列印頁面