如何創建：JavaScript HTML 動畫
學習如何使用 JavaScript 創建動畫。
一張基本的網頁
為了演示如何使用 JavaScript 創建 HTML 動畫，我們可以使用一個簡單的網頁。
實例
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript Animation</h1>
<div id="myContainer">
<div id="myAnimation">My animation will go here</div>
</div>
</body>
<html>
設置元素的樣式
為了使動畫成為可能，動畫元素必須相對于一個“父容器”進行動畫處理。
容器元素應使用 style="position: relative" 創建。
動畫元素應使用 style="position: absolute" 創建。
實例
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#myAnimation {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
動畫代碼
JavaScript 動畫通過編程逐漸改變元素的樣式來實現。
這些變化是由計時器調用的。當計時器間隔很小時，動畫看起來是連續的。
基本代碼是：
實例
var id = setInterval(frame, 5);
function frame() {
if (/* test for finished */) {
clearInterval(id);
} else {
/* 改變元素樣式的代碼 */
}
}
使用 JavaScript 創建動畫
實例
var id = null;
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
clearInterval(id);
id = setInterval(frame, 10);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
