ES6 - 动画 Animation
您可以使用JavaScript创建复杂的动画，但不限于以下元素 -
- Fireworks
- 淡化效果
- Roll-in or Roll-out
- Page-in或Page-out
- Object movements
在本章中，我们将了解如何使用JavaScript创建动画。
JavaScript可用于根据逻辑方程或函数确定的某种模式在页面周围移动大量DOM元素（，
JavaScript提供了以下在动画程序中经常使用的函数。
setTimeout （function，duration） - 此函数从现在起持续几毫秒后调用该函数。
setInterval （function，duration） - 此函数在每个持续时间毫秒后调用该函数。
clearTimeout （setTimeout_variable） - 该函数清除setTimeout（）函数设置的任何计时器。
JavaScript还可以设置DOM对象的许多属性，包括它在屏幕上的位置。 您可以设置对象的顶部和左侧属性，以将其放置在屏幕上的任何位置。 以下是相同的语法。
// Set distance from left edge of the screen.
object.style.left = distance in pixels or points;
or
// Set distance from top edge of the screen.
object.style.top = distance in pixels or points;
手动动画
因此，让我们使用DOM对象属性和JavaScript函数实现一个简单的动画，如下所示。 以下列表包含不同的DOM方法。
我们使用JavaScript函数getElementById()来获取DOM对象，然后将其分配给全局变量imgObj 。
我们已经定义了一个初始化函数init()来初始化imgObj，我们已经设置了它的位置和左边的属性。
我们在窗口加载时调用初始化函数。
我们调用moveRight()函数将左边距离增加10个像素。 您也可以将其设置为负值，将其移动到左侧。
例子 (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（）函数设置的计时器，并将对象设置在其初始位置。
例子 (Example)
请尝试以下示例代码。
<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);
// call moveRight in 20msec
}
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。 此链接是图像。
当用户的鼠标移动到链接上时触发onMouseOut事件处理程序，当用户的鼠标离开链接（图像）时触发onMouseOut事件处理程序。
当鼠标在图像上移动时，HTTP图像从第一个图像变为第二个图像。 当鼠标远离图像时，将显示原始图像。
当鼠标远离链接时，初始图像html.gif将重新出现在屏幕上。
<html>
<head>
<title>Rollover with a Mouse Events</title>
<script type = "text/javascript">
<!--
if(document.images) {
var image1 = new Image();
// Preload an image image1.src = "/images/html.gif";
var image2 = new Image();
// Preload second 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>
成功执行上述代码后，将显示以下输出。
新页面打开