RaphaelJS的動作文本動畫

我試圖用RaphaelJS動畫文本，但我遇到了動盪的動畫（「顫抖」？）。我已經找過關於這方面的其他問題，但我只能找到迄今爲止的jQuery特定或非SVG主題。請讓我知道，如果我忽略了類似的問題！RaphaelJS的動作文本動畫

本質上，我試圖在rect元素中直觀地包裝文本元素，並通過動畫同時轉換它們。我知道'g'元素，但我不想使用它，因爲舊版本的Internet Explorer不支持它。相反，我使用單獨的動畫聖拉斐爾爲文本和矩形：

var raphRect = paper.rect(
    (paperWidth/2)-rectWidth/2 
    ,paperHeight-rectHeight 
    ,rectWidth 
    ,rectHeight    
    ,rectHeight/2 
) 
... 
,raphText1 = paper.text(
    paperWidth/2 
    ,paperHeight-(2*fontSize) 
    ,'this is jumpy text?' 
) 
... 
raphRect.animate({y : -rectHeight}, risingTime, 'linear'); 
raphText1.animate({y : -2*fontSize}, risingTime, 'linear');

我假定的顫振是通過在文本元素的每個動畫幀的舍入的像素引起的。有什麼方法可以緩解或防止這種顫抖？（減少動畫時間不是一種選擇...它甚至不會看起來像它的幫助。）

（我有我想要做的一個例子here。我已經包括兩行文字和大膽的筆畫，以強調顫音）

來源

2012-10-31 stephenkao

有ISN」你可以做很多事情回顧一下，瀏覽器只是不做動畫非常流暢，你可以看看requestAnimationFrame看看是否有幫助，但我懷疑它。 – Neil

特別是文字的子像素渲染相當差。您是否嘗試過使用打印而不是文本？我發現，真正的道路抗鋸齒*更令人滿意。 –

通常在純SVG中，您將文本渲染屬性設置爲geometricPrecision。例如，這會讓Firefox更流暢。不幸的是RaphaelJS似乎不支持設置文本渲染。 –

這個想法實際上是從Robert Longson的關於文本渲染屬性的信息中借用的。的確，Raphael沒有直接訪問這個功能，但它確實爲你提供了一個到dom節點的鏈接 - 所以它只是你自己應用這種風格的第二步，而且它確實在Firefox中產生了更好的結果至少。

使用jQuery：

$(raphText1.node).attr('text-rendering', 'geometricPrecision'); 
$(raphText2.node).attr('text-rendering', 'geometricPrecision');

上演here。

來源

2012-11-01 03:12:27

感謝您的回覆！ – stephenkao

不幸的是，在未修改的文本和帶有「文本呈現」字段的文本之間沒有看到任何視覺變化。我只是嘗試了「文本渲染」的其他可能值，但我仍然沒有看到任何變化。我在Chrome，Firefox 3.6，Firefox 4，Firefox 9和Firefox 10上試過，我的操作系統（如果這是相關信息）是OS X（10.6.8）。此外，根據[此鏈接]（https://developer.mozilla.org/en-US/docs/CSS/text-rendering），Firefox將'geometricPrecision'視爲'optimizeLegibility'...這看起來不太好。在此先感謝！ – stephenkao

文檔不正確，Firefox不會將這兩個值視爲SVG文本相同。 –

我有同樣的問題，並試圖以不同的方式來解決它。我發現了幾個適合我的黑客。但他們都有同樣的想法：你應該讓文字不那麼直白。

"transform" : "R 0.01"

例如，它以小角度旋轉文字。結果如下： jsfiddle。我不能保證它可以在你的瀏覽器中工作。在穩定的Chrome 36中，它運行良好，測試版或金絲雀糟糕。

你也可以嘗試不這樣straigth字體jsfiddle。它適用於FF。

"font-family" : "Comic Sans MS"

糟糕其他的事情要嘗試：

使用粗體
inreasing字體大小
使用文本路徑

來源

2014-10-08 10:34:12 ilyabasiuk

RaphaelJS的動作文本動畫

回答

相關問題