4

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

http://jsfiddle.net/langdonx/fTcrU/11/

  • 抖动可能取决于容器的宽度和刻度域的长度......尝试更改下拉菜单以获得不同的结果。

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

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

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

有什么我可以做的,或者滚动这些不规则的宽度/时间跨度总是会产生不流畅的动画吗?

蒂亚!

4

1 回答 1

0

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

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

http://jsfiddle.net/xJJHM/1/

相关的变化是

_left -= msPassed / _msPerPixel;

我试图对左定位做同样的事情,但事实证明你需要整数值。

我发现 Paul Irish 的一篇文章/视频更详细地解释了这一点:http: //www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

于 2014-01-14T10:43:09.190 回答