Raphael JS 中的动画字体大小是否有流畅的过渡可能性？答案

【问题标题】：Is there a fluent transition possibility for animation font-size in Raphael JS?Raphael JS 中的动画字体大小是否有流畅的过渡可能性？
【发布时间】：2012-07-23 14:59:30
【问题描述】：

到目前为止，它似乎不是流利，而是波涛汹涌。例如。如果您有一个具有 font-size: 14 的状态属性，并且想要使用 font-size: 16 进行动画处理，则过渡看起来并不平滑。

分两步跳跃。先改成 15，再改成 16px。

可以强制看起来更平滑吗？

我正在使用 Firefox 14 进行测试。

我当前的代码：

    var fillerText = {
        "fill" : "#00738f",
        "font-size": 14,
        "font-family": "Arial, Helvetica, sans-serif"
        }
    var fillerTextHover = {
        "fill" : "#00738f",
        "font-size": 16,
        "font-family": "Arial, Helvetica, sans-serif",
        "cursor": "pointer"
        }

text.hover(function () {
       text.animate(fillerTextHover, 500);
               },
  function () {
       text.animate(fillerText, 500);
          }
);

【问题讨论】：

我们需要查看代码才能帮助您。
我添加了代码以更清楚我的意思
有谁知道怎么解决？
也许你可以缩放它而不是调整字体大小。
如何缩放字体？能举个例子吗？

标签： javascript jquery animation fonts raphael

【解决方案1】：

我知道没有使用 font-size 来修改文本元素的解决方案，但我可能不会采用这种方法。相反，我会简单地使用与相关文本相对应的 cufónized 路径并手动缩放它。 请注意，这明显比手动缩放文本元素更平滑，至少在 Firefox 中是这样。

访问 Cufón 并将我的首选字体转换为等效的矢量字体，选择 Raphael.registerFont 作为自定义选项；
使用paper.print 而不是paper.text 生成我的文本。这将返回一个路径元素而不是文本元素。
使用转换而不是字体大小来缩放生成的路径元素。由于paper.print 接受字体大小作为参数，因此很容易计算出与您的目标字体大小相对应的所需比例。

这里有一个rough demonstration 展示了它是如何工作的（我将文本放在背景上以便于悬停）。我希望你能原谅它的许多不足之处；制作有点仓促。

【讨论】：

【解决方案2】：

查看http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

您将能够看到一个演示并下载一个可缩放元素的插件。需要注意的是，您不必明确选择目标字体大小，但是，通过一些数学运算，您可以编写一个小插件来将目标大小转换为要按比例缩放的数字。

我的personal homepage 在欢迎页面上使用了这个插件，如果你想看另一个演示。

祝你好运！ :)

【讨论】：

【解决方案3】：

我认为扩大路径会更容易和更顺畅，例如：

text.hover(function() {
    text.animate({transform: "s1.5 1.5 "}, 400);
}, function() {
    text.animate({transform: "s1.0 1.0 "}, 400);
});

详情请见http://jsfiddle.net/SeeG2/40/。

【讨论】：

【解决方案4】：

这是一个已知问题，与 Raphael 无关，而是与 sub-pixel rendering：

在不支持 GPU 驱动的子像素定位的浏览器中查看时，文本会出现跳跃，因为需要使用 CPU 创建文本，并且每个字母的位置会四舍五入到最接近的整个像素。

尽管新的CSS 3 animations 可以实现，但您可以看到它只是放大字体，直到动画完成然后重新绘制。

很抱歉我没有为你提供解决方案，但到目前为止我还没有看到使用 CSS 实现流畅的跨浏览器字体大小动画。

但是你可以做一点掩饰这种效果，是减少动画间隔时间和扩大字体大小的差距。然后这些步骤会出现在更快的时间范围内，并且看不到单个步骤。

See this fiddle

【讨论】：