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

Question

到目前为止它似乎不流利,但波涛汹涌.例如,如果您有一个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);
          }
);

Answer 1

这是一个已知问题,与Raphael无关,但与子像素渲染无关:

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

尽管可以使用新的CSS 3动画,但您可以看到它只是在动画完成之前对字体进行升级,然后重新绘制.

对不起,我没有为您提供解决方案,但到目前为止我还没有看到过使用CSS的流畅的跨浏览器字体大小的动画.

但是你能做些什么来掩饰这种效果,就是减少动画间隔时间并扩大字体大小的差距.然后,这些步骤出现在更快的时间范围内,并且无法看到单个步骤.

看到这个小提琴