当使用缩放来更改包含文本的 HTML 元素的大小时,文本会在动画期间抖动,但前提是使用 JavaScript 库进行动画处理。
当动画速度较慢且文本较小时,抖动最为明显。我似乎无法弄清楚是什么原因导致它或如何摆脱它。
在 CSS 动画或使用相当新的 JavaScript Web Animations API 的动画期间不会发生这种抖动。在某些浏览器中似乎也没有出现。(在我的 iPhone 上)
为了轻松比较元素缩放动画的不同方法以及它们的显示方式,为了方便起见,我制作了一个CodePen。在检查之前,请注意以下几点:
- 所有动画都使用某种形式或模仿
transform: scale(num);
动画的 CSS 属性,并且具有相同的缓动和持续时间,因此可以更轻松地进行比较。 - 虽然抖动也出现在 macOS 上,但由于分辨率高,在配备视网膜屏幕的 Mac 上几乎不可能看到。
- 我得到的结果反映了 Google Chrome 59 中 Windows 10 机器上的动画外观,尽管对我来说 Microsoft Edge 也显示了相同的结果。
所以我的问题是:在使用 JavaScript 为缩放属性设置动画时,如何防止文本抖动或变得模糊?如何使我的 JavaScript 缩放动画中的文本看起来像使用 CSS 时一样平滑?
您可能想知道为什么我不只使用 CSS。答案是因为我对 CSS 动画的有限性感到沮丧。我想使用超越简单贝塞尔曲线功能的高级缓动功能(如罗伯特彭纳的反弹和弹性功能),并在鼠标进入和退出元素时在悬停时使用不同的缓动。这完全是我自己的观点,但到目前为止,我发现这样做的唯一无痛方法是使用 JavaScript 库。除了与缓动相关的功能外,大多数似乎还提供了许多其他功能,使动画制作更加轻松。如果您知道获得我需要的所有功能的更好方法,请告诉我!