JavaScript - 动画

您可以使用JavaScript创建一个复杂的动画,但不限于以下元素和减号;

  • Fireworks

  • 淡化效果

  • 滚入或滚出

  • Page-in或Page-out

  • 对象移动

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

本教程提供了有关如何使用JavaScript的基本知识创建动画.

JavaScript可用于根据页面移动大量DOM元素(< img/>,< div>或任何其他HTML元素)由逻辑方程或函数确定的某种模式.

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

  • setTimeout(函数,du日粮) : 此函数在持续时间毫秒后调用函数.

  • setInterval(函数,持续时间) ) : 此函数在每持续时间毫秒后调用函数.

  • clearTimeout(setTimeout_variable) : 此函数调用清除setTimeout()函数设置的任何计时器.

JavaScript还可以设置DOM对象的许多属性,包括它在屏幕上的位置.您可以设置对象的 top 和left属性,将其放置在屏幕上的任何位置.这是它的语法.

 //设置距离屏幕左边缘的距离. 
 object.style.left =以像素或点为单位的距离; 
或
//设置距屏幕上边缘的距离. 
 object.style.top =以像素或点为单位的距离;


手动动画

因此,让我们使用DOM对象属性和JavaScript函数实现一个简单的动画,如下所示.以下列表包含不同的DOM方法.

  • 我们使用的是JavaScript函数 getElementById()获取DOM对象,然后将其分配给全局变量 imgObj .

  • 我们已经定义了一个初始化函数 init ()初始化 imgObj 我们设置了位置属性.

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

  • 最后,我们调用 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 事件处理程序被触发,而

  • 当鼠标移过图像时, 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>