How to create smooth circular arcing animation?

Question

see jsfiddle

Here's my code:

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);

The problem is that in the intermediate animation it doesn't follow a circular path, I get this weird flattened thing instead:

How do I make the animation remain circular throughout?

I essentially want to create a "loading pie". The pie should animate into a full circle.

Animating from "empty" to 60% looks even worse: http://jsfiddle.net/mnbayazit/Fh43X/3/

Answer 1

Figured it out after digging through some of their examples.

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);