Is there a smooth transition to the font size of the animation in Raphael JS?

Question

It still seems that he is not fluent , but volatile. For instance. if you have one state attribute with font size: 14 and want to animate the state with font size: 16, the transition does not look smooth.

He jumps in 2 steps. First change the value to 15, and then to 16 pixels.

Is it possible to make it look more smooth?

I am using Firefox 14 for testing.

My current code is:

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

Answer 1

This is a known issue and has nothing to do with Raphael, but with sub-pixel rendering :

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

Even if this is possible with the new CSS 3 animation, you can see that it simply extends the font until the animation is finished and then it is redrawn.

I'm sorry that I have no solution for you, but so far I have not seen a smooth font size animation with multiple CSS browsers.

---

But what you can do to slightly hide this effect is to reduce the animation interval time and expand the font size gap. Then the steps appear faster and the individual steps are not visible.

Look at this fiddle

Answer 2

I don't know a solution using font-size to change a text element, but I probably would not have taken this approach. Instead, I would simply use the cufónized path corresponding to the corresponding text and scale it manually. Note that this is noticeably smoother than manually scaling a text element, at least in Firefox.

• Visit Cufón and convert my preferred font to its vector equivalent by selecting the Raphael.registerFont parameter as a configuration option;

• Create text using paper.print instead of paper.text . This returns a path element instead of a text element.

• Enlarge the resulting path element with a transform instead of font size. Since paper.print accepts the font size as an argument, it is easy to calculate the desired scale according to your font size.

Here's a rough demonstration showing how this works (I put text on the backing for easier hanging). I hope you have mercy on his many shortcomings; it was done in some hurry.

Answer 3

I think that scaling the path would be simpler and smoother, like this:

 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 more details.

Answer 4

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

You can see the demo and download the plugin that scales the item. The caveat is that you cannot explicitly select the target font size, but with a little math, you can write a small plugin to convert the target size to a scalable number.

My personal page uses this plugin on the welcome page if you want to see another demo.

Good luck! :)