双动画路径绘制错误，带有 Raphael.js答案

【问题标题】：Double animated Path drawing bug, with Raphael.js双动画路径绘制错误，带有 Raphael.js
【发布时间】：2013-08-28 20:43:53
【问题描述】：

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

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

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

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

我认为问题在于与临时变量“destination”的冲突，但我在调用“AnimateLine”函数时使用了 2 个不同的全局变量（您会注意到“lepathanimated1”和“ lepathanimated2")

var lepathanimated1;
var lepathanimated2;

这样使用：

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

我希望您有足够的信息来找到解决方案，如果您需要更多详细信息，请询问 =)

感谢您的宝贵时间

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

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

您可以找到正确的DEMO HERE

但是我不确定这是正确的方法（优化）。尽管使用“RequestAnimFram”，但使用“动画”是否正确？优点是让 Raphael 和 jQuery 一起工作（比 javascript canvas 方式更容易）

无论如何，跳起来有帮助 =)

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

【问题讨论】：

【解决方案1】：

给你DEMO

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

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

祝你好运

【讨论】：