JavaScript動畫

你可以使用JavaScript來創建複雜的動畫其中包括但不限於：

煙火
淡入淡出效果
滾入或轉出
入頁麵或出頁麵
對象運動

本教學會給一個基本的了解如何使用JavaScript來創建一個動畫。

JavaScript可以按照某種模式，由一個邏輯等式或函數來確定移動至若乾DOM元素(<IMG/>，<DIV>或任何其他HTML元素)頁麵各處。

JavaScript提供以下要經常用於動畫程序兩種功能。

setTimeout( function, duration) - 從現在這個函數調用 duration 毫秒後的 function
setInterval(function, duration) - 每次持續duration 毫秒之後，此函數調用function。
clearTimeout(setTimeout_variable) - 這個函數調用清除任何計時器由setTimeout()函數設置。

JavaScript還可以設置一個數字，包括它在屏幕上的位置DOM對象的屬性。可以設置一個對象的頂部和左側的屬性在屏幕上的任何位置。下麵是簡單的語法：

// Set distance from left edge of the screen.
object.style.left = distance in pixels or points; 

or
// Set distance from top edge of the screen.
object.style.top = distance in pixels or points;

手動動畫：

所以，讓我們使用DOM對象的屬性和JavaScript函數如下的實現一個簡單的動畫：

<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>

下麵是上麵的例子的說明：

我們使用的是JavaScript函數的getElementById()來獲取一個DOM對象，然後將其分配給一個全局變量 imgObj.
我們定義了一個初始化函數的init()來初始化imgObj，我們已經設置它的位置和左屬性。
我們調用初始化函數在窗口加載時。
最後，我們調用並將MoveRight()函數由10個像素來增加左邊的距離。你也可以將其設置為一個負數值，以將其移動到左側。

自動動畫：

在上麵的例子中，如我們所看到的，如何將圖像移動到右每點擊。可以通過使用JavaScript函數的setTimeout()如下自動完成這一過程：

<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>

在這裡，我們增加更多的情趣。因此，讓我們看看新的功能：

並將 MoveRight()函數調用 setTimeout()函數來設置 imgObj 位置。
我們增加了一個新的函數stop()來清除由定時器設定的setTimeout()函數來設置對象在其初始位置。

翻轉用鼠標事件：

下麵是一個簡單的例子，顯示圖像翻轉用鼠標事件：

<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>

讓我們來看看有什麼不同的位置：

在加載這個頁麵，if語句檢查圖像對象存在的時間。如果圖像對象是不可用的，該塊將不被執行
Image()構造函數創建並預裝名為image1的一個新的圖像對象
src屬性指定的外部圖像文件的名稱叫 /images/html.gif
我們已經創建IMAGE2對象，並在這個對象分配/images/http.gif類似的方式
在＃（井號）禁用鏈接，瀏覽器不會嘗試去一個URL點擊時。此鏈接的圖像
當用戶的鼠標移動到鏈路，而onmouseout事件處理程序，當用戶的鼠標移動遠離鏈路（圖像）被觸發onMouseOver事件處理程序被觸發
當鼠標移動時在圖像上，從第一圖像到第二個在HTTP圖像的變化。當鼠標被從圖像移離，則顯示原來的圖象
當鼠標離開該鏈接時，初始圖像html.gif將重新出現在屏幕上