ES6 - 动画

ES6 动画

您可以使用JavaScript创建一个复杂的动画，其中包含但不限于以下元素 -

  • 烟花
  • 淡入淡出效果
  • 滚入或滚出
  • 页面进入或翻出
  • 对象移动

在本章中，我们将看到如何使用JavaScript创建动画。

根据逻辑方程或函数确定的某种模式，可以使用JavaScript来移动页面周围的大量DOM元素（<img/>，<div>或任何其他HTML元素）。

JavaScript提供了以下功能，以便在动画程序中经常使用。

  • setTimeout（function，duration） - 此函数从现在开始持续毫秒后调用该函数。
  • setInterval（function，duration） - 此函数在每个持续时间毫秒后调用该函数。
  • clearTimeout（setTimeout_variable） - 该函数清除由setTimeout（）函数设置的任何计时器。

JavaScript还可以设置DOM对象的许多属性，包括其在屏幕上的位置。您可以设置对象的顶部和左侧属性，将其放置在屏幕的任何位置。以下是相同的语法。

// 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，我们已经设置了它的位置和左侧属性。
  • 我们在窗口加载时调用初始化函数。
  • 我们调用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>