스냅 SVG 애니메이션 무한 루프가

Question

냉동 내가 루프 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); 


} 

첫 번째 루프는 괜찮지 만, 몇 초 후에 애니메이션을 동결하기 시작합니다.

문제는 콜백에서 비롯된 것 같지만 많은 시도 후에 알아낼 수는 없습니다.

Answer 1

단일 애니메이션에서는 문제가 없지만 여러 애니메이션에서는 엉망이됩니까?

나는이 문제가 동일한 콜백이 동시에 발생한다는 것을 보여줌으로써 점점 커지고있다.

모든 애니메이션마다 하나가 아닌 애니메이션 중 하나에서 하나의 콜백 만하면됩니다. 따라서 하나의 애니메이션 후에 resetPath 또는 animatePath 만 호출하고 다른 애니메이션에서는 콜백을 제거합니다.

Answer 2

실제로 예, 단일 애니메이션으로 완벽하게 작동했습니다.

각 함수에서 여러 콜백을 제거했습니다. 정상적으로 작동했습니다. 도움을 주셔서 대단히 감사드립니다.