4

背景：我正在使用 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);
4

3 回答 3

7

我怀疑 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%。如果它的动画非常快，它可能会更引人注目。

于 2013-11-26T09:54:05.010 回答
3

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

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

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

于 2013-11-26T12:48:00.127 回答
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.
        }
    );

}
于 2016-01-30T20:00:49.060 回答