javascript - 回调中的动画未触发，SnapSVG

Question

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

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

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