分類 > Web前端 >

當代瀏覽器下的動畫實現

tags：時間：2013-12-10 00:07:17

現代瀏覽器下的動畫實現

要在瀏覽器下實現動畫，有幾個JS的Lib不得不提：

1） requestAnimationFrame，利用現代瀏覽器介面提供比setTimer和setInterval更高效的計時器（timer）。當然不兼容的瀏覽器，將還是使用setTimeout。

2) Tween.js，類似AS中的Tween類，可以高效處理DOM元素渲染計算。適用於2D動畫特效。

3) three.js，提供給現代瀏覽器3D功能的支持，當然還有攝像頭，聲頻等功能支持。適用於3D動畫特效，瀏覽器兼容問題較嚴重。

4) stats.js，提供FPS計算。

其中2,3和4，都需要結合requestAnimationFrame來提供計算效率。

大致的流程如下：

function init(){ //初始化相關元素

}

function animate(){
requestAnimationFrame( animate ); //定時器
update();

}

function update(){//每幀動畫執行

}

init();//啟動初始化

animate();//啟動定時器