JavaScript動畫基礎知識

1.位置

把文檔中某個元素擺放到一個特定的位置是很容易的事。不妨假設有一個這樣的元素：

<p id=”message”>Whee!</p>

於是，可以用一個JavaScript函數來設定這個元素的位置：

function positionMessage(){if(!document.getElementById)return false;if(!document.getElementById("message"))return false;var elem = document.getElementById("message");elem.style.position = "absolute";elem.style.left = "50px";elem.style.top = "100px";}

在頁面載入時調用這個positionMessage函數，會把這段文本擺放到距瀏覽器視窗的左邊界50像素，距瀏覽器視窗的頂邊界100像素的位置：

Window.onload = positionMessage;

不過，最好是用addLoadEvent函數來完成，如下所示

function addLoadEvent(func){var oldonload = window.onload;if(typeof window.onload != 'function'){window.onload = func;}else{window.onload = function(){oldonload();func();}}}addLoadEvent(positionMessage);

改變某個元素的位置也很簡單，只要執行一個函數去改變這個元素的style.top或style.left等屬性就可以了：

function moveMessage(){if(!document.getElementById)return false;if(!document.getElementById("message"))return false;var elem = document.getElementById("message");elem.style.left = "200px";}

如果讓moveMessage函數在頁面載入時運行，這個元素的位置立即發生變化——由position函數給出的原始位置會被立即覆蓋：

addLoadEvent(positionMessage);addLoadEvent(moveMessage);

要實現真正的動畫效果，必須讓元素的位置隨著時間不斷地發生變化。因此我們必須“創造”出時間間隔來。

2.時間

JavaScript函數setTimeout能夠讓某個函數在經過一段預定的時間之後才開始執行。這個函數帶有兩個參數：第一個參數通常是一個字串，其內容是將要執行的那個函數的名字；第二個參數是一個數值，它以毫秒為單位設定了需要經過多長時間後才開始執行第一個參數所給出的函數：

setTimeout("function", interval)

可以用一個名為clearTimeout的函數來取消“等待執行”隊列裡的某個函數。這個函數需要一個參數——儲存著某個setTimeout函數調用傳回值的變數：

clearTimeout(variable)

修改positionMessage函數，讓它在5秒（或者說5000毫秒）之後才去調用moveMessage函數：

function positionMessage(){if(!document.getElementById)return false;if(!document.getElementById("message"))return false;var elem = document.getElementById("message");elem.style.position = "absolute";elem.style.left = "50px";elem.style.top = "100px";movement = setTimeout("moveMessage()", 5000);}

positionMessage函數仍將在頁面載入時得到執行：

addLoadEvent(positionMessage);

3.時間遞增量

我們現在更新一下moveMessage函數，讓元素的移動以漸層的方式發生。下面是新moveMessage函數的邏輯。

（1）獲得元素的當前位置。

（2）如果元素已經到達它的目的地，則退出這個函數。

（3）如果元素尚未到達它的目的地，則把它向目的地移近一點兒。

（4）經過一段時間間隔之後從步驟1開始重複上述步驟。

下面是moveMessage函數的代碼清單：

function moveElement(elementID, final_x, final_y, interval){if(!document.getElementById)return false;if(!document.getElementById(elementID))return false;var elem = document.getElementById(elementID);var xpos = parseInt(elem.style.left);var ypos = parseInt(elem.style.top);if(xpos == final_x && ypos == final_y){return true;}if(xpos<final_x){xpos++;}if(xpos>final_x){xpos--;}if(ypos<final_y){ypos++;}if(ypos>final_y){ypos--;}elem.style.left = xpos + "px";elem.style.top = ypos + "px";var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," +interval + ")";movement = setTimeout(repeat, interval);}