Three.js初探——用requestAnimationFrame优化Web动画

Web动画背景设计

在Web应用开发过程中，通常借助定时器实现目标物体的周期性位移，从而产生动态效果。JavaScript中可通过setTimeout函数完成该功能，而CSS3则支持通过transition与animation属性实现动画效果。在HTML5中，JavaScript API尚未推出之前，开发者普遍采用setInterval(function, interval)方法来达成类似目的。然而，该方式存在显著缺陷，即会导致较高的CPU资源占用率，进而影响系统整体运行效率。

requestAnimationFrame应用与优化

借助requestAnimationFrame()这一技术手段，浏览器能够对并行执行的动画操作进行优化，合理调整动作执行顺序，并将可整合的操作统一纳入单个渲染周期中完成，进而实现更为流畅的动画展示效果。与setInterval(function,interval)相比，当当前标签页处于非活动状态时，requestAnimationFrame()会自动停止动画播放，从而有效降低CPU及内存的负载压力，延长设备电池使用时间。

使用方法概述

    window.requestAnimFrame = (function() {
    	return window.requestAnim