如何在 raphael js 中为曲线设置动画答案

【问题标题】：how to animate a curve in raphael js如何在 raphael js 中为曲线设置动画
【发布时间】：2012-06-15 13:26:53
【问题描述】：

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

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 逐步绘制的？感谢您的帮助

【问题讨论】：

这个链接有一些关于这个问题的好信息。它可能会有所帮助。 stackoverflow.com/questions/4631019/…
我已经尝试过了，但它不适用于我的情况
无论如何我已经从我的这么多尝试中得到了它的解决方案 :) 一个工作
很高兴您找到了解决方案。我建议发布您的解决方案作为此问题的答案并将其标记为已接受。这将有助于完成这个问题，并可能帮助其他有类似问题的人。
我认为 CM Kanode 是对的——我也想看看你的解决方案。我像这样 (jsfiddle.net/zPRha/31) 解决了同样的问题，但是有十几种方法可以给这只小猫剥皮。

标签： javascript raphael

【解决方案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++;
    }
}

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

【讨论】：

你不是在drawnPath += s[temp].stroke;中少了一个空格吗？
@Shruti 看起来不错。如果有机会，我会研究其他解决方案。我现在很好奇，但工作需要我的时间。 :(
@CMKanode：当然可以，如果你有时间请告诉我这方面是否需要改进。