前言
總算是寫完了基礎類型篇的內容。這次咱們來聊一聊動畫。
閒話就不多扯了，直接開始正文。
正文
一、基礎概念
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>
尾聲
關於動畫篇的內容，到此就結束了。邊翻譯邊總結還真有點強行雜糅到一起的感覺。可能還是自己功力不足吧。
希望以後的文章可以，更絲滑一些，哈哈~