使用 Snap.svg 循环播放动画答案

【问题标题】：Loop an animation with Snap.svg使用 Snap.svg 循环播放动画
【发布时间】：2013-12-10 23:06:07
【问题描述】：

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

问题：我正试图在circleRadar 悬停时获得循环“脉冲”效果，这将涉及在初始r 和新r 之间连续动画70. 虽然文档提到 snap.animate(from, to,...) here 似乎很有希望，但我不知道如何在我的代码上下文中实现它。有没有更熟悉 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);

【问题讨论】：

标签： animation svg javascript vector-graphics snap.svg

【解决方案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 个使用“开始”属性的动画，并在其他 id 的“结束”处启动它。

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

【讨论】：

【解决方案2】：

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

我认为高级动画的方法是将其与 Greensock 动画平台连接，这是我所知道的最先进的网络动画框架。看看这个线程：http://forums.greensock.com/topic/8604-snapsvg/

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

【讨论】：

哇，直到现在我才听说过 Greensock，但它看起来很棒 - 谢谢！

【解决方案3】：

你可以创建一个递归函数来产生无限动画，这里是example

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

}

【讨论】：