ES6 动画
我们可以使用 JavaScript 创建具有但不限于以下元素的复杂动画
- 烟花
- 淡入淡出效果
- 滚入或滚出
- 页入或页出
- 物体运动
在本章中,我们将看到如何使用 JavaScript 来创建动画。
JavaScript 可用于根据由逻辑等式或函数确定的某种模式在页面周围移动许多 DOM 元素(<img />
、<div>
或任何其他 HTML 元素)。
JavaScript 提供了以下在动画程序中经常使用的函数。
- setTimeout(function, duration) - 此函数在从现在开始持续时间毫秒后调用该函数。
- setInterval(function, duration) - 此函数在每 duration 毫秒后调用该函数。
- clearTimeout(setTimeout_variable) - 此函数清除由 setTimeout() 函数设置的任何计时器。
JavaScript 还可以设置 DOM 对象的许多属性,包括它在屏幕上的位置。 我们可以设置对象的 top 和 left 属性以将其定位在屏幕上的任意位置。 以下是相同的语法。
// 设置距屏幕左边缘的距离。
object.style.left = distance in pixels or points;
// 或者
// 设置与屏幕顶部边缘的距离。
object.style.top = distance in pixels or points;
手动动画
因此,让我们使用 DOM 对象属性和 JavaScript 函数实现一个简单的动画,如下所示。 以下列表包含不同的 DOM 方法。
我们使用 JavaScript 函数 getElementById()
获取 DOM 对象,然后将其分配给全局变量 imgObj。
我们定义了一个初始化函数 init() 来初始化 imgObj,我们已经设置了它的位置和左侧属性。
我们在窗口加载时调用初始化函数。
我们正在调用 moveRight() 函数以将左侧距离增加 10 个像素。 您也可以将其设置为负值以将其移至左侧。
示例
试试下面的例子
<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);
// 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。 此链接是图片。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();
// 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>