Question

I have drawn a coil like structure

var pathCommand = "M 10 50 l 10 0 ";
for (var i = 0; i < 10; i++) {
 pathCommand += "c  15   0  25 -20  15 -20 " + "c -10   0   0  20  15  20 ";
}
var pc = paper.path(pathCommand);`enter code here`
            pc.attr({
                stroke: '#000',
                'stroke-width': 3
            });

but I want to show this with animation as if it is being drawn pixel by pixel.
I have tried this

var pc = paper.path("M 10 50");
for (var i = 0; i < 10; i++) {
pathCommand += "c  15   0  25 -20  15 -20 " + "c -10   0   0  20  15  20 ";
pc.animate({path: pathCommand, stroke: '#000','stroke-width': 3},2000);
}

this is not giving me what I exactly want.
Can anyone tell me how should I do it to show as this is drawing progrssively, with raphael js??
Thanks for any help

Answer 1

var s = [ { stroke: "M 150 150", time: 0},
            { stroke: "c  15   0  25 -20  15 -20", time: 800},
            { stroke: "c -10   0   0  20  15  20", time: 600},
            { stroke: "c  15   0  25 -20  15 -20", time: 800},
            { stroke: "c -10   0   0  20  15  20", time: 600},
            { stroke: "c  15   0  25 -20  15 -20", time: 800},
            { stroke: "c -10   0   0  20  15  20", time: 600},
            { stroke: "c  15   0  25 -20  15 -20", time: 800},
            { stroke: "c -10   0   0  20  15  20", time: 600} ];
var drawnPath = s[0].stroke;
var myPath = paper.path(drawnPath).attr({"stroke-width": 3,"stroke": "#000"});
var temp = 1;
animateMyPath();
function animateMyPath() {
if (temp < s.length) {
    drawnPath += s[temp].stroke;
    myPath.animate({path: drawnPath}, s[temp].time, animateMyPath);
    temp++;
    }
}         

Please tell me is this correct way to do this, as I am new to this javascript programming.