到目前为止它似乎不流利,但波涛汹涌.例如.如果你有一个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的流畅的跨浏览器字体大小的动画.
但是你能做些什么来掩饰这种效果,就是减少动画间隔时间并扩大字体大小的差距.然后,这些步骤出现在更快的时间范围内,并且无法看到单个步骤.
