平滑的SVG軸動畫

我試圖以60 fps渲染滾動軸。這幾乎和更新規模的域一樣簡單，並在循環內調用axisGroupElement.call(axis)。不幸的是，在不同的尺度下，會產生一些非常流暢的動畫，其中的嘀嗒聲和文字會抖動。平滑的SVG軸動畫

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

的輕搖可能取決於容器的寬度和規模的域的長度...嘗試改變下拉了不同的結果。

所以，我認爲自己會很有創造力，並且將座標軸渲染爲我需要的尺寸的3倍，並將整個組變成更平滑的滾動條。這不幸的是產生了幾乎相同的結果。

我更進一步，移動了整個SVG元素，這是一個更平滑，但一個巨大的黑客。

還有一個問題，我無法以重繪滾動的相同速率獲得自己的變換滾動。隨着時間的推移它似乎落後了。我以爲我通過計算每個像素的毫秒數來確定它，但看起來並不完全正確。有趣的是，看它如何以1px的速度讀取某些分辨率，存儲剩餘的毫秒數，然後一些刻度將其調整爲2px。

有什麼我可以做的或滾動這些不規則的寬度/時間跨度總是會產生不平滑的動畫？

TIA！

來源

2013-10-12 Langdon

我不知道這是否會幫助，但對我來說，例如（Safari瀏覽器最新版本，在Mac OS山獅視網膜MB）重繪是最流暢的3，即使更改菜單上的時間 – tomtomtom

是的，它似乎是Chrome上最糟糕的。在IE瀏覽器中簡單地重繪IE瀏覽器非常流暢。 – Langdon

我很欣賞你的願望，讓它變得完美無瑕，以及你探索這個問題的徹底性。我希望我有一個很好的答案。 FWIW，在我的Mac上Chrome重繪+轉換看起來不錯。順便說一下，[這是什麼]（http://jsfiddle.net/fTcrU/12/）添加一個CSS樣式屬性'shape-rendering：crispEdges'到'.tick line'。不解決它，只是一個不同的結果。最後，請注意mbostock發佈了[本教程]（http://bost.ocks.org/mike/path/），並沒有在他的示例中對軸渲染感到困擾:)另外，查看源代碼以查看該時間軸的動作。與你的略有不同。 – meetamit

軸重繪示例看起來更好，因爲它將變換值更精確地設置爲浮點數，而您的變換計算會生成整數。

我已經修改了您的算法以生成浮動，現在「重畫」和「重畫和變換」示例看起來完全相同。

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

相關的變化是

_left -= msPassed/_msPerPixel;

我試圖做同樣的左側定位，但事實證明，你需要爲整數值。

我發現保羅愛爾蘭的文章/視頻這就解釋得更詳細：http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

來源

2014-01-14 10:43:09

平滑的SVG軸動畫

回答

相關問題