史萊姆論壇 - 用Javascript製作動畫

用Javascript製作動畫－生成圖象數組

　　我們首先製作了一個動畫的例子。你可以先看一下這個例子，以及完整的JavaScript代碼。然後我們一起來研究這個動畫是怎麼做的。

<html>
<head>
<title>Fuge generator</title>
<script language="JavaScript">
// make the array of images
bendyList = new Array('bendy000.gif', 'bendy001.gif', 'bendy002.gif', 'bendy003.gif', 'bendy004.gif', 'bendy005.gif', 'bendy006.gif', 'bendy007.gif', 'bendy008.gif', 'bendy009.gif', 'bendy010.gif', 'bendy011.gif', 'bendy012.gif', 'bendy013.gif', 'bendy014.gif');
// daPosition will point to successive images in the bendyList array
daPosition = 0;
function imageFlip() {
// increment the pointer
if(daPosition == bendyList.length-1) {
daPosition = 0;
} else {
daPosition++;
}
// change the image
document.images['daImg'].src = bendyList[daPosition];
// do it again
setTimeout('imageFlip()', 200);
}
</script>
</head>
<body bgcolor="#000000" onload="imageFlip()">
<div align="center">
<img name="daImg" src="bendy000.gif" width=110 height=106 border=4></div>
</body>
</html>

　　在正式開始之前，我們先學習一下下面的JavaScript符號，這有助於你理解編碼：

JavaScript符號
// 生成註釋標籤
== 比較兩個項目
= 賦值
++ 加1

　　首先你應該理解數組的概念。數組是一系列項目的列表。數組通常有一個名字。

　　在一下代碼中，我們生成一個名為bendyList的圖象數組。

　　這些圖象將用於動畫實例中。在數組括號內我們按照動畫中圖象顯示的順序列出了所有圖象名稱：

// make the array of images

bendyList = new Array(bendy000.gif , bendy001.gif , bendy002.gif ,

bendy003.gif , bendy004.gif , bendy005.gif , bendy006.gif ,

bendy007.gif , bendy008.gif , bendy009.gif , bendy010.gif ,

bendy011.gif , bendy012.gif , bendy013.gif , bendy014.gif );
　　你可以看到每個圖象都用逗號隔開。而且這些圖象都放在一個目錄中。