ES6 - 動畫

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

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

本章我們將學習如何使用 JavaScript 建立動畫。

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

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

setTimeout(function, duration) − 此函式在當前時間之後 duration 毫秒呼叫該函式。
setInterval(function, duration) − 此函式每隔 duration 毫秒呼叫該函式。
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>

列印頁面