Firefox 上的 react-spring 和 framer-motion 滞后

Posted 2023-03-06

【中文标题】Firefox 上的 react-spring 和 framer-motion 滞后

【英文标题】：react-spring and framer-motion laggy on firefox

【发布时间】：2020-09-20 09:30:43

【问题描述】：

我对两个动画库（react-spring、framer-motion）有疑问。我试图在组件第一次可见时制作简单的动画。 （是简化版）

<motion.div initial=x: -25, opacity: 0 animate=x: 0, opacity: 1 transition=duration: 2.5 className="App-logo">NAME</motion.div>

Github project

它在 Chrome、Brave、Edge 上看起来非常流畅，但在 Firefox 上它在动画结束时看起来很滞后。 此示例基于 framer-motion，但在 react-spring 中看起来相同。当 transition-duration 更短而 translateX 更长时，它看起来更好，但仍然不是流畅的动画（并且更改适用于其他浏览器的属性不是解决此问题的方法）。 火狐(76.0.1)(OS Win10)。

我尝试使用 clear css 制作相同的动画，并且它在每个浏览器上看起来都很流畅。我正在寻找解决问题的方法，但没有找到任何特定的答案。

【参考方案1】：

我认为这是 Firefox 和 Chrome 的渲染引擎的区别。 Firefox 只是逐像素定位 div 而不进行子像素渲染。如果你对 div 进行轻微的旋转，它会使 FF 引擎跳过优化。

<motion.div initial=x: -25, opacity: 0, rotation: 0.02 animate=x: 0, opacity: 1, rotation: 0.02 transition=duration: 2.5 className="App-logo">NAME</motion.div>

更新：根据您的 git 存储库，我添加了一个示例。如果我为前两行添加旋转，则 Firefox 中的动画明显比最后一行更流畅。

https://codesandbox.io/s/happy-cannon-tew1f

【讨论】：

我添加了这个轻微的旋转，但老实说它并没有改变任何东西。它仍然看起来像衣衫褴褛的动画。我想知道为什么相同的动画，但在清晰的 css 中看起来完全平滑，但在 framer-motion / react-spring 中却完全滞后。

dropbox.com/s/ag6h21yyzuuz9mr/2020-06-02%2013-53-45.mkv?dl=0 在这个视频中，我展示了相同的动画，但在清晰的 css 中可以很流畅。我不确定 FF 是否有问题，但也许这些库有一些问题？要在 css 中制作动画，我使用的是 translateX。

我不确定平滑度的差异。对我来说，你的视频上的两个动画都很流畅。宽松政策略有不同。 Framer 动作开始得更快一点，并减慢 css 动画缓动对我来说似乎是线性的。但它必须独立于浏览器。

好吧。就像你说的“如果你向 div 添加轻微的旋转，它会使 FF 引擎跳过优化”。现在我看到这个轻微的旋转真的很顺利。在我的情况下，它应该大于 0.01 度但小于 0.1（约 0.06 度）。也许在未来 Firefox 会改变你的渲染引擎。感谢 Peter Ambruzs 的帮助。