Raphael дуги анимации морфинга вместо того, чтобы следовать дуги пути

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