使用 RaphaelJS 的断断续续的文本动画

Question

我正在尝试使用 RaphaelJS 为文本设置动画，但遇到了断断续续的动画（“颤抖”？）。我已经四处寻找有关此的其他问题，但到目前为止我只能找到特定于 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');

我假设抖动是由文本元素的每个动画帧中的四舍五入引起的。有什么方法可以减轻或防止这种抖动？ （减少动画时间不是一种选择......而且看起来甚至没有帮助。）

（我有一个我正在尝试做的例子here。我已经包含了两行文本和一个粗体笔划，以强调抖动。）

Answer 1

我遇到了同样的问题，并尝试了不同的方法来解决它。我发现很少有适合我的技巧。但他们都有一个相同的想法：你应该让文本不要那么直。

"transform" : "R 0.01"

例如，它会以小角度旋转您的文本。结果如下： jsfiddle。 我不能保证它会在您的浏览器中运行。在稳定的 Chrome 36 中它运行良好，在 beta 或 canary 中效果更差。

你也可以试试不那么直的字体jsfiddle。它适用于FF。

"font-family" : "Comic Sans MS"

其他更糟糕的尝试：

• 增加字体大小

• 使用粗体

• 使用文本路径

Answer 2

这个想法实际上是从罗伯特朗森关于文本渲染属性的信息中借用的。 Raphael 确实不提供对这个功能的直接访问，但它确实为您提供了到 dom 节点的链接——所以它只是自己应用这种样式的第二步，它确实在 Firefox 中产生了更好的结果至少。

使用 jquery：

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

上演here。