使用Snap.svg循环动画

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

问题：我试图让一个循环的“脉冲”效应一旦circleRadar悬停上，这将涉及到初始r和70新r之间连续动画虽然扣的文档提。动画（从，到，...）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);

来源

2013-11-26 Marcatectura

我怀疑有可能是重复功能上的某个地方快，但我看不到它，所以如果有，那很可能是要走的路。如果没有，你可以有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/（我怀疑上面可能需要调整，重复动画有时可以是一个有点繁琐取决于mousemovements等，如果你搬出中旬动画的例子。所以，你可能想在anim完成之前不允许重启）。另一种方法是制作2个使用'begin'属性的动画，并在其他id的'end'开始。

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

来源

2013-11-26 09:54:05 Ian

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

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

否则，你可以再次调用你的动画完成。

来源

2013-11-26 12:48:00 OndrejRohon

哇，我从来没有听说过使用GreenSock到现在为止，但它看起来很棒 - 谢谢！ – Marcatectura

您可以创建一个递归函数来产生无限的动画，这里是一个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. 
     } 
    ); 

}

来源

2016-01-30 20:00:49

使用Snap.svg循环动画

回答

相关问题