1

このように生成された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/

4

1 に答える 1

4

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.

于 2012-12-05T18:53:14.367 に答える