使用 Snap.svg 循环播放动画

背景：我使用 Snap.svg 渲染一个圆，然后在悬停时为其半径设置动画。我已经用下面的代码处理了该部分。

Problem：我试图获得一次循环“脉冲”效果circleRadar悬停在上面，这将涉及在初始r和新的r70. 虽然文档提到了 snap.animate(from, to,...)here http://snapsvg.io/docs/#Snap.animate看起来很有希望，我不知道如何在我的代码上下文中实现它。有更熟悉 Snap 的人可以提供帮助吗？谢谢！

Code:

//create the circle
circleRadar = s.circle(195, 345, 20);

//initial styling  
circleRadar.attr({
  fill: "#3f8403",
  opacity: 0.3
});

//animation
function testRadar(){
  circleRadar.animate({
    opacity: '1',  
  r: 70
  }, 1000, mina.elastic);
}

//trigger
circleRadar.hover(testRadar);

我怀疑 Snap 上的某个地方可能有重复功能，但我看不到它，所以如果有的话，那可能就是正确的方法。如果没有，您可以有 2 个动画并在它们之间切换。所以...

var animating = true;

//animation
function animOn(){
  if( animating ) {
    circleRadar.animate({
      opacity: '1',  
        r: 70,
        fill: 'none'
    }, 1000, mina.elastic, animOut);
  };
}

function animOut() {
  circleRadar.animate({
      opacity: '0.3',  
      r: 20,
      fill: 'none'
   }, 1000, mina.elastic, animOn);
};

circleRadar.hover(function() { animating=true; animOn() },      
    function() { animating=false });

这里有一把小提琴http://jsfiddle.net/TWBNE/29/ http://jsfiddle.net/TWBNE/29/（我怀疑上述内容可能需要调整，例如，如果您移出中间动画，重复动画有时可能会有点繁琐，具体取决于鼠标移动等。因此，您可能不希望在动画完成之前不允许重新启动）。另一种选择是制作 2 个使用“开始”属性的动画，并在其他 id 的“结束”处开始。

编辑：如果动画可能会保留很长时间，您可能需要检查内存使用情况。有些 Snap 版本的内存使用情况更糟，而且这个方法不能完成功能，所以我不是 100% 认为它会增加内存调用堆栈。如果它的动画非常快，它可能会更引人注目。