21

刚刚发现requestAnimationFrame，我已经深入研究了所有我能找到的关于它的信息。仅举几个我遇到的资源，以防其他人在寻找有关它的更多信息：

无论如何，所有这些资源都告诉我一些关于它是如何requestAnimationFrame工作的或者它可以/应该如何使用的信息，但是它们都没有告诉我什么时候使用它是正确的。

  • 我应该将它用于动画吗（重复更改元素的样式，就像 CSS 动画一样）？
  • 当自动化事件想要更改一个或多个元素的 css/类时，我应该使用它吗？
  • 当自动化事件想要更改一个或多个元素的文本值时，我应该使用它吗？（例如每秒更新一次时钟的值）
  • 当自动化事件想要修改 DOM 时，我应该使用它吗？
  • 当自动事件需要 .offsetTop、.offsetLeft 之类的值，然后想要更改诸如 top 和 left 几行之类的样式时，我应该使用它吗？
  • 当用户生成的事件导致上述任何更改时，我应该使用它吗？

TL;DR：什么时候使用 requestAnimationFrame 合适？

4

2 回答 2

3

你还不应该。至少不是。这仍然是实验性的，可能会或可能不会达到完全推荐（此时它仍然是工作草案）。也就是说，如果您不关心较旧的浏览器，或者愿意使用可用的 polyfill，那么使用它的最佳时间是当您希望将需要浏览器重新绘制的内容（大多数动画）绘制到屏幕上时。

对于 DOM 的许多简单修改，这种方法是矫枉过正的。这仅在您制作动画时有用，因为您将快速绘制或移动项目并且需要确保浏览器重绘保持足够的速度以使其平滑。它将允许您确保您计算的每一帧都将绘制到屏幕上。它还为您的动画提供了更准确的时间测量实用程序。第一个参数是油漆将发生的时间，因此您可以确保您在那一刻处于您应该在的位置。

当您对 DOM 进行许多简单的修改，或者不需要平滑过渡的事情时，您不应该使用它。这在您的用户计算机上会更加昂贵，因此您希望将其限制为使过渡、移动和动画更流畅。每次在页面上进行更改时都不需要强制重绘帧，因为大多数时候响应会足够快，您无需担心两次绘制之间的额外几毫秒。

于 2012-11-23T03:22:34.433 回答
-2

正如前面的答案所说，您不应该在不连续的动画中使用它，因为它不需要平滑过渡。在大多数情况下，它用于随时间连续变化的属性。

于 2017-06-19T03:08:10.340 回答