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

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

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

2023-04-09 19:59:39 来源：博客园

好家伙,书接上文

(资料图片)

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,我们又要扯到异步,

js引擎单线程执行的,它是基于事件驱动的语言.它的执行顺序是遵循一个叫做事件队列的机制.浏览器有各种各样的线程,比如事件触发器,网络请求,定时器等等.线程的联系都是基于事件的.js引擎处理到与其他线程相关的代码,就会分发给其他线程,他们处理完之后,需要js引擎计算时就是在事件队列里面添加一个任务. 这个过程中,js并不会阻塞代码等待其他线程执行完毕,而且其他线程执行完毕后添加事件任务告诉js引擎执行相关操作.----来自setTimeout 与 requestAnimationFrame 的区别 - 掘金 (juejin.cn)所以说,定时有"被卡住的可能",他必须等前面的任务完成.而刷新时间变长,帧数就会下降而requestAnimationFrame采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，改善视觉效果。所以我们总结一下:

requestAnimationFrame()优势:

1.requestAnimationFrame()更流畅

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

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

确保不丢帧，动画不卡顿

2.requestAnimationFrame()更合理

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

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

3.节约资源

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

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

关键词：