Is there a fluent transition possibility for anima

问题:

So far it seems like it is not fluent, but choppy. E.g. if you have one state attribute with font-size: 14 and want to animate to state with font-size: 16, the transition doesn't look smooth.

It jumps in 2 steps. First change to 15 and then to 16px.

Can it be forced to look more smooth?

I am using Firefox 14 for testing.

My current code:

    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);
          }
);

回答1:

That is a known problem and has nothing to do with Raphael but with 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.

Even though it's possible with the new CSS 3 animations you can see it's just upscaling the font until the animation is finished and then it's redrawn.

I am sorry that I don't have solution for you, but I haven't seen a smooth cross-browser font size animation with CSS until now.

---

But what you can do to disguise this effect a bit, is to reduce the animation interval time and widen the gap of the font-sizes. The steps are then appearing in a faster time frame and one can't see the single steps.

See this fiddle

回答2:

I know of no solution using font-size to modify a text element, but I would probably not take that approach anyway. Instead, I would simply use the cufónized path corresponding to the text in question and scale it manually. Please note that this is noticeably smoother than scaling a text element manually, at least in Firefox.

1. Visit Cufón and convert my preferred font to its vector equivalent, selecting Raphael.registerFont as the customization option;

2. Generate my text using paper.print instead of paper.text. This returns a path element instead of a text element.

3. Zoom the resulting path element using transformation instead of font-size. Since paper.print accepts a font-size as an argument, it is easy to compute the desired scale corresponding to your target font-size.

Here's a rough demonstration showing how it works (I put the text on a backing for easier hovering). I hope you'll pardon its numerous inadequacies; it was produced in a bit of haste.

回答3:

I think scaling the path up would be easier and smoother, like:

text.hover(function() {
    text.animate({transform: "s1.5 1.5 "}, 400);
}, function() {
    text.animate({transform: "s1.0 1.0 "}, 400);
});

See http://jsfiddle.net/SeeG2/40/ for details.

回答4:

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

You will be able to see a demo and download a plugin that scales the element. The caveat is that you do not get to explicitly choose the target font-size, but, with a little math, you can write a little plugin to convert the target size to a number to scale by.

My personal homepage makes use of this plugin on the welcome page, if you want to see another demo.

Good luck! :)