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

有两个主要问题。

首先是你发出callback（）而不是回调。你不想立即运行该函数（除非它返回一个函数），你想在以后需要回调时运行它，所以删除括号。

第二个是你需要将路径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：动画来回路径

1 个答案: