使用javascript制作动画

[Figure_lin]

在这个指南中，你将会学到如何使用web语言来制作一个动漫的例子。
你需要一系列图片。你可以在这里下载(下载)。你可能知道动画其实就是由一些
静止的图片或帧构成的。比如，在我小时候，在学校里画了两个图片。
使用他们制作两个人格头的动画。下载好这些文件后，在HTML中，使用img
标签进行加载。然后使用css角本把所有的图片相互交迭起来。所以我们只可以
看到最后一张图片。你可以使用position:absolute属性。使用visibility:hidden
来隐藏所有的图片。记住第一张图片使用visibility:visible属性；
我们继续JS代码的部分。在JS代码中，创建两个函数run和change_frame.
每200毫秒调用一次change_frame函数。change_frame函数是最重要的。
工作原理如下：
a 获得所有的帧图片。
b 隐藏正在显示的图片。
c 显示下一个隐藏图片。
d 当下一个隐藏图片不存在时跳转到第一帧图片。
e 最后更改当前图片的index(索引)到下一个图片的index

你可以点击这里看到效果(浏览)
下面是原代码供大家参考

<script type="text/javascript">// <![CDATA[
var current =0;
function change_frame(){

var obj = document.getElementById("animation");
var allframe= obj.getElementsByTagName("img");

var next =current+1;
if(next>=allframe.length){
next =0;
}
allframe[next].style.visibility="visible";
allframe[current].style.visibility="hidden";
current = next;

}
function run(){
setInterval("change_frame()",200);
}
// ]]></script></pre>
<div id="animation">
<img src="frames/f2.jpg" alt="" />
<img src="frames/f3.jpg" alt="" />
<img src="frames/f4.jpg" alt="" />
<img src="frames/f5.jpg" alt="" />
<img src="frames/f6.jpg" alt="" />
<img src="frames/f7.jpg" alt="" />
</div>