何时使用 requestAnimationFrame？如果我们有 css 转换，为什么我们需要 requestAnimationFrame？

【问题标题】：When to use requestAnimationFrame? and why we need requestAnimationFrame if we have css transition?何时使用 requestAnimationFrame？如果我们有 css 转换，为什么我们需要 requestAnimationFrame？
【发布时间】：2016-09-22 19:37:40
【问题描述】：

我不知道什么时候使用 requestAnimationFrame。如果 requestAnimationFrame 和 css 都可以满足我的需求，我应该选择哪一个？

你能告诉我一些你的应用案例吗？

非常感谢~

【问题讨论】：

他们的目的不一样。 rAF 是 javascript 代码执行的计时函数。 CSS 动画仅用于元素显示。如果您需要将元素从 x1 动画化到 x2 使用 CSS，如果您需要执行一些 javascript（例如在画布上绘图），请使用 rAF

标签： javascript html css animation css-transitions

【解决方案1】：

我认为选择requestAnimationFrame 而不是 CSS 动画的唯一原因是当您想要制作快速动画时，您需要确保浏览器使其流畅。使用requestAnimationFrame 可以使跳跃、停止、暂停、返回等动画受益。

问题是requestAnimationFrame 不使用 CPU 资源，并且只绘制用户可见的动画（如果您切换标签、最小化等，它不会消耗任何东西）。只有在浏览器准备好时才会绘制帧，并且由于没有准备好的帧等待绘制，因此没有不必要的帧绘制。因此，为了流畅保证，您可以放心地选择requestAnimationFrame。

如果你计划的一些简单的东西不符合上述解释，那么requestAnimationFrame 是多余的，你最好切换到 CSS 动画。

来源咨询：

https://dev.opera.com/articles/better-performance-with-requestanimationframe/

【讨论】：