moving custom font doesn't work

问题

I'm trying to move a text via animation using raphael's print(), but it doesn't work:

var paper = Raphael(document.getElementById("stage"), 640, 480);
var text = paper.print(300, 200, "Test Text", paper.getFont("Yanone"), 50);
text.animate({
    y: 400
}, 1000);

Anyone have ideas what I may be missing?

回答1:

I think you should use the text function instead of the print function if you want to animate it later. I'm not sure why but it works ...

Here is an example with both ways of doing it:

var paper = Raphael("canvas", 640, 480);
var fonts = [0, paper.getFont("DIN")];

//using print
var p = paper.print(70, 150, "Custom fonts", fonts[1], 20).attr({fill: "#f00"});

//using text (font-family is the same as in getFont)
var t = paper.text(100, 150, "Custom fonts")
t.attr({"font-family": "DIN", "font-size":50, "opacity": 0.5});
t.attr({"fill": "#000"});

And on the second one you can do this for example :

t.animate({"font-size":40,"fill":"#0f0"},2000);
t.animate({"x":150},5000);

来源：https://stackoverflow.com/questions/6811357/moving-custom-font-doesnt-work