如何为raphael.js动画设置旋转原点？

Question

我这样生成了8条路径：

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

我希望它们以顺时针方向从M320 120的原点（线的起点）旋转，以产生“饼”效果：

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

相反，使用的原点位于线的中心。 我已经尝试过格式化字符串了

"r45 cx320 cy120"

和其他组合，但总是忽略值。

编辑：这是一个更清楚地突出我的问题的小提琴： http ： //jsfiddle.net/vMRdj/

Answer 1

你几乎钉了它。 重要的是使用旋转指令的绝对版本（“R”而不是“r”）并使用格式“R（度）（origin-x），（origin-y）”明确指定原点。

这是代码：

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

小提琴： http ： //jsfiddle.net/kevindivdbyzero/F4xhh/

不要忘记您可以将transform和paths作为数组传递 - 如果您不必担心在参数之间连接逗号分隔符，则可以很容易地构造参数。