ES6 - 动画
您可以使用 JavaScript 创建一个复杂的动画，该动画包含(但不限于)以下元素 −
- 烟花
- 淡入淡出效果
- 滚入或滚出
- 页面进入或页面退出
- 对象移动
在本章中，我们将了解如何使用 JavaScript 创建动画。
JavaScript 可用于根据由逻辑方程或函数确定的某种模式在页面上移动多个 DOM 元素(<img />、<div> 或任何其他 HTML 元素)。
JavaScript 提供了以下函数，可在动画程序中经常使用。
setTimeout(function, duration) −此函数从现在起在 duration 毫秒后调用该函数。
setInterval(function, duration) − 此函数在每个 duration 毫秒后调用该函数。
clearTimeout(setTimeout_variable) − 此函数清除 setTimeout() 函数设置的任何计时器。
JavaScript 还可以设置 DOM 对象的多个属性，包括其在屏幕上的位置。您可以设置对象的 top 和 left 属性以将其定位在屏幕上的任何位置。以下是相同的语法。
// 设置与屏幕左边缘的距离。 object.style.left = 像素或点的距离； 或 // 设置与屏幕顶部边缘的距离。 object.style.top = 像素或点的距离；
手动动画
让我们使用 DOM 对象属性和 JavaScript 函数实现一个简单的动画，如下所示。以下列表包含不同的 DOM 方法。
我们使用 JavaScript 函数 getElementById() 获取 DOM 对象，然后将其分配给全局变量 imgObj。
我们定义了一个初始化函数 init() 来初始化 imgObj，并在其中设置了其位置和左侧属性。
我们在窗口加载时调用初始化函数。
我们调用 moveRight() 函数将左侧距离增加 10 像素。您也可以将其设置为负值以将其移动到左侧。
示例
Try the following example
<html>
<head>
<title>JavaScript Animation</title>
<script type = "text/javascript">
<!--
var imgObj = null; function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position = 'relative';
imgObj.style.left = '0px';
}
function moveRight(){
imgObj.style.left = parseInt(
imgObj.style.left) + 10 + 'px';
}
window.onload = init;
//
-->
</script>
</head>
<body>
<form>
<img id = "myImage" src = "/images/html.gif" />
<p>Click button below to move the image to right</p>
<input type = "button" value = "Click Me" onclick = "moveRight();" />
</form>
</body>
</html>
自动动画
在上面的例子中，我们看到了图像如何随着每次点击向右移动。我们可以通过使用 JavaScript 函数 setTimeout() 来自动执行此过程，如下所示。
这里我们添加了更多方法。那么，让我们看看这里有什么新东西。
moveRight() 函数正在调用 setTimeout() 函数来设置 imgObj 的位置。
我们添加了一个新函数 stop() 来清除 setTimeout() 函数设置的计时器并将对象设置在其初始位置。
示例
尝试以下示例代码。
<html>
<head>
<title>JavaScript Animation</title>
<script type = "text/javascript">
<!--
var imgObj = null; var animate ; function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position = 'relative';
imgObj.style.left = '0px';
}
function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
animate = setTimeout(moveRight,20);
// 20 毫秒后调用 moveRight
}
function stop() {
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload = init;
//
-->
</script>
</head>
<body>
<form>
<img id = "myImage" src = "/images/html.gif" />
<p>Click the buttons below to handle animation</p>
<input type="button" value="Start" onclick = "moveRight();" />
<input type = "button" value="Stop" onclick = "stop();" />
</form>
</body>
</html>
使用鼠标事件进行滚动
下面是一个简单的示例，展示了使用鼠标事件进行图像滚动。
让我们看看我们在以下示例中使用了什么 −
在加载此页面时，"if"语句会检查图像对象是否存在。如果图像对象不可用，则不会执行此块。
Image() 构造函数创建并预加载一个名为 image1 的新图像对象。
src 属性被分配了名为 /images/html.gif 的外部图像文件的名称。
同样，我们创建了 image2 对象并在该对象中分配了 /images/http.gif。
#(井号)禁用链接，以便浏览器在单击时不会尝试转到 URL。此链接是一张图片。
当用户的鼠标移到链接上时，会触发 onMouseOver 事件处理程序，而当用户的鼠标移离链接(图片)时，会触发 onMouseOut 事件处理程序。
当鼠标移到图片上时，HTTP 图像会从第一张图片变为第二张图片。当鼠标移离图片时，会显示原始图片。
当鼠标移离链接时，初始图片 html.gif 将重新出现在屏幕上。
<html>
<head>
<title>Rollover with a Mouse Events</title>
<script type = "text/javascript">
<!--
if(document.images) {
var image1 = new Image();
// 预加载图片 image1.src = "/images/html.gif";
var image2 = new Image();
// 预加载第二张图片 image2.src = "/images/http.gif";
}
//
-->
</script>
</head>
<body>
<p>Move your mouse over the image to see the result</p>
<a href = "#" onMouseOver = "document.myImage.src = image2.src;"
onMouseOut = "document.myImage.src = image1.src;">
<img name = "myImage" src = "/images/html.gif" />
</a>
</body>
</html>
