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中它运行良好，测试版或金丝雀更糟糕。

您也可以尝试不那么严格的字体jsfiddle。它适用于FF。

"font-family" : "Comic Sans MS"

其他更糟糕的事情要尝试：

增加字体大小
使用粗体字
使用文字路径

Answer 2

这个想法实际上借鉴了Robert Longson关于文本呈现属性的信息。拉斐尔确实没有提供对此功能的直接访问，但它确实为您提供了到dom节点的链接 - 所以这是自己应用这种风格的第二步，它确实在Firefox中产生了更好的结果至少。

使用jquery：

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

分阶段here。

RaphaelJS的糟糕文本动画

2 个答案: