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

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

的问题是，在中间的动画没有遵循圆形路径，我得到的，而不是这个奇怪的扁平件事：

如何让动画始终保持圆形？

我基本上想创建一个“加载饼”。馅饼应该成为一个完整的圆圈。通过他们的一些例子挖后http://jsfiddle.net/mnbayazit/Fh43X/3/

Answer 1

Figured it out：

从“空”动画到60％，看起来更糟。

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