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小提琴，你在這兒可以看到這個動作：http://jsfiddle.net/Rfd3v/1/

Answer 1

的接受的答案在這裏排序我的問題： drawing centered arcs in raphael 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');