关于使用 requestAnimationFrame 制作 JavaScript 动画

Posted 2021-03-16 FreezeNow

昨天在 MDN 复习关于对象的知识，最后有个做吃球小游戏的练习，翻了翻以前做的这个练习的文件内容，复习了一波。在代码的最后，我发现了一个完全不知道的方法：requestAnimationFrame。

在 MDN 找到相关页面，是这么介绍的：使用该方法需要传入一个回调函数作为擦书，在使用该方法后，浏览器会在下次重绘前调用回调函数。如果需要在下次重绘前继续更新下一个动画，则需要在回调函数内部调用 window.requestAnimationFrame()。

该方法会返回一个 long 整数，该整数用于传入 window.cancelAnimationFrame() 方法中以取消回调函数。

使用这个方法优点在于：

　　1、不会因大量的计算操作而使动画延迟

　　　　原因：浏览器具有固定的重绘间隔，重绘间隔不会因大量计算操作而变化，重绘时间与显示器刷新率相关。

　　2、不会因定时器的延迟时间与浏览器重绘时间不同而导致动画丢帧

　　3、不会因存在多个 requestAnimationFrame 的回调函数而使动画延迟

　　　　原因：设置多个 requestAnimationFrame 的回调函数时，它们会接受一个相同的时间戳。

那么，这个方法的兼容性如何呢？根据 caniuse 的查询结果，IE10 及之后的浏览器、android4.4 及之后的浏览器和其他现代浏览器均支持该方法。如果不需要兼容老 IE 或者针对移动端的话，就可以大胆使用了。

参考资料：

window.requestAnimationFrame - Web API 接口参考 | MDN

CSS3动画那么强，requestAnimationFrame还有毛线用？