ES6动画

JavaScript中的动画可以处理CSS无法处理的事情。 JavaScript中的几个元素可帮助创建复杂的动画，例如淡入淡出效果，Fireworks，滚入或滚出等。通过使用JavaScript，我们可以移动，或任何其他DOM元素其他HTML元素。

有两种在JavaScript中执行动画的方法，如下所示：

• 使用setInterval()方法：它接受两个参数，它们是一个函数和一个整数。此方法通过使用clearInterval()方法终止。
• 使用requestAnimationFrame()方法：当屏幕准备好接受下一次重绘时，此方法将运行该函数。它采用单个参数函数。当我们递归调用此方法时，就会产生动画效果。预期的动画是一帧一帧地创建的，并且在浏览器准备就绪时会调用每一帧。

让我们尝试详细说明这些方法。

setInterval()方法

它是JavaScript产生动画效果的传统方法。它依靠重复执行代码来逐帧更改元素。

anime = setInterval(show, t);
//It calls the function show after every t milliseconds
clearInterval(anime);
//It terminates above process

如果函数show产生元素样式的更改，则可以使用setInterval(show，t)方法在每个时间间隔后逐步产生元素样式的更改。如果时间间隔较小，则动画看起来是连续的。

requestAnimationFrame()方法

此方法易于设置且难以取消。它经过优化以执行流畅的动画。需要手动创建其中的循环，并且还需要手动设置时序。请勿以特定间隔使用此方法。

此方法旨在以60fps(每秒帧数)的速度循环执行平滑的动画。它不会在后台运行，而且还是节能的。

现在，让我们看一些JavaScript动画的演示。

示例1

在此示例中，我们通过使用DOM对象的属性和JavaScript函数来实现简单的动画。我们使用JavaScript函数getElementById()获取DOM对象，然后将该对象分配给全局变量。

通过使用以下示例，让我们了解简单的动画。

例

 
    
       
    
   
    
      
 
          
         
            
Click the below button to move the image right
 
         
       
      
   
   

示例2

让我们了解另一个JavaScript动画示例。

在此动画中，我们将使用函数。显然，如果使用setTimeout()函数，则要清除计时器，我们必须手动设置JavaScript的clearTimeout()函数。

在上面的示例中，我们看到了图像如何在每次单击时向右移动。让我们尝试使用JavaScript的setTimeout()函数自动执行此过程。

 
    
       
       
    

    
      
 
          
         
         
Click the following buttons to handle animation
 
          
          
         
          
    

带有鼠标事件的图像翻转

让我们理解动画的另一个示例，其中有一个鼠标事件导致图像翻转。当鼠标移到图像上时， HTTP图像将从第一个图像更改为第二个图像。但是，当鼠标从图像上移开时，将显示原始图像。

例

该onmouseover事件处理程序的触发器，当用户将鼠标移动到链接，和onmouseout事件处理程序获取触发，当用户将鼠标移动从链接了。

   
   
         
      
   
   
   
   
      
      
         
      



      
Move your mouse over the image to see the result