6

到目前为止，它似乎不是流利的，而是波涛汹涌的。例如，如果您有一个具有 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);
          }
);
4

4 回答 4

10

这是一个已知问题，与 Raphael 无关，但与亚像素渲染有关：

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

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

很抱歉，我没有为您提供解决方案，但直到现在我还没有看到使用 CSS 实现平滑的跨浏览器字体大小动画。

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

看到这个小提琴

于 2012-07-29T14:01:29.523 回答
2

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

  1. 访问Cufón并将我喜欢的字体转换为等效的矢量字体，选择 Raphael.registerFont 作为自定义选项；

  2. paper.print使用而不是生成我的文本paper.text。这将返回一个路径元素而不是文本元素。

  3. 使用转换而不是字体大小来缩放生成的路径元素。由于paper.print接受字体大小作为参数，因此很容易计算出与目标字体大小相对应的所需比例。

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

于 2012-07-31T23:55:26.770 回答
0

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

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/。

于 2012-07-29T14:28:44.270 回答
0

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

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

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

祝你好运！:)

于 2012-07-29T16:00:06.797 回答