如何創建平滑的圓弧形動畫？

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