动画 Animation

优质
小牛编辑
132浏览
2023-12-01

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

  • Fireworks
  • Fade Effect
  • Roll-in or Roll-out
  • Page-in or Page-out
  • Object movements

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

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

JavaScript可用于根据逻辑方程或函数确定的某种模式在页面周围移动大量DOM元素(

或任何其他HTML元素)。

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

  • setTimeout( function, duration) - 此函数从现在起duration毫秒后调用function

  • setInterval(function, duration) - 该function在每个duration毫秒后调用function

  • clearTimeout(setTimeout_variable) - 该函数调用清除setTimeout()函数设置的任何计时器。

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

// 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 ,我们已经设置了它的positionleft属性。

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

  • 最后,我们调用moveRight()函数将左边距离增加10个像素。 您也可以将其设置为负值,将其移动到左侧。

例子 (Example)

请尝试以下示例。

<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()函数设置的计时器,并将对象设置在其初始位置。

例子 (Example)

请尝试以下示例代码。

<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。 此链接是图像。

  • 当用户的鼠标移动到链接上时触发onMouseOut事件处理程序,当用户的鼠标离开链接(图像)时触发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>