Animation RaphaelJS的断断续续文本动画

我试图用RaphaelJS制作文本动画，但我遇到了一个起伏的动画（“抖动”）。我已经四处寻找了与此相关的其他问题，但到目前为止，我只能找到jQuery特定或非SVG主题。如果我忽略了一个类似的问题，请告诉我

本质上，我试图在视觉上将文本元素包装到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');

我假设抖动是由文本元素的每个动画帧中的舍入像素引起的。有没有办法减轻或防止这种抖动？（减少动画时间不是一个选项……而且看起来也没有帮助。）

---

（我举了一个例子来说明我正在尝试做的事情。我已经包括了两行文本和一个粗体笔划，用于强调抖动。）

这个想法实际上是从Robert Longson关于文本渲染属性的信息中借用的。Raphael确实没有提供对该功能的直接访问，但它确实为您提供了指向dom节点的链接——因此，这只是您自己应用该样式的第二步，而且它确实至少在Firefox中产生了更好的结果

使用jquery：

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

---

阶段性。

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

"transform" : "R 0.01"

例如，它以小角度旋转文本。结果如下： . 我不能保证它能在你的浏览器中工作。在稳定的Chrome 36中，它工作良好，在beta或canary中更差

你也可以试试不那么粗的字体。这对FF有好处

"font-family" : "Comic Sans MS"

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

• 减小字体大小

• 使用粗体字

• 使用文本路径

---

这方面你无能为力，浏览器的动画制作一点也不流畅，你可以看看requestAnimationFrame是否有帮助，但我对此表示怀疑。尤其是文本的亚像素渲染非常糟糕。你试过使用打印而不是文本吗？我发现真实路径的反别名更令人满意。通常在纯SVG中，您会将文本呈现属性设置为geometricPrecision。例如，在Firefox中，这将使其变得平滑。不幸的是，RaphaelJS似乎不支持设置文本呈现。不幸的是，我没有看到未修改的文本和设置了“文本呈现”字段的文本之间的任何视觉变化。我只是尝试了“文本呈现”的其他可能值，但仍然没有看到任何更改。我在Chrome、Firefox 3.6、Firefox 4、Firefox 9和Firefox 10上试用过，我的操作系统（如果这是相关信息）是OS X（10.6.8）。此外，据报道，Firefox将“几何精度”视为“优化易读性”……这似乎并不好。提前谢谢！文档不正确，Firefox对SVG文本的这两个值不一样。这很奇怪。视觉变化对我来说是相当惊人的16.0.1-但我会坦白地承认，我没有广泛的测试。事后想：字体渲染在SVG仍然取决于OS的字体子系统-这可能是OS X。你会考虑使用打印？我可以向你保证结果会令人满意。我现在正在试验打印，我正在应用的所有动画转换看起来都非常平滑。但是，与使用.text（）呈现相同的文本相比，通过.print（）呈现文本的成本有多高？我将通过一个文本包装算法来运行文本，这需要重复渲染，这样我就可以测量边界框的结果尺寸。（同时，我将用几个不同的文本无限期地进行此操作。）不管怎样，我确信现在可以使用.print（）。谢谢！