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属性来在屏幕上任意定位它。以下是语法：

// 设置距离屏幕左侧的距离。
object.style.left = 距离（像素或点）;

或者

// 设置距离屏幕顶部的距离。
object.style.top = 距离（像素或点）;

手动动画

让我们使用DOM对象属性和JavaScript函数来实现一个简单的动画。以下列表包含不同的DOM方法。

我们使用JavaScript函数getElementById()来获取一个DOM对象，并将其赋值给全局变量imgObj。

我们定义了一个初始化函数init()来初始化imgObj，在那里我们设置了它的位置和left属性。

我们在窗口加载时调用初始化函数。

最后，我们调用moveRight()函数来增加left距离10像素。你也可以将其设置为负值以向左移动它。

示例

尝试以下示例。

<html>   
   <head>
      <title>JavaScript 动画</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>点击下方按钮来向右移动图像</p>
         <input type = "button" value = "点击我" onclick = "moveRight();" />
      </form>      
   </body>
</html>

自动化动画

在上面的例子中，我们看到每次点击图像都会向右移动。我们可以通过使用JavaScript函数setTimeout()来自动化这个过程，如下所示：

在这里我们添加了更多的方法。让我们看看新增了什么：

moveRight()函数调用了setTimeout()函数来设置imgObj的位置。
我们添加了一个新的函数stop()来清除由setTimeout()函数设置的定时器，并将对象恢复到初始位置。

示例

尝试以下示例代码。

<html>   
   <head>
      <title>JavaScript 动画</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);    // 在20毫秒后调用moveRight
         }
         function stop() {
            clearTimeout(animate);
            imgObj.style.left = '0px'; 
         }
         
         window.onload = init;
      </script>
   </head>
   
   <body>   
      <form>
         <img id = "myImage" src = "/images/html.gif" />
         <p>点击下方按钮来控制动画</p>
         <input type = "button" value = "开始" onclick = "moveRight();" />
         <input type = "button" value = "停止" onclick = "stop();" />
      </form>      
   </body>
</html>

鼠标事件的悬停效果

下面是一个简单的例子，展示鼠标事件的图像悬停效果。

让我们看看在以下示例中我们使用了什么：

当加载此页面时，'if'语句检查图像对象的存在。如果图像对象不可用，此块将不被执行。
Image()构造函数创建并预加载了一个名为image1的新图像对象。
src属性分配了外部图像文件的名字，即/html.gif。
同样地，我们创建了image2对象，并在此对象中指定了/http.gif。
#（井号）禁用了链接，使得浏览器在点击时不试图转到URL。此链接是一张图像。
onMouseOver事件处理程序在用户的鼠标移至链接上方时触发，而onMouseOut事件处理程序在用户的鼠标离开链接（图像）时触发。
当鼠标移过图像时，HTTP图像从第一张图像变为第二张图像。当鼠标移开图像时，原始图像重新出现。
当鼠标离开链接时，初始图像html.gif将重新出现在屏幕上。

示例

<html>   
   <head>
      <title>鼠标事件的悬停效果</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>将鼠标移到图像上查看结果</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>