ES6动画介绍和用法示例 _ES6动画

本文概述

setInterval()方法
requestAnimationFrame()方法
带有鼠标事件的图像翻转

JavaScript中的动画可以处理CSS无法处理的事情。 JavaScript中的多个元素可帮助创建复杂的动画, 例如淡入淡出效果, Fireworks, 滚入或滚出等。通过使用JavaScript, 我们可以移动< / img> , < / div> 或其他任何DOM元素其他HTML元素。
【ES6动画介绍和用法示例】有两种在JavaScript中执行动画的方法, 如下所示：

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

让我们尝试详细说明这些方法。
setInterval()方法它是JavaScript产生动画效果的传统方法。它依靠重复执行代码来逐帧更改元素。

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

如果函数show产生元素样式的更改, 则可以使用setInterval(show, t)方法在每个时间间隔后逐步产生元素样式的更改。如果时间间隔较小, 则动画看起来是连续的。
requestAnimationFrame()方法此方法易于设置且难以取消。它经过优化以执行流畅的动画。需要手动创建其中的循环, 并且还需要手动设置时序。请勿以特定间隔使用此方法。
此方法旨在以60fps(每秒帧数)的速度循环执行平滑的动画。它不会在后台运行, 而且还是节能的。
现在, 让我们看一些JavaScript动画的演示。
示例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 = "http://www.srcmini.com/train1.png" /> < center> < p> Click the below button to move the image right< /p> < input type = "button" value = "http://www.srcmini.com/Click Me" onclick = "moveRight(); " /> < /center> < /form> < /body> < /html>

输出如下

LIVE OUTPUT

示例2
让我们了解另一个JavaScript动画示例。
在此动画中, 我们将使用JavaScript的setTimeout()函数。显然, 如果使用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 = "http://www.srcmini.com/train1.png" /> < center> < h2 style="color:darkblue; "> Click the following buttons to handle animation< /h2> < input type="button" value="http://www.srcmini.com/Start" onclick = "towardRight(); " /> < input type = "button" value="http://www.srcmini.com/Stop" onclick = "stop(); " /> < center> < /form> < /body> < /html>

输出如下

LIVE OUTPUT

带有鼠标事件的图像翻转让我们了解动画的另一个示例, 其中有一个鼠标事件导致图像翻转。当鼠标移到图像上时, HTTP图像将从第一个图像更改为第二个图像。但是, 当鼠标从图像上移开时, 将显示原始图像。
例子
当用户将鼠标移到链接上时, onMouseOver事件处理程序将触发, 而当用户将鼠标从链接上移开时, onMouseOut事件处理程序将被触发。

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

输出如下