第136篇:Three.js基础入门动画API:setInterval 与 requestAnimationFrame的区别

好家伙,书接上文

function animate() {　　　　　
        //请求-动画-框架
        requestAnimationFrame( animate );
        //改变正方体在场景中的位置,让正方体动起来
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render( scene, camera ); // 结合场景和相机进行渲染，即用摄像机拍下此刻的场景（最后一步）
            }

这是一段动画的渲染方案

这里使用了requestAnimationFrame()而没有使用定时器setInterval

动画渲染部分为什么不使用定时器setTimeout而使用requestAnimationFrame()?

window.requestAnimationFrame() 

告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。

该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

当你准备更新动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数 (即你的回调函数)。

回调函数执行次数通常是每秒 60 次，但在大多数遵循 W3C 建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　----来自MDN文档

说到定时器setInterval,我们又要扯到异步,

requestAnimationFrame()优势:

1.requestAnimationFrame()更流畅

定时器setInterval存在延迟卡顿的问题

而使用 requestAnimationFrame 执行动画，能保证回调函数在屏幕每一次刷新间隔中只被执行一次，

确保不丢帧，动画不卡顿

2.requestAnimationFrame()更合理

定时器setInterval的执行频率由时间决定

而requestAnimationFrame()的执行频率与浏览器屏幕刷新次数相匹配

3.节约资源

当页面被隐藏时,定时器 setInterval 仍在后台执行动画任务

而requestAnimationFrame()的动画刷新会暂停