回调中的动画没有触发，SnapSVG

Animation in callback not firing, SnapSVG

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

我正在尝试创建一个永远重复的反弹动画。我遇到的问题是，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);

你的代码中有一些错误…

首先，在您的参数中，您错过了缓和方法(如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);
相关文章：