javascript - Raphael JS - パスに沿って半円をアニメーション化する

Question

アプリでアニメーション化するゲージ/ダイヤル タイプのレベルがあります。値が変更されると、針とダイヤルは自動的に更新されます。私が持っているコードは、小さな変更では問題なく動作しますが、大きな変更があると、アニメーションは半円のパスに沿って進みません。

私が持っているコードは次のようなものです:(間隔はテスト目的のためだけです)

var rad = Math.PI / 180;
var getCurvePath = function(cx, cy, r, startAngle, endAngle) {
    var x1 = cx + r * Math.cos(-startAngle * rad),
        x2 = cx + r * Math.cos(-endAngle * rad),
        y1 = cy + r * Math.sin(-startAngle * rad),
        y2 = cy + r * Math.sin(-endAngle * rad);

    return ["M", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2];
};

var zeroAngle = 197, fullAngle = -15,baseAngle = 199,
    r = Raphael('level');

var level = r
    .path(getCurvePath(150, 150, 75, zeroAngle, baseAngle))
    .attr({
        'stroke': '#FF0000',
        'stroke-width': '11px'
    });

window.setInterval(function() {
    var ratio = Math.random();
    var newLevelAngle = (zeroAngle - fullAngle) * ratio;
    level.animate({
        'path': getCurvePath(150, 150, 75, newLevelAngle, baseAngle)
    }, 1000, 'bounce');
}, 2000);

ここでJS Fiddleをセットアップしたので、これを実際に見ることができます：http://jsfiddle.net/Rfd3v/1/