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>
