我正在使用自定义的函数来绘制路径,以便绘制带有动画的 Logo (使用 jquery 和 Raphael.js)。这个“animateLine”函数非常有用,因为它沿着“矢量”路径绘制一条考虑 FX 的 svg 路径。对于只有一条路径,此功能没有问题(可以在演示中找到)。
function animateLine (canvas, hoverDivName, colorNumber, pathString, duration, destination)
问题在于,当同时使用该功能(同时绘制 2 条路径)时,存在某种冲突。
您可以在这个 fiddle 上看到我的问题:http://jsfiddle.net/VyRDk/2/
我认为问题是与临时变量“destination”冲突,但在调用“AnimateLine”函数时我使用了 2 个不同的全局变量(您会注意到“lepathanimated1”和“lepathanimated2")
var lepathanimated1;
var lepathanimated2;
这样使用:
animateLine(logo_animated, "canvas", "#1d1d1b", path_circle,1200,lepathanimated1);
我希望您有足够的信息来找到解决方案,如果您需要更多详细信息,请询问 =)
感谢您的宝贵时间
编辑: 天哪,我刚刚找到了解决方案! #所以快乐
我刚刚在函数外部创建了路径对象,并使用了标识符 (# id) 来避免冲突(并将其用于 jquery 动画步骤函数)
您可以找到正确的DEMO HERE
但是我不确定这是否是正确的方法(优化)。尽管有“RequestAnimFram”,但使用“animate”是否正确?优点是让 Raphael 和 jQuery 一起工作(比 javascript canvas 方式更容易)
无论如何,希望它有帮助 =)
PS:如果有帮助,请投票,因为这是我的第一个 stackoverflow 问题/答案,但声誉仍为 1 -_-
最佳答案
给你DEMO
您必须调整setTimeout
,以便它在绘制第一条路径后立即开始。
setTimeout(function()
{
animateLine(logo_animated, "canvas2", "#1d1d1b",
path_trait_sup,1200,lepathanimated2);
},1200);
祝你好运
关于javascript - 双动画路径绘制错误,使用 Raphael.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18497844/