回调中的动画未触发，SnapSVG

Question

我正在尝试创建一个永远重复的弹跳动画。我遇到的问题是 snap 似乎没有执行我放在回调中的动画。 github 上似乎有一些问题描述了 Snap 回到 0.1.1 的这个问题，但它们已经被关闭了。有没有其他人看到过这样的事情？

当前代码，它将运行动画的第一部分然后停止：

var slight_bounce = function(body_part, transform1, transform2){
    body_part.stop().animate({ 
      transform: transform1
    }, 1000,
    function() { 
      body_part.animate({ 
        transform: transform2
      });
      slight_bounce(body_part, transform1, transform2); // Repeat this animation so it appears infinite.
    }
    );
  }

  slight_bounce(hat, bounce, bounce_back);

Answer 1

您的代码中有一些错误...

首先在您的参数中，您错过了缓动方法（如 mina.bounce），因此需要包含在内。

第二个内部函数没有回调作为动画参数的一部分，所以也不会在正确的时间被调用，所以所有这些都有点错误。

jsfiddle

var s = Snap(400, 620);

var slight_bounce = function(body_part, transform1, transform2 ){
    body_part.stop().animate({ 
       transform: transform1
    }, 1000, mina.bounce,

      function() { 
          body_part.animate({ 
              transform: transform2
          },1000,mina.bounce,
            function() {
                 slight_bounce(body_part, transform1, transform2);
            })

       }
   );
};

var hat = s.rect(100,100,100,100);
var bounce = 't0,100';
var bounce_back = 't0,0';

slight_bounce(hat, bounce, bounce_back);

由于这是一个很常见的问题，我只是稍微重写一下，因为我发现这样写的回调函数方法有点笨拙。

这完全一样，但我觉得它更有条理。

jsfiddle

function startBounce( body_part, transform1, transform2 ) {
    body_part.stop().animate({ 
                transform: transform1
    }, 1000, mina.bounce, endBounce.bind(null, body_part, transform1, transform2));
}

function endBounce( body_part, transform1, transform2 ) {   
    body_part.animate({ 
                transform: transform2
    }, 1000, mina.bounce, startBounce.bind(null, body_part, transform1, transform2));
}        

var hat = s.rect(100,100,100,100);
var bounce = 't0,100';
var bounce_back = 't0,0';

startBounce(hat, bounce, bounce_back);