与Raphaeljs的波涛汹涌的文字动画

Question

我正在尝试用raphaeljs对文本进行动画，但是我遇到了一个波动的动画（" judder"？）。我已经四处寻找有关此问题的其他问题，但是到目前为止，我只能找到特定于JQuery的主题或非SVG主题。请让我知道我是否忽略了一个类似的问题！

本质上，我试图以视觉上的文本元素将文本元素包裹在rect元素中，并通过动画同时翻译它们。我知道" G"元素，但是我不想使用它，因为旧版本的Internet Explorer不支持它。相反，我正在为文本和矩形使用单独的Raphael动画：

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');

我假设响应是由文本元素的每个动画框架中的圆形像素引起的。有什么方法可以减轻或防止这种审查？（减少动画时间不是一个选择...甚至看起来没有帮助。）

（我有一个我想在这里做的事情的示例。我包括两行文本和一个大胆的中风，以强调华司。）

Answer 1

我遇到了相同的问题，并试图解决该问题。我发现很少有骇客对我有用。但是他们都有相同的想法：您应该使文本不那么直。

"transform" : "R 0.01"

例如，它以小角度旋转您的文本。这是结果：JSFIDDLE。我无法在您的浏览器中使用它。在稳定的Chrome 36中，它在Beta或Canary中效果很好。

您也可以尝试不使用STRAIGTH字体JSFIDDLE。它适合FF。

"font-family" : "Comic Sans MS"

其他事情更糟：

• intraing font size

• 使用粗体字体

• 使用文本路径

Answer 2

这个想法实际上是从罗伯特·朗森（Robert Longson）的有关文本渲染属性的信息中借来的。的确，拉斐尔（Raphael至少。

使用jQuery：

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

在这里上演。