Snap.svg 延迟动画不起作用

Question

我正在使用 Snap.svg 并且我有以下代码：

创建 7 个黑色矩形。我有一个函数 (rectAnim) 可以为矩形设置动画。我需要它们在不同的时间进行动画处理，所以我创建了 setInterval 方法来延迟它们的动画处理，但它不起作用。

如果删除它并只保留函数调用，您会看到动画运行，但 setInterval 似乎打破了这一切。

我做错了什么？如何让每个矩形以不同的时间进行动画处理？

var s = Snap('#stuff');

function rectAnim(tgt){
    tgt.animate({
        width: 100,
        x: 50
    }, 1000, mina.easeinout, function(){
        tgt.animate({
            width: 200,
            x: 0
        }, 1000, mina.easeinout, function(){
            tgt.animate({
                width: 100,
                x: 50
            }, 1000, mina.easeinout, rectAnim(tgt));
        });
    });
}

for(var i = 0; i < 7; i++){
    var obj = s.rect(0, 41 * i, 200, 40);

    obj.node.setAttribute('id', 'strap' + i);

    setInterval(function(){
        rectAnim(obj);
    }, 200 * i);
}

Answer 1

问题是你最后的 'obj' 元素的范围。当你运行它在循环中时，它会在函数实际运行s.

时被覆盖

要解决这个问题，您需要创建某种形式的关闭。这是您可以做到的一种方法。

for(var i = 0; i < 7; i++){
    var obj = s.rect(0, 41 * i, 200, 40);

    obj.node.setAttribute('id', 'strap' + i);
    (function( myobj ) {
       setTimeout(function(){
          rectAnim(myobj);
       }, 200 * i);
    })( obj )
}

jsfiddle

我还调整了回调以使用 setTimeout，因为它应该运行与动画中现有的回调一样正常，如果不符合预期，您可能需要将其改回原样。

Snap.svg 延迟动画不起作用

Snap.svg delayed animations not working

javascript

animation

svg

snap.svg