使用Raphael.js绘制双动画路径错误

Question

我使用一个自定义的函数来绘制路径，以便用动画绘制徽标（使用jquery和Raphael.js）。这个"animateLine"函数很有用，因为它沿着"vector"路径绘制了一个考虑FX的svg路径。对于一个路径，这个函数没有问题（可以在演示中找到）。

function animateLine (canvas, hoverDivName, colorNumber, pathString, duration, destination)

问题是，当同时使用函数时，存在某种冲突（同时绘制2条路径）。

你可以在这个小提琴上看到我的问题：http://jsfiddle.net/VyRDk/2/

我认为问题是与临时var"destination"冲突，但在调用"AnimateLine"函数时，我使用了两个不同的全局变量（您会注意到"lepathanimated1"one_answers"lepathonimated2"）

var lepathanimated1;
var lepathanimated2;

使用方式：

animateLine(logo_animated, "canvas", "#1d1d1b", path_circle,1200,lepathanimated1);

我希望你有足够的信息来找到解决方案，如果你需要更多的细节，只需询问=）

感谢您抽出时间

编辑：天哪，我刚刚找到了解决方案#SoHappy

我只是在函数外创建了路径对象，并使用了一个标识符（#id）来避免冲突（并将其用于jquery动画步骤函数）

您可以在此处找到正确的演示

但是我不认为这是正确的方法（优化）。使用"animate"而不使用"RequestAnimFram"是正确的吗？优势在于拥有Raphael&jQuery协同工作（比javascript画布方式更容易）

不管怎样，跳下去有帮助=）

PS：如果有帮助，请投赞成票，因为"这是我的第一个stackoverflow问题/答案，仍然是我的声誉之一-_-

Answer 1

开始DEMO

您必须调整setTimeout，使其在绘制第一条路径后立即开始。

setTimeout(function()
{
    animateLine(logo_animated, "canvas2", "#1d1d1b", 
                path_trait_sup,1200,lepathanimated2);
},1200);

好运