使用 JavaScript 缩放动画期间的抖动文本

Question

当使用缩放来更改包含文本的 HTML 元素的大小时，文本会在动画期间抖动，但前提是使用 JavaScript 库进行动画处理。

当动画速度较慢且文本较小时，抖动最为明显。我似乎无法弄清楚是什么原因导致它或如何摆脱它。

在 CSS 动画或使用相当新的 JavaScript Web Animations API 的动画期间不会发生这种抖动。在某些浏览器中似乎也没有出现。 （在我的 iPhone 上）

为了轻松比较元素缩放动画的不同方法以及它们的显示方式，为方便起见，我制作了CodePen。在检查之前，请注意以下几点：

1. 所有动画都使用某种形式或模仿 CSS 属性 transform: scale(num); 来制作动画，并且具有相同的缓动和持续时间，因此可以更轻松地进行比较。
2. 虽然抖动也出现在 macOS 上，但由于分辨率高，在配备 Retina 屏幕的 Mac 上几乎看不到。
3. 我得到的结果反映了 Google Chrome 59 中 Windows 10 机器上的动画外观，尽管对我来说 Microsoft Edge 也显示了相同的结果。

所以我的问题是：在使用 JavaScript 为缩放属性设置动画时，如何防止文本抖动或变得模糊？如何使我的 JavaScript 缩放动画中的文本看起来像使用 CSS 时一样平滑？

您可能想知道为什么我不只使用 CSS。答案是因为我对 CSS 动画的有限性感到沮丧。我想使用超越简单贝塞尔曲线功能的高级缓动功能（如罗伯特彭纳的反弹和弹性功能），并在鼠标进入和退出元素时在悬停时使用不同的缓动。这完全是我自己的观点，但到目前为止，我发现这样做的唯一无痛方法是使用 JavaScript 库。除了与缓动相关的功能外，大多数似乎还提供了许多其他功能，使动画制作更加轻松。如果您知道获得我需要的所有功能的更好方法，请告诉我！

Answer 1

您遇到的是浏览器分层策略的差异。您会发现所有示例在 Firefox 中看起来都很流畅。这是因为 Firefox 检测到脚本何时更改可以使用图层设置动画的属性并创建一个图层作为响应。

虽然所有浏览器都在需要时为声明性动画（CSS 动画、CSS 过渡、Web 动画 API 动画，在某些情况下甚至 SVG SMIL 动画）创建图层，但并非所有浏览器都为 Javascript 动画这样做。因此，对于那些浏览器，您需要尝试诱使浏览器创建一个层（或者，您可以在浏览器上提交一个错误，因为它确实应该为您执行此操作！）。

直到最近，使用will-change: transform 是让浏览器创建图层的推荐方法。然而，Chrome 改变了它的渲染策略，现在will-change: transform 在 Chrome 中可以通过缩放动画产生非常模糊的结果。有些人成功地诱骗 Chrome 最初以更高的分辨率分层，然后在制作动画之前缩小元素。不得不这样做真的很不幸，我只能鼓励你请求 Chrome 来解决这个问题。

此外，使用“with HA”的示例也不准确。 (1) 中的 CSS 动画也将在我所知道的每个浏览器中使用硬件加速——不需要添加透视图。不幸的是，这方面有很多误导性信息（例如，一些文章声称动画可以在GPU，但这根本不是真的）。冒着自我推销的风险，您可能会发现 an article I wrote on this last year 很有帮助。