Animation 使用Snap.svg循环动画

背景：我正在使用Snap.svg渲染一个圆，然后在悬停时设置其半径的动画。我用下面的代码编写了这篇文章

问题：我试图在

circleRadar

悬停后获得循环“脉冲”效果，这将涉及在初始

r

和新的

r

70之间连续设置动画。虽然文档中提到的snap.animate（from，to，…）似乎很有希望，但我不知道如何在我的代码上下文中实现它。有谁更熟悉Snap的人可以帮忙吗？谢谢

代码：

//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上的某个地方可能有重复功能，但我看不到，所以如果有，那可能就是正确的方法。如果没有，您可以有两个动画并在它们之间切换。所以

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

这里有一个提琴（我怀疑上面可能需要调整，重复动画有时可能有点烦琐，这取决于鼠标移动等，例如，如果你在动画中移出。因此，你可能希望在动画完成之前不允许重新启动）。另一种选择是制作两个使用“开始”属性的动画，并在其他id的“结束”处开始

---

编辑：如果动画可能会保留很长时间，则可能需要检查内存使用情况。一些快照版本的内存使用情况更差，而且这种方法无法完成函数，因此如果它会增加内存调用堆栈，我不是100%。如果它的动画速度非常快，那么它可能会更引人注目。

我认为snap.svg的动画系统太年轻，没有这个功能。当前版本为0.0.1！：）

我认为高级动画的发展方向是将其与Greensock动画平台相连接，这是我所知道的最先进的网络动画框架。请查看此线程：

---

否则，您可以在完成后再次调用动画。

您可以创建一个递归函数来生成无限动画，下面是一个

---

哇，直到现在我才听说过格林斯托克，但它看起来很棒-谢谢！

var sunRays = sun.select('#rays');

// Sun events
raysAnimation();

// Infinite animation for the sun rays
function raysAnimation(){
    sunRays.stop().animate(
        { transform: 'r90,256,256'}, // Basic rotation around a point.
        10000, // Nice slow turning rays
        function(){ 
            sunRays.attr({ transform: 'rotate(0 256 256)'}); //reset
            raysAnimation(); // Repeat this animation so it appears infinite.
        }
    );

}