Raphael JS中的动画字体大小是否有流畅的转换可能性

Is there a fluent transition possibility for animation font-size in Raphael JS?

本文关键字：是否 转换 可能性 JS 动画 字体 Raphael      更新时间：2024-03-03

到目前为止，它似乎不是流利的，而是断断续续的。例如，如果您有一个字体大小为14的状态属性，并且希望将动画设置为字体大小为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);
          }
);

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

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

即使有了新的CSS 3动画，你也可以看到它只是在放大字体，直到动画完成，然后重新绘制。

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

但要稍微掩饰这种效果，可以减少动画间隔时间并扩大字体大小的差距。然后，这些步骤出现在一个更快的时间框架中，人们看不到单个步骤。

查看此小提琴

我知道没有使用字体大小来修改文本元素的解决方案，但我可能无论如何都不会采用这种方法。相反，我会简单地使用与所讨论的文本相对应的cufónized路径，并手动缩放它请注意这明显比手动缩放文本元素更流畅，至少在Firefox中是这样。

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

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

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

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

我认为放大路径会更容易、更平滑，比如：

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/详细信息。

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

您将能够看到一个演示并下载一个扩展元素的插件。需要注意的是，你不能明确地选择目标字体大小，但只要稍微计算一下，你就可以编写一个小插件，将目标大小转换为一个数字。

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

祝你好运！：）

相关文章：