使用Snap.svg循环动画

Question

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

问题 ：一旦circleRadar徘徊，我试图获得一个循环的“脉冲”效果，这将涉及在初始r和70的新r之间连续动画。虽然文档提到了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);

Answer 1

我怀疑在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/ （我怀疑以上可能需要调整，如果你移出动画中期动画，重复动画有时会有点繁琐，具体取决于鼠标移动等。所以你可能想要在动画完成之前不允许重启）。 另一个替代方案是制作2个动画，使用'begin'属性并在其他id的'end'开始。

编辑：如果动画很可能会被遗留很长时间，您可能需要检查内存使用情况。 一些Snap版本的内存使用较差，而且这种方法也没有完成功能，所以如果增加内存调用堆栈，我不是100％。 如果它的动画非常快，它可能会更加明显。

Answer 2

我认为snap.svg的动画系统太年轻了，没有那个功能。 当前版本是0.0.1！ :)

我认为去高级动画的方法是将它与Greensock动画平台连接起来，这是我所知道的最先进的动画框架。 看看这个帖子： http ： //forums.greensock.com/topic/8604-snapsvg/

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

Answer 3

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

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

}