如何创建平滑的圆形电弧动画？

Question

see jsfiddle

这是我的代码：

var paper = Raphael("holder");

function sector(cx, cy, r, startAngle, endAngle) {
    var x1 = cx + r * Math.cos(-startAngle),
        y1 = cy + r * Math.sin(-startAngle),
        x2 = cx + r * Math.cos(-endAngle),
        y2 = cy + r * Math.sin(-endAngle);
    return ['M', cx, cy, 'L', x1, y1, 'A', r, r, 0, +(endAngle - startAngle > Math.PI), 0, x2, y2, 'z'];
}

var path = paper.path(sector(200, 200, 107, 0, 0.25)).attr({
    'fill': '#fff',
        'fill-opacity': 0.5,
        'stroke': 'none'
});
path.animate({
    path: sector(200, 200, 107, 0, Math.PI / 2)
}, 1000);

问题在于，在中间动画中它不遵循循环路径，我得到了这个奇怪的扁平化的东西：

如何让动画保持循环？

我基本上想要创建一个“加载馅饼”。馅饼应该动画成一个完整的圆圈。

从“空”到60％的动画效果看起来更糟：http://jsfiddle.net/mnbayazit/Fh43X/3/

Answer 1

在深入了解他们的一些例子之后，

Figured it out。

var r = Raphael("holder");

r.customAttributes.segment = function (x, y, r, a1, a2) {
    var flag = (a2 - a1) > 180,
        clr = (a2 - a1) / 360;
    a1 = (a1 % 360) * Math.PI / 180;
    a2 = (a2 % 360) * Math.PI / 180;
    return {
        path: [
            ["M", x, y],
            ["l", r * Math.cos(a1), r * Math.sin(a1)],
            ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)],
            ["z"]
        ]
    };
};

var p = r.path().attr({
    segment: [200, 200, 100, 0, 0],
    stroke: 'none',
    fill: '#fff',
    'fill-opacity': 0.5
});
p.animate({
    segment: [200, 200, 100, 0, 359]
}, 2000);