double requestAnimationFrame 是如何工作的?

How does double requestAnimationFrame work?

在观看 Google IO17 时,我了解了双重 requestAnimationFrame 方法,但我无法真正理解它,可能是因为我几乎不参与网络动画。

但是,我认为很高兴知道它是如何工作的,以及何时像 Addy Osmani 布置的 Twitter 选项卡示例那样将事情加倍。谢谢!

由于 Chrome 和其他一些引入的 bug,每当我们发现自己切换 类 或执行其他 [=15] 时,我们必须使用双 requestAnimationFrame =] 需要 RAF 在执行操作后触发的动画。 nice/smooth 动画有点像逃生舱门。

我在 Google I/O 的演讲中也看到了这一点(Owen Campbell-Moore)。这是该演讲视频的 link(如果它与您观看的演讲不同:

“使用渐进式 Web 应用程序创建 'just feels right' 的用户体验” https://youtu.be/mmq-KVeO-uU and a link to timestamp where the explanation of what a double RAF is: https://youtu.be/mmq-KVeO-uU?t=805

我做了一点挖掘,发现 Owen 在 Medium 上的 post 中做了这个解释:

“使用 React 实现触摸响应动画的一个奇怪技巧” https://medium.com/@owencm/one-weird-trick-to-performant-touch-response-animations-with-react-9fe4a0838116

这篇文章还指出了关于 whether/why 是否需要“双重”方法的简短后续讨论:

https://medium.com/@owencm/well-there-are-definitely-issues-here-ordered-least-significant-to-most-1f0931b03024

希望这对您有所帮助...