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（）动画一组元素，同时能够触发回调？

提前多多感谢！

编辑：对于未来的读者，您可以使用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这样的正确测试，很难判断它是否仅仅是示例代码。

但是，上述代码中至少存在2个问题。

使用

创建矩阵

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＆＃39;或者其他东西而不是＆＃39;元素＆＃39; for代码可读性和猜测它包含的内容）

fiddle（使用快照动画字符串包含不同的动画）

没有触发的元素集上的SnapSVG动画回调

1 个答案: