ES6 动画
ES6 动画
您可以使用JavaScript创建一个复杂的动画，包含但不限于以下元素
烟火
淡入淡出效果
滚入或滚出去
页面转场
对象运动
在本小节中，我们将看到如何使用JavaScript创建动画。
JavaScript可以根据逻辑或函数确定的某种模式，在页面范围移动一些DOM元素(<img/>,<div>或任何其他html元素)。
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个像素(向右移动)。您还可以将它设置为负值，以另其向左移动。
下面是例子,您可以将其另存为一个html页面以观察效果.
<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 ()来自动化这个过程，如下所示。
在这里我们增加了更多的方法。那么，让我们看看什么是新的。
settimeout()函数调用moveright()函数来设置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>下面是上述代码的预览效果:
鼠标事件翻转
下面是一个简单的示例，显示了使用鼠标事件的图像翻转。
让我们看看在下面的示例中都做了哪些事情:
1.加载页面的时候，if语句检查图像对象是否存在。如果对象不存在，则不会执行后面的代码。
2.使用image()构造函数创建并预加载一个名为image1的新Image对象。
3.src属性被分配了名为/images /html.gif的外部图像文件的名称
4.同样，我们创建了image2对象并分配/images/http.gif。
5.使用#禁用链接，以使浏览器在单击时不尝试转到URL。
6.当用户的鼠标移动到链接时，mouseover事件处理程序被触发，当用户的鼠标离开链接(图像)时触发mouseout事件处理程序。
7.当鼠标移动到图像时，http图像将从第一个图像更改为第二个图像。当鼠标从图像移动时，将显示原始图像。
8.当鼠标从链接移开时，初始图像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>下面是上述代码的预览效果:
