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动画？

1 个答案: