Question

我一直在使用Raphael JS：我想制作一个基本动画，在加载某些内容的同时绘制同心线。

所以，我做了这个功能：

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));

拉斐尔JS绘制同心线

2 个答案: