How do I set rotation origin for a raphael.js animation?

Question

I have 8 paths generated thusly:

for (i = 0 ; i<8; i++){
    slices[i] = card.path("M320 120 L320 215").attr({"stroke" : "#00A5Df",
            "stroke-width" : 10});
}

I want them to rotate from origin of M320 120(start of the line) in a clockwise direction to produce a 'pie' effect:

for (i = 0 ; i<8; i++){
    slices[i].animate({transform :"r"+45*(i+1)+""},(200*i));
}

Instead the origin used is in the centre of the line. I've tried formatting the string like

"r45 cx320 cy120"

and other combinations but the values are always ignored.

edit: here is a fiddle which more clearly highlights my problem: http://jsfiddle.net/vMRdj/

score 4 · Accepted Answer · answered Dec 05 '12 at 18:53

You almost nailed it. The important thing is to use the absolute version of the rotate directive ("R" instead of "r") and to specific the origin explicitly, using the format "R(degree) (origin-x),(origin-y)".

Here's the code:

for (i = 0 ; i<8; i++){
    slices[i].animate({transform : ["R", 45*(i+1), 320, 120 ] }, i * 125 );
}

And the fiddle: http://jsfiddle.net/kevindivdbyzero/F4xhh/

Don't forget that you can pass transform and paths as arrays -- it makes it a lot easy to structure your parameters if you don't have to worry about concatenating comma separators between arguments.

How do I set rotation origin for a raphael.js animation?

1 Answers1