# 用JavaScript實現動畫效果
- <a href="#no1">10.1 動畫基礎知識</a>
- <a href="#no2">10.2 實用的動畫</a>
- <a href="#no3">10.3 小結</a>
**本章內容**
- 動畫基礎知識
- 用動畫豐富網頁的瀏覽效果
##<a name="no1">10.1 動畫基礎知識</a>
> 動畫就是讓元素的樣式隨著時間而不斷的發生變化。
###10.1.1 位置
> 網頁元素在瀏覽器窗口里的位置是一種表示性的信息。因此，位置信息通常是由CSS負責設置。
例：
element{
position: absolute;
top: 50px;
left: 100px;
}
###10.1.2 時間
> JavaScript 函數`setTimeout`能夠讓某個函數在經過一定預定的時間之后才開始執行。這個函數帶有兩個參數：第一個參數通常是字符串，其內容是將要執行的那個函數的名字；第二個參數是一個數值，它以毫秒為單位設定了需要多長時間后才開始執行第一個參數所給出的函數：
setTimeout('function', interval)
**在絕大多數時候，把這個函數調用賦值給一個變量是一個好主意：**
variable = setTimeout('function', interval);
在想要取消某個正在排隊等待執行的函數，就可以用`clearTimeout`取消。
clearTimeout(variable)
###10.1.3 時間遞增量
> 略
###10.1.4 抽象
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);
}
##<a name="no2">10.2 實用的動畫</a>
###10.2.1 提出問題
> 略
###10.2.2 解決問題
> 略
###10.2.3 CSS
> 略
###10.2.4 JavaScript
> 略
###10.2.5 變量作用于問題
> 略
###10.2.6 改進動畫效果
**改進后的moveElement**
function moveElement(elementId, final_x, final_y, interval){
if(!document.getElementById()){
return false;
}
if(!document.getElementById(elementId)){
return false;
}
var elem = document.getElementById(elementId);
if(elem.movement){
clearTimeout(elem.movement);
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
var dist = 0;
if(xpos == final_x && ypos == final_y){
return true;
}
if(xpos < final_x){
dist = Math.ceil(final_x - xpos/10);
xpos = xpos + dist;
}
if(xpos > final_x){
dist = Math.ceil(xpos - final_x/10);
xpos = xpos - dist;
}
if(ypos < final_y){
dist = Math.ceil(final_y - ypos/10);
ypos = ypos + dist;
}
if(ypos > final_y){
dist = Math.ceil(ypos - final_y/10);
ypos = ypos - dist;
}
elem.style.left = xpos + 'px';
elem.style.top = ypos + 'px';
var repeat = 'moveElement("'+elementId+'",'+final_x+','+final_y+',+'interval+')';
movement = setTimeout(repeat, interval);
}
###10.2.7 添加安全檢查
function moveElement(elementId, final_x, final_y, interval){
if(!document.getElementById()){
return false;
}
if(!document.getElementById(elementId)){
return false;
}
var elem = document.getElementById(elementId);
if(elem.movement){
clearTimeout(elem.movement);
}
if(!elem.style.left){
elem.style.left = '0px';
}
if(!elem.style.top){
elem.style.top = '0px';
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
var dist = 0;
if(xpos == final_x && ypos == final_y){
return true;
}
if(xpos < final_x){
dist = Math.ceil(final_x - xpos/10);
xpos = xpos + dist;
}
if(xpos > final_x){
dist = Math.ceil(xpos - final_x/10);
xpos = xpos - dist;
}
if(ypos < final_y){
dist = Math.ceil(final_y - ypos/10);
ypos = ypos + dist;
}
if(ypos > final_y){
dist = Math.ceil(ypos - final_y/10);
ypos = ypos - dist;
}
elem.style.left = xpos + 'px';
elem.style.top = ypos + 'px';
var repeat = 'moveElement("'+elementId+'",'+final_x+','+final_y+',+'interval+')';
movement = setTimeout(repeat, interval);
}
###10.2.8 生成HTML標記
> 略
##<a name="no3">10.3 小結</a>
> 在本章里，我們首先對“動畫”進行了定義：隨時間變化而改變某個元素在瀏覽器窗口里的顯示位置。通過結合使用`CSS-DOM`和`JavaScript`的`setTimeout`函數，實現了一個簡易的動畫。
