是否有动画字体大小在拉斐尔JS流畅过渡的可能性？(Is there a fluent transit

到目前为止，好像它不流利 ，但不稳定。例如，如果你有字体大小一个状态属性：14，想用动画字体大小声明：16，过渡看起来并不顺利。

它跳跃几步之遥。 首先变化到15再到16像素。

它可以强制看起来更流畅？

我使用的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);
          }
);

Answer 1:

这是一个已知的问题，无关与拉斐尔但子像素渲染：

当在不支持GPU的子像素定位的浏览器查看，文本显示跳，因为文本需要使用CPU来创建和每个字母的位置被四舍五入到最接近的整数像素。

虽然它可能与新的CSS 3级的动画，你可以看到它只是按比例放大的字体，直到动画结束，那么它的重绘。

我很抱歉，我没有为你解决，但我还没有看到一个平滑的跨浏览器的字体大小动画与CSS直到现在。

但是你可以做掩饰这种效果有点什么，是降低动画间隔时间和扩大字体大小的差距。然后将步骤出现在更快的时间帧和一个不能看到单个步骤。

看到这个小提琴

Answer 2:

我知道，使用字体大小修改文本元素无解的，但我可能不会采取这种做法呢。相反，我会简单地使用对应于问题的文字cufónized路径和手动缩放。 请注意 ，这是明显比手动缩放文本元素，至少在Firefox顺畅。

访问的Cufón和我的优选字体转换为它的等效向量，选择Raphael.registerFont作为定制选项;
使用生成我的文字paper.print而不是paper.text 。这将返回路径元素，而不是一个文本元素。
放大使用变换代替字体大小的生成的路径元件。由于paper.print接受字体大小作为一个参数，它是容易计算对应于目标字体大小所需的规模。

这里有一个粗略的示范展示它是如何工作（我把背的文字更容易徘徊）。我希望你能原谅它的许多不足之处; 它是在一个位的急速的产生。

Answer 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/了解详情。

Answer 4:

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

您将可以看到一个演示并下载缩放元素的插件。需要提醒的是，你没有得到明确选择目标字体大小，但是，有一点数学，你可以写一个小插件为目标大小转换为数字缩放。

我的个人主页，使欢迎页面上使用这个插件的，如果你想看到另一个演示。

祝好运！ :)

文章来源: Is there a fluent transition possibility for animation font-size in Raphael JS?