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

问题在于你的目标范围是什么？元素在最后。当你在循环中运行它时，它会在函数实际运行时被覆盖。

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

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延迟动画无法正常工作

1 个答案: