现代浏览器下的动画实现
要在浏览器下实现动画,有几个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();//启动定时器