前言
总算是写完了基础类型篇的内容。这次咱们来聊一聊动画。
闲话就不多扯了，直接开始正文。
正文
一、基础概念
JavaScript中，我们可以依赖内部提供的动画函数，去移动DOM元素（<img />，<div>或任何其他HTML元素）。
JavaScript提供了以下两个在动画中经常使用的函数。
- setTimeout（function，duration） - 此函数从现在起持续几毫秒后调用函数。
- setInterval（function，duration） - 该函数在每个持续时间毫秒后调用函数。
- clearTimeout（setTimeout_variable） - 此函数调用清除setTimeout（）函数设置的任何计时器。
JavaScript还可以设置DOM对象的许多属性，包括它在屏幕上的位置。我们也可以设置对象的顶部和左侧属性，以将其放置在屏幕上的任何位置：
二、Manual Animation
接下来，让我们使用DOM对象属性和JavaScript函数实现一个简单的动画，上代码：
代码很简单，这里简单解释一下，当然能看懂的朋友，可以跳过啦：
- 我们使用JavaScript函数getElementById（）来获取DOM对象，然后将其分配给全局变量imgObj。
- 我们已经定义了一个初始化函数init（）来初始化imgObj，我们已经设置了它的位置和左边的属性。
- 我们在窗口加载时调用初始化函数。
- 最后，我们调用moveRight（）函数将左边距离增加10个像素。也可以将其设置为负值，将其移动到左侧。
PS：供复制的代码，但是请注意，图片资源需要调整一下
<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>
三、Automated Animation
在上面的demo中，我们看到了每次单击时图像如何向右移动（PS：运行起来的效果）。
接下来我们使用JavaScript的setTimeout()来自动执行此过程，看代码：
同样，简单的解释一番（大佬略过~）：
- 所述MoveRight的()函数是调用的setTimeout()函数来设置的位置imgObj。
- 我们添加了一个新函数stop()来清除setTimeout()函数设置的定时器，并将对象设置在其初始位置。
PS：供复制的代码，但是请注意，图片资源需要调整一下
<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事件处理程序，当用户的鼠标从链路（图像）移开被触发。
- 当鼠标在图像上移动时，图像从第一个图像变为第二个图像。当鼠标远离图像时，将显示原始图像。
- 当鼠标远离链接时，初始图像html.gif将重新出现在屏幕上。
PS：供复制的代码，但是请注意，图片资源需要调整一下
<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>
尾声
关于动画篇的内容，到此就结束了。边翻译边总结还真有点强行杂糅到一起的感觉。可能还是自己功力不足吧。
希望以后的文章可以，更丝滑一些，哈哈~