SnapSVG动画回调的一组元素不触发

SnapSVG animation callback on set of elements not firing

本文关键字：元素 一组 回调 动画 SnapSVG      更新时间：2023-09-26

参见

我想动画一组元素，并执行回调完成时，像这样:

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();
                }
            }
        )
    })
}

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

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

用

创建矩阵
new Snap.Matrix();   // as opposed to Snap.matrix()
也

elements.animate()

这里的问题是animate作用于一个元素(edit:看起来它可以在一个集合中的元素上工作，但不是回调作为例子在这里，edit2:回调集现在可能被支持)，而不是多个元素(你有时可以应用一些东西到一个单独处理它们的集合，但据我所知，这不是与动画的情况)。

所以你要么写

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

或者如果它是一个svg组(而不是一个集合)，原始代码可能会工作(但我将其称为'myGroup'或其他东西，而不是'elements'，以便代码可读性和猜测它包含什么)

fiddle(已经包含了一个不同的动画使用snap动画字符串)

相关文章：