javascript - 元素集上的 SnapSVG 动画回调未触发

Question

参见 JSfiddle !

我想为一组元素设置动画并在完成后执行回调:

s.selectAll('.active').animate( {
        transform: matrix 
    },
    300,
    mina.linear,
    function() {
       //callback doesnt fire
       alert('callback')
    }
)

元素动画正确但回调未执行。

但是，当我将动画应用于一组 元素时，会触发回调:

group.animate( {
        transform: matrix 
    },
    300,
    mina.linear,
    function() {
       alert('callback')
    }
)

.. 但我不想将我选择的元素放在一个组中，因为这会在其他地方引起更多的复杂性。

是否可以在触发回调的同时为通过 .select() 或 .selectAll() 获得的一组元素设置动画？

提前致谢!

编辑:对于 future 的读者，您可以使用 forEach 为一组元素设置动画，并计算所有元素是否都已完成动画:

function hideToPoint(elements, x, y, callback) {
    var finished = 0;
    elements.forEach(function(e) {

        e.animate( {
                //do stuff
            },
            300,
            mina.linear,
            function () {
                finished++;
                if (finished == elements.length) {
                    callback();
                }
            }
        )
    })
}

Answer 1

我将尝试回答几个问题，尽管我不确定是否与回调有关。如果没有像 jsfiddle 这样的适当测试，很难判断它是否只是示例代码。

但是，上面的代码至少有两个问题。

创建矩阵是用

new Snap.Matrix();   // as opposed to Snap.matrix()

还有

elements.animate()

这里的问题是 animate 作用于一个元素(编辑:看起来它可以作用于集合中的元素，但不适用于此处示例的回调，edit2:现在可能支持集合上的回调)，而不是多个元素这样(有时您可以将某些东西应用于单独处理它们的集合，但据我所知，动画不是这种情况)。

所以你要么想做一个

elements.forEach( function(el) { el.animate({blah: value}, 2000, mina.linear.callback ) 
});

或者如果它是一个 svg 组(而不是一个集合)，原始代码可能会工作(但我会称它为“myGroup”或其他名称而不是“元素”以提高代码可读性和猜测它包含的内容)

fiddle (使用快照动画字符串包含了不同的动画)