javascript 使用 Snap.svg 循环动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20206345/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loop an animation with Snap.svg
提问by Marcatectura
Background: I'm using Snap.svg to render a circle, then animate its radius on hover. I've got that piece working with the code below.
背景：我使用 Snap.svg 渲染一个圆，然后在悬停时为其半径设置动画。我已经使用下面的代码处理了那部分。
Problem: I'm trying to get a looping "pulse" effect once circleRadaris hovered on, which would involve continuously animating between the initial rand the new rof 70. While the docs' mention of snap.animate(from, to,...) hereseems promising, I can't figure out how I would implement that in the context of my code. Is there anyone a little more familiar with Snap who can help? Thanks!
问题：我试图在circleRadar悬停时获得循环的“脉冲”效果，这将涉及在70的初始r和新之间连续动画r。虽然文档提到了 snap.animate(from, to,... )这里看起来很有希望，我不知道如何在我的代码上下文中实现它。有没有更熟悉 Snap 的人可以提供帮助？谢谢！
Code:
代码：
//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);
回答by Ian
I suspect there may be a repeat function somewhere on Snap, but I couldn't see it, so if there is, that would probably be the way to go. In the absence of that, you could have 2 animations and switch between them. So...
我怀疑 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 });
There's a fiddle here http://jsfiddle.net/TWBNE/29/(I suspect the above may need tweaking, repeating animations can sometimes be a bit fiddly depending on mousemovements etc if you move out mid animation for example. So you may want not to allow a restart until anim is finished) . Another alternative could be making 2 animations that use the 'begin' attribute and start it on 'end' of the others id.
这里有一个小提琴http://jsfiddle.net/TWBNE/29/（我怀疑上面的内容可能需要调整，例如，如果你移出中间动画，重复动画有时可能会有点繁琐，具体取决于鼠标移动等。所以你可能想要在动画完成之前不允许重新启动）。另一种选择是制作 2 个使用 'begin' 属性的动画，并在其他 id 的 'end' 开始它。
Edit: You may want to check for memory use if the animations are likely to be left for a very long time. Some Snap versions have worse memory use, and also this method doesn't complete functions, so I'm not 100% if it would increase the memory call stack. If its very quick animations it may be more noticable.
编辑：如果动画可能会保留很长时间，您可能需要检查内存使用情况。一些Snap版本内存使用更差，而且这个方法没有完成功能，所以我不是100%会增加内存调用堆栈。如果它的动画非常快，它可能会更引人注目。
回答by OndrejRohon
I think snap.svg's animation system is too young and doesn't have that function. Current version is 0.0.1! :)
我认为 snap.svg 的动画系统太年轻，没有那个功能。当前版本是 0.0.1！:)
I think way to go for advanced animation is to connect it with Greensock Animation Platform, thats the most advanced animation framework that I know for the web. Have a look on this thread: http://forums.greensock.com/topic/8604-snapsvg/
我认为高级动画的方法是将它与 Greensock 动画平台连接起来，这是我所知道的最先进的网络动画框架。看看这个线程：http: //forums.greensock.com/topic/8604-snapsvg/
Otherwise, you can call you animation again on complete.
否则，您可以在完成时再次调用您的动画。
回答by Philippe
You can create a recursive function to produce an infinite animation, here is an 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.
}
);
}
