Javascript Raphael JS-沿半圆路径设置半圆动画

我有一个仪表/刻度盘类型的水平仪，可以在我的应用程序中设置动画。当值发生变化时，指针和刻度盘将自动更新。我得到的代码对于小的更改可以正常工作，但是当它有较大的更改时，动画不会沿着半圆的路径运行

我的代码是这样的：（间隔仅用于测试目的）

---

我在这里设置了一个JS提琴，因此您可以看到它的作用：

这里的公认答案解决了我的问题：

我需要修改@genkilabs答案中的一些内容，以适应液位/仪表应用。希望这对其他人有帮助：

var arcCentre = { x: 100, y: 100 },
    arcRadius = 50,
    arcMin = 1, // stops the arc disappearing for 0 values
    baseRotation = -100, // this starts the arc from a different point
    circleRatio = 220/360, // I found this helpful as my arc is never a full circle
    maxValue = 1000; // arbitrary        

// starts the arc at the minimum value
var myArc = r.path()
         .attr({
             "stroke": "#f00",
             "stroke-width": 14,
             arc: [arcCentre.x, arcCentre.y, arcMin, 100, arcRadius],
         })
         .transform('r'+ baseRotation + ',' + arcCentre.x + ',' + arcCentre.y);

// set a new value
var newValue = 234; // pick your new value

// convert value to ratio of the arc to complete
var ratio = newValue / maxValue;

// set level
var newLevelValue = Math.max(arcMin, ratio * 100 * circleRatio);
myArc.animate({
    arc: [arcCentre.x, arcCentre.y, newLevelValue, 100, arcRadius]
}, 750, 'bounce');

var arcCentre = { x: 100, y: 100 },
    arcRadius = 50,
    arcMin = 1, // stops the arc disappearing for 0 values
    baseRotation = -100, // this starts the arc from a different point
    circleRatio = 220/360, // I found this helpful as my arc is never a full circle
    maxValue = 1000; // arbitrary        

// starts the arc at the minimum value
var myArc = r.path()
         .attr({
             "stroke": "#f00",
             "stroke-width": 14,
             arc: [arcCentre.x, arcCentre.y, arcMin, 100, arcRadius],
         })
         .transform('r'+ baseRotation + ',' + arcCentre.x + ',' + arcCentre.y);

// set a new value
var newValue = 234; // pick your new value

// convert value to ratio of the arc to complete
var ratio = newValue / maxValue;

// set level
var newLevelValue = Math.max(arcMin, ratio * 100 * circleRatio);
myArc.animate({
    arc: [arcCentre.x, arcCentre.y, newLevelValue, 100, arcRadius]
}, 750, 'bounce');