使用Snap.svg循环动画 [英] Loop an animation with Snap.svg

问题描述

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

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.

问题：我试图获得循环脉冲效果一次 circleRadar 徘徊，这将涉及在初始 r 和新 r <之间连续动画/ code> of 70.虽然文档提到了snap.animate（from，to，...）这里似乎很有希望，我无法弄清楚如何在我的代码环境中实现它。是否有人更熟悉Snap可以提供帮助？谢谢！

Problem: I'm trying to get a looping "pulse" effect once circleRadar is hovered on, which would involve continuously animating between the initial r and the new r of 70. While the docs' mention of snap.animate(from, to,...) here seems 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!

代码：

//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);

推荐答案

我怀疑Snap上某处可能有重复功能，但是我看不到它，所以如果有，那可能就是这样。如果没有，你可以有2个动画并在它们之间切换。所以......

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...

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'开始。

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.

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

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.svg循环动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！