2

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

Shruti
  • 47
  • 8
  • This link has some good information on the problem. It may help. http://stackoverflow.com/questions/4631019/how-to-draw-a-vector-path-progressively-raphael-js – CM Kanode Jun 14 '12 at 13:11
  • I have tried that but it isn't working with my case – Shruti Jun 14 '12 at 13:24
  • anyways I have got its solutions from my so many tries :) one worked – Shruti Jun 14 '12 at 13:26
  • 1
    Glad you got a solution. I'd suggest posting your solution as an answer to this question and mark it accepted. That will help complete this question, and potentially help other people with a similar problem. – CM Kanode Jun 14 '12 at 13:28
  • 1
    I think CM Kanode's right -- I'd like to see your solution as well. I tackled this same problem like this (http://jsfiddle.net/zPRha/31/), but there are a dozen ways to skin this kitty. – Kevin Nielsen Jun 14 '12 at 17:27
  • Zero's answer is genius. I'll have to remember that. – amadan Jun 14 '12 at 21:15
  • I saw this solution for straight lines so I tried it for my coil animation also – Shruti Jun 15 '12 at 04:55

1 Answers1

0
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.

Shruti
  • 47
  • 8