Raphael JS绘制同心线

Question

我被困在使用Raphael：，我想制作一个基本的动画，绘制同心圆线，同时加载一些东西。

所以，我做了这个功能：

function loadingButton(width, height) {

    width = width ? width : 240;
    height = height ? height : 240;




    var loadingButton = Raphael("loading-button", width, height);
    var center = 120,
        xloc = center,
        yloc = center,
        R = 120,
        imgW = 124,
        imgH = 140;
    var lines;
    var percent = loadingButton.text(center, center, '0');
    percent.attr({'font-size': 36, 'fill': '#fff'});
    var count = 0;
    var interval = setInterval(function(){

        if( count <= 100){
            var start_x = center+Math.round((center-30)*Math.cos(4*count*Math.PI/200));
            var start_y = center+Math.round((center-30)*Math.sin(4*count*Math.PI/200));
            var end_x = center+Math.round((center-10)*Math.cos(4*count*Math.PI/200));
            var end_y = center+Math.round((center-10)*Math.sin(4*count*Math.PI/200));   
            lines = loadingButton.path("M"+start_x+" "+start_y+"L"+end_x+" "+end_y).attr({"stroke":"#FFF","stroke-width":"1"});
            percent.attr({text: count});
            count++;
        }

        else {
            clearInterval(interval);
        }
    }, 50);






};

现场演示的 : http://jsfiddle.net/rfuqjL65/

问题是，正如你在小提琴上看到的，动画开始于第一季度(90°)，而不是顶部(0°)。

问题是：，我想要动画从顶部开始。

有什么想法吗？

Answer 1

我不能让你的小提琴运转，但是：

您可以在坐标变量中添加/减Math.PI/2到Math.cos和Math.sin的角度参数(以弧度表示)，这应该可以做到这一点！

Answer 2

http://jsfiddle.net/rfuqjL65/2/我改变了你的代码。而且这起作用了。而且还

 var start_x = center+Math.round((center-30)*Math.sin(4*count*Math.PI/200));
                var start_y = center-Math.round((center-30)*Math.cos(4*count*Math.PI/200));
                var end_x = center+Math.round((center-10)*Math.sin(4*count*Math.PI/200));
                var end_y = center-Math.round((center-10)*Math.cos(4*count*Math.PI/200));