double requestAnimationFrame如何工作?

时间:2017-05-23 21:59:34

标签: animation requestanimationframe

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

然而,我认为很高兴知道它是如何工作的以及何时加倍,就像Addy Osmani所提出的Twitter的标签示例一样。谢谢!

2 个答案:

答案 0 :(得分:2)

由于Chrome和其他一些版本中引入了bug,每当我们发现自己切换类或执行其他CSS动画时,我们必须使用双main_method,这些动画需要在执行操作后触发RAF。它有点像逃生舱,可以获得漂亮/平滑的动画。

答案 1 :(得分:0)

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

“使用Progressive Web Apps创建”感觉恰到好处“的用户体验” https://youtu.be/mmq-KVeO-uU

我做了一点挖掘,并在一篇关于媒体的帖子中找到了欧文的解释:

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

文章还指出了一个简短的后续讨论,关于是否/为什么需要“双重”方法是一个错误或不在这里:

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

希望这会有所帮助......