要在瀏覽器下實現動畫,有幾個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();//啟動定時器