如何按顺序对 svg 动画进行计时？

Question

我正在尝试使用 svg 动画改进 javascript。

我想要完成的是让红色圆圈按顺序从底部流到顶部线（当底部线完成时它从上面的线开始）并且绿色圆圈从底部线流出到所有的边线。

我需要使用 javascript 承诺吗？ settimeout 是一种好的方法吗？如果是这样，为什么我的动画出现故障并且没有完成？

setInterval(function animOn(){
  if( animating ) {
    Snap.animate(0, bot_line, function( value ) {
       movePoint = south_line.getPointAtLength( value );
       redCircle.attr({ cy: movePoint.y, cx: movePoint.x }); 
      // move along path via cx & cy attributes
    }, 1000,mina.easeinout);

    Snap.animate(0, east, function( value ) {
       movePoint = east_line.getPointAtLength( value );
       greenCircle.attr({ cx: movePoint.x, cy: movePoint.y  }); 
      // move along path via cx & cy attributes
    }, 1000,mina.easeinout);
  };
}, 1000);

JS FIDDLE http://jsfiddle.net/4wLrjmcq/1/

谢谢

Answer 1

您可以使用Snaps动画的回调函数功能。最后一个参数是动画完成后运行的函数。

所以创建一些函数，例如animOn和animGreen，然后将函数名添加到动画调用的末尾。

jsfiddle

function animOn(){
  if( animating ) {
    Snap.animate(0, bot_line, function( value ) {
       movePoint = south_line.getPointAtLength( value );
       redCircle.attr({ cy: movePoint.y, cx: movePoint.x }); 
      // move along path via cx & cy attributes
    }, 1000,mina.easeinout);

    Snap.animate(0, east, function( value ) {
       movePoint = east_line.getPointAtLength( value );
       greenCircle.attr({ cx: movePoint.x, cy: movePoint.y  }); 
      // move along path via cx & cy attributes
    }, 1000,mina.easeinout, animGreen);
  };
};

function animGreen(){
  if( animating ) {
    Snap.animate(0, bot_line, function( value ) {
       movePoint = south_line.getPointAtLength( value );
       greenCircle.attr({ cy: movePoint.y, cx: movePoint.x }); 
      // move along path via cx & cy attributes
    }, 700,mina.easeinout, animOn);
  };
};

animOn();

如何按顺序对 svg 动画进行计时？

How to time svg animations in a sequence?

javascript

css

jquery

svg

snap.svg