creat a animate arc with Raphael.js

arcWithRaphael.js

/**
 * @demo http://jsfiddle.net/mtmzorro/TRLN6/1/
 * 
 * thx genkilabs 
 * http://stackoverflow.com/questions/5061318/drawing-centered-arcs-in-raphael-js 
 */
 
var arc = Raphael("canvas", 300, 300);

/**
 * [arc]
 * @param  {[Number]} xloc  [x 轴位置]
 * @param  {[Number]} yloc  [y 轴位置]
 * @param  {[Number]} value [百分比]
 * @param  {[Number]} total [百分比基数]
 * @param  {[Number]} R     [半径]
 */
arc.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
    };
};

var baseArc = arc.path().attr({
    "stroke": "#eee",
    "stroke-width": 10,
    arc: [150, 150, 100, 100, 60]
});

// 外层百分比比值圈从0.01开始 fixed bug arc为0时 VML 渲染异常
var myArc = arc.path().attr({
    "stroke": "#88b8e6",
    "stroke-width": 10,
    arc: [150, 150, 0.01, 100, 60]
});
 
var myText = arc.text(150, 150, '￥7000').attr({
    'font-family': 'Microsoft YaHei',
    'font-size': '20px'
});

var target = 20;

if(target > 0){
    //将百分比 由0 到 target
    myArc.animate({
        arc: [150, 150, target, 100, 60]
    }, 500, "ease-in-out");
}else{
    // arc 为 0 隐藏不渲染
    myArc.hide();
}