双动画路径绘图错误，与Raphael.js

Question

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

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

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

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

我认为问题是与临时var“目的地”的冲突，但我在调用“AnimateLine”函数时使用2个不同的全局变量（你会注意到“lepathanimated1”和“ lepathanimated2" ）

var lepathanimated1;
var lepathanimated2;

以这种方式使用：

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

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

感谢您的时间

编辑： OMG我刚刚找到解决方案!! #SoHappy

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

您可以找到正确的 DEMO HERE

HOWEVER 我并不感觉这是正确的做法（优化）。尽管“RequestAnimFram”使用“animate”是正确的吗？ Raphael＆amp; amp; jQuery一起工作（更简单的javascript画布方式）

无论如何，跳跃它有助于=）

PS：如果它有帮助请投票，cos'这是我的第一个stackoverflow问题/答案，仍然是声誉的一个-_-

Answer 1

在这里你DEMO

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

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

祝你好运