Question

我试图创建一个永远重复的反弹动画。我遇到的问题是，snap似乎没有执行我在回调中添加的动画。似乎在github上有一些问题用0.1.1的Snap描述了这个问题，但是它们已经关闭了。还有其他人看到过这样的东西吗？

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

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

回调中的动画未触发，SnapSVG

1 个答案: