2

我试图创建一种带有 4 个切片的圆形旋转木马，通过单击一个切片，它会扩大到大约 2/3 的馅饼，显示它的内容（另一个切片也会同样缩小）基本上我从 raphael“成长馅饼”开始演示http://raphaeljs.com/growth-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 回答