ES6 变量

ES6 动画

JavaScript 中的动画可以处理 CSS 无法处理的事情。 JavaScript 中的几个元素有助于创建复杂的动画，例如淡入淡出效果、烟花、滚入或滚out, 等。通过使用 JavaScript，我们可以移动 DOM 元素，例如 </img>、</div> 或任何其他 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 动画的一些演示。

Example-1

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

让我们通过以下示例来理解简单的动画。

示例

<html> 
   <head> 
      <script type = "text/javascript"> 
    
            var img = null; 
            function init(){  
               img = document.getElementById('myimg');
               img.style.position = 'relative';     
               img.style.left = '50px';   
            }     
            function moveRight(){  
               img.style.left = parseInt(
               img.style.left) + 100 + 'px';  
            }  
            window.onload = init;  
   
      </script> 
   </head> 
   
   <body> 
      <form> 
         <img id = "myimg" src = "train1.png" /> 
         <center>
            <p>Click the below button to move the image right</p> 
         <input type = "button" value = "Click Me" onclick = "moveRight();" />
      </center> 
      </form>
   </body>
   
</html>

Example-2

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

在这个动画中，我们将使用 setTimeout() JavaScript 的功能。很明显，如果我们使用setTimeout()函数，那么要清除计时器，我们必须手动设置JavaScript的clearTimeout()函数。

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

<html> 
   <head> 
      <title>JavaScript Animation</title> 
      <script type = "text/javascript"> 
            var anime ; 
            function init(){  
               img = document.getElementById('myimg');     
               img.style.position = 'relative';    
               img.style.left = '0px'; 
            }  
            function towardRight(){  
               img.style.left = parseInt(img.style.left) + 10 + 'px';    
               anime = setTimeout(towardRight,50); 
            }  
            function stop() {     
               clearTimeout(anime);    
              img.style.left = '0px';   
            }  
            window.onload = init;  
      </script> 
   </head> 
   <body> 
      <form> 
         <img id = "myimg" src = "train1.png" /> 
         <center>
         <h2 style="color:darkblue;">Click the following buttons to handle animation</h2> 
         <input type="button" value="Start" onclick = "towardRight();" /> 
         <input type = "button" value="Stop" onclick = "stop();" /> 
         <center>
      </form>    
   </body> 
</html>

鼠标事件的图像翻转

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

示例

onMouseOver当用户将鼠标移到链接上时触发事件处理程序，当用户将鼠标移离链接时触发 onMouseOut 事件处理程序。

<html>
   
   <head>
         
      <script type = "text/javascript">
            if(document.images) {
               var img1 = new Image();     
               img1.src = "cat.jpg";
               var img2 = new Image();     
               img2.src = "tiger.jpg";
            }
      </script>
   </head>
   
   <body>
   <center>
      
      <a href = "#" onMouseOver = "document.myImg.src = img2.src;"
         onMouseOut = "document.myImg.src = img1.src;">
         <img name = "myImg" src = "cat.jpg" />
      </a><br><br><br>
      <h1>Move your mouse over the image to see the result</h1>
   </center>
   </body>
</html>

ES6 函数

ES6 变量