使用JavaScript

Question

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

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

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

为了方便地比较动画元素缩放和它们出现方式的不同方法，我为了方便起见了CodePen。在检查之前，请注意以下几点：

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

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

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

Answer 1

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

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

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

此外，使用＆＃34;使用HA＆＃34;不准确。 （1）中的CSS动画也将在我所知道的每个浏览器中使用硬件加速 - 没有必要添加透视图。不幸的是，这个领域有很多误导性信息（例如一些文章声称动画可以在GPU上运行，但这根本不是真的）。冒着自我推销的风险，您可能会发现an article I wrote on this last year有帮助。