拉斐爾弧動畫漸變，而不是按照弧形路徑

Question

我已經能夠使用這個代碼

var archtype = Raphael("canvas", 200, 100); 
archtype.customAttributes.arc = function (xloc, yloc, value, total, R) { 
    var alpha = 360/total * value, 
     a = (90 - alpha) * Math.PI/180, 
     x = xloc + R * Math.cos(a), 
     y = yloc - R * Math.sin(a), 
     path; 
    if (total == value) { 
     path = [ 
      ["M", xloc, yloc - R], 
      ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R] 
     ]; 
    } else { 
     path = [ 
      ["M", xloc, yloc - R], 
      ["A", R, R, 0, +(alpha > 180), 1, x, y] 
     ]; 
    } 
    return { 
     path: path 
    }; 
}; 

//make an arc at 50,50 with a radius of 30 that grows from 0 to 40 of 100 with a bounce 
var my_arc = archtype.path().attr({ 
    "stroke": "#f00", 
    "stroke-width": 14, 
    arc: [50, 50, 0, 100, 30] 
}); 

my_arc.animate({ 
    arc: [50, 50, 40, 100, 30] 
}, 1500, "bounce"); 

使用此代碼唯一的問題是，我需要成功的動畫沿着圓弧的路徑弧在頁面上有多個畫布元素，我不想在同一頁面上定義archtype.customAttributes.arc 10次。

爲了解決這個問題，我想我可能只是做到這一點...

function arc (xloc, yloc, value, total, R) { 
     var alpha = 360/total * value, 
      a = (90 - alpha) * Math.PI/180, 
      x = xloc + R * Math.cos(a), 
      y = yloc - R * Math.sin(a), 
      path; 
     if (total == value) { 
      path = [ 
       ["M", xloc, yloc - R], 
       ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R] 
      ]; 
     } else { 
      path = [ 
       ["M", xloc, yloc - R], 
       ["A", R, R, 0, +(alpha > 180), 1, x, y] 
      ]; 
     } 
     return path; 
    } 
var path = arc(50, 50, 0, 100, 30); 
var my_arc = archtype.path().attr({ 
    "stroke": "#f00", 
    "stroke-width": 14, 
    path:path 
}); 

var path = arc(50, 50, 40, 100, 30); 
my_arc.animate({ 
    path:path 
}, 1500, "bounce"); 

然而，當我嘗試做這樣的圓弧終點帶給新端點最直的路引起扭曲變形效果。

任何人都可以解釋爲什麼我的例子這樣做，並建議一個是我爲了克服這個問題，而無需聲明我需要在頁面上的每個畫布的自定義屬性？假設arc: [50, 50, 0, 100, 30]與path: path一樣嗎？

感謝您的幫助。

Answer 1

我不能給一個受過教育的回答，但解決了我的問題，通過調整這個例子：http://jsfiddle.net/7jHPv/5/在這個問題引用：Animating an arc in Raphael JS wobbles in Chrome

var myArc = r.path().attr({ 
     "stroke": arcColours[i] 
    , "stroke-width": 6 
    , arc: [1, 100, muffinRadius, step*(i+1), diagramHeight/2] 
    }); 

    myArc.animate({ 
     arc: [values[i], 100, muffinRadius, step*(i+1), diagramHeight/2] 
    }, 1500, "<>", function() { 
     // anim complete here 
    });