JavaScript - 动画

您可以使用 JavaScript 创建复杂的动画，包括但不限于以下元素 -

• 烟花
• 淡入/淡出效果
• 滚入/滚出
• 页面移入/页面移出
• 对象移动

您可能对现有的基于 JavaScript 的动画库感兴趣:Script.Aculo.us。

本教程将帮助您基本了解如何使用 JavaScript 创建动画。

JavaScript 可用于根据由逻辑方程或函数。

JavaScript 提供了以下两个在动画程序中经常使用的函数。

• setTimeout( function, Duration) − 此函数从现在起经过 duration 毫秒后调用 function。

• setInterval(function, Duration) − 此函数每隔 duration 毫秒调用 function。

• clearTimeout(setTimeout_variable) − 此函数清除由 setTimeout() 函数设置的任何计时器。

JavaScript 还可以设置 DOM 对象的许多属性，包括其在屏幕上的位置。您可以设置对象的 top 和 left 属性，以将其定位在屏幕上的任何位置。其语法如下。

// 设置距屏幕左边缘的距离。
object.style.left = distance in pixels or points; 

或

// 设置距屏幕上边缘的距离。
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();     // 预加载图像
            image1.src = "/images/html.gif";
            var image2 = new 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>