如何為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作為數組傳遞 - 如果您不必擔心在參數之間連接逗號分隔符，則可以很容易地構造參數。