2

4 つのスライスで一種の丸みを帯びたカルーセルを作成しようとしています。スライスをクリックすると、そのコンテンツを示すパイの約 2/3 に拡大します (他のスライスも同様に縮小します) 基本的に、ラファエルの「成長するパイ」から始めました。 demo http://raphaeljs.com/growing-pie.html を少し変更して、この種の動作を実現しました。

しかし、スライスをクリックして展開すると、回転して上に配置する必要があります（オフセット角度0°）...アニメーション内のすべてのスライスの正確な角度を知る必要があると思います() 関数と任意に変更しますが、その方法がわかりません。

function animate(ms) {
var start = 150,
    val;
for (i = 0; i <= 3; i++) {

    val = 360 / total * data[i];

    paths[i].animate({
        segment: [200, 200, 150, start, start += val]
    }, ms || 1500, "bounce");
    paths[i].angle = start - val / 2;
}

rotateCircle();

}

ここhttp://jsfiddle.net/ExFCb/32/には、私が実際に取り組んでいる例があります

4

1 に答える 1

1

更新フィドルhttp://jsfiddle.net/ExFCb/72/を見てください

基本的に、各サイクルで正しいrerotate変数を設定する必要があります。

if (i === 0) {
    data = [240, 40, 40, 40];
    rerotate = 0;
}

等々...

于 2013-08-21T08:37:51.387 に答える