📜  ES6动画

📅  最后修改于: 2021-01-01 04:19:52             🧑  作者: Mango

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()函数自动执行此过程。

 
    
      JavaScript Animation 
       
    

    
      

Click the following buttons to handle animation

带有鼠标事件的图像翻转

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

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


   
   
         
      
   
   
   
   



Move your mouse over the image to see the result