Snap SVG：进出路径的动画

Question

我已经写了一些代码，我认为它会动画到某个路径，然后通过回调恢复到原始路径。它动画到路径但停在那里，我做错了什么？

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

主要有2个问题。

首先是您发出的是 callback() 而不是 callback。您不想立即运行函数（除非它 returns 一个函数），您希望稍后在需要回调时运行它，因此请删除括号。

第二个是你需要存储路径 d 属性以动画返回，这里称为 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

Snap SVG：进出路径的动画

Snap SVG: Animating to and from a path

snap.svg