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

Question

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

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

我需要使用 javascript promises 吗？ 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();