JavaScript 動畫主要利用定時器（setTimeout 和 setInterval）來實現。設計思路：通過迴圈改變元素的某個 CSS 樣式屬性，從而達到動態效果，如移動位置、縮放大小、漸隱漸現等。
移動動畫
移動動畫主要通過動態修改元素的坐標來實現。技術要點如下：
-
考慮元素的初始坐標、終點坐標，以及移動坐標等定位要素。
-
移動速度、頻率等問題可以藉助定時器來實現。但效果的模擬涉及演算法問題，不同的演算法，可能會設計出不同的移動效果，如勻速運動、加速和減速運動。
範例
下面範例演示了如何設計一個簡單的元素移動效果。通過指向元素、移動的位置，以及移動的步數，可以設計按一定的速度把元素從當前位置移動到指定的位置。本範例參照前面介紹的 getB() 方法，該方法能夠獲取當前元素的絕對定位坐標值。
//簡單的移動引數
//引數：e表示元素，x和y表示要移動的終點坐標，t表示元素移動的步數
function slide (e, x, y, t) {
var t = t || 100; //初始化步數，步數越大，速度越慢，移動越逼真
var o = getB(e); //當前元素的絕對定位坐標值
var x0 = o.x;
var y0 = o.y;
var stepx = Math.round((x - x0) / t);
//計算x軸每次移動的步長，由於畫素點不可用小數，所以會存在一定的誤差
var stepy = Math.round((y - y0) / t); //計算y軸每次移動的步長
var out = setInterval (function () { //設計定時器
var o = getB(e); //獲取每次移動後的絕對定位坐標值
var x0 = o.x;
var y0 = o.y;
e.style["left"] = (x0 + stepx) + 'px';
e.style["top"] = (y0 + stepy) + 'px';
//如果距離終點距離小於步長，則停止迴圈並校正最終坐標位置
if (Math.abs(x - x0) <= Math.abs(stepx) || Math.abs(y - y0) <= Math.abs(stepy)) {
e.style["left"] = x + 'px'; //定位每次移動的位置
e.style["top"] = y + 'px'; //定位每次移動的位置
clearTimeout(out);
};
}, 2)
};
使用時應該定義元素絕對定位或相對定位的顯示狀態，否則移動無效。在網頁動畫設計中，一般都使用這種定位移動的方式來實現。
<style type="text/css">
.block { width:20px; height:20px; position:absolute; left:200px; top:200px; background-color:red; }
</style>
<div class="block" id="block1"></div>
<script>
temp1 = document.getElementById('block1');
slide (temp1, 400, 400, 60);
</script>
漸隱漸顯
漸隱漸顯效果主要通過動態修改元素的透明度來實現。
範例
下面範例實現一個簡單的漸隱漸顯動畫效果。
//漸隱漸顯動畫顯示函數
//引數：e表示元素，t表示速度，值越大速度越慢
//io表示顯示方式，true表示漸顯，false表示漸隱
function fade (e, t, io) {
var t = t || 100; //初始化漸隱漸顯速度
if (io) { var i = 0; } //初始化漸隱漸顯方式
else { var i = 100; }
var out = setInterval (function () { //設計定時器
setOpacity (e, i); //呼叫setOpacity()函數
if (io) { //根據漸隱或漸顯方式決定執行效果
i ++;
if (i >= 100) clearTimeout(out);
} else {
i --;
if (i <= 0) clearTimeout(out);
}
}, t);
}
下面呼叫該函數：
<style type="text/css">
.block { width:200px; height:200px; background-color:red; }
</style>
<div class="block" id="block1"></div>
<script>
e = document.getElementById('block1');
fade(e, 50, true); //應用漸隱漸顯動畫效果
</script>