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>

打印页面