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

到目前为止它似乎不流利,但波涛汹涌.例如.如果你有一个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,sans-serif","cursor": "pointer"
        }

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

解决方法

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

When viewed in browsers that do not support GPU-powered sub-pixel positioning,the text appears to jump because the text needs to be created using the cpu and the positions of each letter are rounded to the nearest whole pixel.

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

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

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

See this fiddle

原文地址：https://www.jb51.cc/js/151855.html