捕捉 SVG 动画 - 无限循环冻结答案

【问题标题】：Snap SVG animation - Infinite Loop Freezing捕捉 SVG 动画 - 无限循环冻结
【发布时间】：2016-10-16 23:43:53
【问题描述】：

我在尝试循环 this animation 时遇到问题：

svg = document.getElementById("shape");
s = Snap(svg);

var l2 = Snap.select('#line2');


animatePath(); 

function animatePath(){

    l2.animate({ d: "M328.2,29.9c-51.6,8.3-65.9-2.5-79.4,23.5c-5.4,10.5-12.8,24.3-21.6,47.7c-14.7,38.6-131.1,9.1-37.8,108.8c92.8,99.6,101.9,43.3,89.2,22.9c-7.1-11.4,40.5-1.6,95.5-3.7c18.3-0.6,37.1-2.8,54.8-7.5c71.7-19.1,12-85.7-47-119.9S398.5,18.6,328.2,29.9z" }, 1000, mina.ease, resetPath);

}



function resetPath(){

    l2.animate({ d: "M218.5,85.1c-8,18.9-33.1,25.7-43.6,40.9c-10.8,15.6-9.5,38,38.5,89.3c93.2,99.6,121,58.2,107.9,37.8c-9.8-15.3-7.6-35.7,64.8-53.5c49.3-12,56.4-24.5,36.9-42c-9.5-8.5-24.7-18.3-43.8-29.8c-10.8-6.5-17-13.5-20.3-20.6c-14.5-30.5,25.4-61.6-32.3-51.8C256.6,67.4,252.6,4.4,218.5,85.1z" }, 1000, mina.ease, animatePath);


}

第一个循环很好，但几秒钟后动画开始冻结。

我猜问题来自回调，但经过多次尝试后我无法弄清楚。

【问题讨论】：

标签： javascript animation svg infinite-loop snap.svg

【解决方案1】：

它对单个动画效果很好，但对多个动画就搞砸了吗？

我认为问题在于您同时触发了许多相同的回调，因此您最终会陷入不断升级的循环。

只需在其中一个动画的每个函数中设置一个回调，而不是为每个动画设置一个回调。因此，您只需在一个动画之后调用 resetPath 或 animatePath，并从其他动画中移除回调。

【讨论】：

【解决方案2】：

实际上是的，它与单个动画完美配合。

我删除了每个函数中的多个回调，工作得很好。非常感谢您的帮助。

【讨论】：