2

我画了一个类似线圈的结构

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

但我想用动画来展示它，就好像它是逐像素绘制的。我试过这个

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

这并没有给我我真正想要的东西。谁能告诉我我应该怎么做才能显示，因为这是用 raphael js 逐步绘制的？谢谢你的帮助

4

1 回答 1

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++;
    }
}

请告诉我这是正确的方法，因为我是这个 javascript 编程的新手。

于 2012-06-15T04:59:28.880 回答