平滑的 SVG 轴动画答案

【问题标题】：Smooth SVG Axis Animation平滑的 SVG 轴动画
【发布时间】：2013-10-12 18:44:42
【问题描述】：

我正在尝试以 60 fps 的速度渲染滚动轴。这几乎就像更新秤的域并在循环中调用axisGroupElement.call(axis) 一样简单。不幸的是，在不同的比例下，会产生一些非常平滑的动画，其中刻度和文本会抖动。

所以，我想我会很有创意，将轴渲染为所需大小的 3 倍，并转换整个组以获得更平滑的滚动。不幸的是，这产生了几乎相同的结果。

我更进一步，移动了整个 SVG 元素，它更平滑了一点，但是一个巨大的 hack。

还有一个问题是，我无法以与重绘滚动相同的速度使自己的变换滚动。随着时间的推移，它似乎落后了。我以为我已经通过计算每个像素的毫秒数来确定它，但这似乎并不完全正确。有趣的是，它会在某些分辨率下以 1px 滴答，存储剩余的毫秒数，然后一些滴答会将其调整为 2px。

我能做些什么或者滚动这些不规则的宽度/时间跨度总是会产生不流畅的动画？

TIA！

【问题讨论】：

我不知道这是否对我有帮助，例如（safari 最新版本，macos 山狮上的视网膜 mb）重绘是 3 个中最流畅的，甚至更改菜单上的时间
是的，这似乎是 Chrome 上最差的。在所有浏览器的 IE 上都可以在 IE 中简单地重绘。
我很欣赏您希望让它变得完美的愿望以及您探索这个问题的彻底性。我希望我有一个好的答案。 FWIW，在我的 Mac Chrome Redraw+Transform 上看起来不错。顺便说一句，here's what 将 CSS 样式属性 shape-rendering: crispEdges 添加到 .tick line 可以。没有解决，只是结果不同。最后，请注意 mbostock 发布了 this tutorial 并且在他的示例中没有被轴渲染所困扰 :) 另外，查看源代码以查看该时间轴的移动。与您的略有不同。
@Langdon 你解决了这个问题吗？
@VividD 很遗憾，没有。在某些情况下，它看起来仍然很糟糕……在所有浏览器中，真的。

【解决方案1】：

轴重绘示例看起来更好，因为它将变换值更精确地设置为浮点数，而变换的计算产生整数。

我已经修改了您的算法以生成浮点数，现在“重绘”和“重绘和变换”示例看起来相同。