스냅 SVG : 경로에서 애니메이트하기

Question

특정 경로에 애니메이션을 적용한 다음 콜백을 통해 원래 경로로 되돌릴 코드를 작성했습니다. 그것은 경로에 움직이지만 멈추지 만, 내가 뭘 잘못하고 있니?

예 : jsfiddle이 주요 문제가 있습니다

var speed = 250; 

[].slice.call(document.querySelectorAll('.arrow_button')).forEach(function(el) { 

    var s = Snap(el.querySelector('svg')), 
     path = s.select('path'), 
     route = el.getAttribute('data-path-route'), 
     callback = function() { 
      path.animate({ 'path' : path }, speed, mina.easeout); 
     }; 

    el.addEventListener('click', function() { 
     path.animate({ 'path' : route }, speed, mina.easein, callback()); 
    }); 

}); 

Answer 1

.

첫 번째는 콜백 대신 callback()을 발행한다는 것입니다. 함수를 즉시 실행하지 않으려면 (함수를 반환하지 않는 한) 콜백이 필요할 때 나중에 실행하려면 대괄호를 제거하십시오.

둘째로 origPath라고하는 여기에 다시 애니메이션을 적용 할 경로 속성을 저장해야한다는 점입니다.

그래서 코드의 모습

...

var s = Snap(el.querySelector('svg')), 
    path = s.select('path'), 
    origPath = path.attr('d'), 
    route = el.getAttribute('data-path-route'), 
    callback = function() { 
      path.animate({ 'path' : origPath }, speed, mina.easeout ); 
    }; 

    el.addEventListener('click', function() { 
     path.animate({ 'path' : route }, speed, mina.easein, callback); 
    }); 

jsfiddle