问题
I'm banging my head against a wall with this one. I have raphael js version 2.0 and I need to make images rotate in a way that's cross-browser. I would love to do it in CSS3, but not all browsers support what I need to do.
so, after racking my brain, I went to the Raphael playground and tried out some code in there. Doesn't work there either. What's going on here?
go to playground: http://raphaeljs.com/playground.html run this code, should see an outline of a square. paper.rect(100, 100, 300,300).animate({rotation:"-45"}, 2000);
using transform works:
paper.rect(100, 100, 300,300).animate({transform:"r45"}, 2000);
but unfortunately with transform, I can't seem to specify a centerpoint. I want the object to rotate off the bottom-left corner. I can do that with this code:
paper.rect(100, 100, 300,300).rotate(45,0,300)
but that doesn't animate, or accept easing, or have any callbacks.
I've seen "rotation" in several examples including these:
http://www.irunmywebsite.com/raphael/additionalhelp.php#PAGETOP http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/
thanks, - keith
回答1:
The rotation attribute seems to be missing from the 2.0 specification. It existed in 1.x. I don't know why this is so, but I can't find it in the new documentation. I expect this is an oversight that will be corrected in a minor revision going forward.
In the meantime, you can create your own animation handler and call .rotate on each tick based on your own easing.
回答2:
Going to the playground site and pasting this code:
paper.rect(100, 100, 300,300).animate({transform:"r-45,0,0"}, 2000);
rotates the rectangle from the absolute 0,0 position. See raphael js code @ github, which shows that transform can either take 2 or 4 parameters for to achieve a rotation.
来源：https://stackoverflow.com/questions/7908479/raphaeljs-rotation-not-working