一天一點JavaScript程式設計知識：Animation動畫

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：供複製的程式碼，但是請注意，圖片資源需要調整一下

Click button below to move the image to right

在上面的demo中，我們看到了每次單擊時影象如何向右移動（PS：執行起來的效果）。

接下來我們使用JavaScript的setTimeout（）來自動執行此過程，看程式碼：

同樣，簡單的解釋一番（大佬略過~）：

所述MoveRight的（）函式是呼叫的setTimeout（）函式來設定的位置imgObj。我們添加了一個新函式stop（）來清除setTimeout（）函式設定的定時器，並將物件設定在其初始位置。PS：供複製的程式碼，但是請注意，圖片資源需要調整一下

Click the buttons below to handle animation

這是一個很常見的效果，就是滑鼠滑入某個元素，然後做動畫。上程式碼：

再解釋一波（同樣大佬略過）：

在載入此頁面時，“if”語句檢查影象物件是否存在。如果影象物件不可用，則不會執行此塊。Image（）建構函式建立並預載入稱為新的影象物件image1的。為src屬性分配名為/images/html。gif的外部影象檔案的名稱。同樣，我們在此物件中建立了image2物件並分配了/images/http。gif。＃（雜湊標記）禁用連結，以便瀏覽器在單擊時不會嘗試轉到URL。此連結是影象。所述的on​MouseOver當用戶的滑鼠移動到鏈路，而觸發事件處理程式的on​MouseOut事件處理程式，當用戶的滑鼠從鏈路（影象）移開被觸發。當滑鼠在影象上移動時，影象從第一個影象變為第二個影象。當滑鼠遠離影象時，將顯示原始影象。當滑鼠遠離連結時，初始影象html。gif將重新出現在螢幕上。PS：供複製的程式碼，但是請注意，圖片資源需要調整一下

Move your mouse over the image to see the result

尾聲

關於動畫篇的內容，到此就結束了。邊翻譯邊總結還真有點強行雜糅到一起的感覺。可能還是自己功力不足吧。

希望以後的文章可以，更絲滑一些，哈哈~