JavaScript 动画

你可以使用JavaScript创建复杂的动画，其中包括但不限于以下元素−

烟花
淡入淡出效果
滚入或滚出
页面淡入或淡出
物体移动

你可能对现有的基于JavaScript的动画库感兴趣： Script.Aculo.us .

本教程提供了如何使用JavaScript创建动画的基本理解。

JavaScript可以根据逻辑方程或函数的某种模式在页面中移动许多DOM元素（，

或任何其他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>