0

我正在尝试使用 RaphaelJS 为文本设置动画，但遇到了断断续续的动画（“颤抖”？）。我四处寻找与此相关的其他问题，但到目前为止我只能找到特定于 jQuery 或非 SVG 的主题。如果我忽略了类似的问题，请告诉我！

本质上，我试图在一个矩形元素中直观地包装一个文本元素，并通过动画同时翻译它们。我知道 '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');

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

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

4

2 回答 2

2

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

"transform" : "R 0.01"

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

您也可以尝试 no so straigth font jsfiddle。它适用于FF。

"font-family" : "Comic Sans MS"

其他更糟糕的尝试：

  • 增加字体大小

  • 使用粗体字

  • 使用文本路径

于 2014-10-08T10:34:12.437 回答
0

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

使用 jquery：

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

在这里上演。

于 2012-11-01T03:12:27.837 回答