如何按顺序计时svg动画？答案

【问题标题】：How to time svg animations in a sequence?如何按顺序计时svg动画？
【发布时间】：2016-09-25 06:57:53
【问题描述】：

我正在尝试使用 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 小提琴 http://jsfiddle.net/4wLrjmcq/1/

谢谢

【问题讨论】：

我更改了您的 JS Fiddle 以删除 setTimeout 内容，并添加了一个穿过东线的绿色圆圈，它的移动非常平稳，同时红色圆圈穿过南线。不过我有一台速度很快的电脑。我在 Chrome 和 Firefox 中试过，没问题。所以这可能只是性能问题。我看到的唯一卡顿是它在页面完全加载之前启动动画，因此您可能需要确保在页面加载之前不启动动画。这个 JS Fiddle 对我来说运行流畅：jsfiddle.net/kgxLkwh7
如果您希望它们按顺序排列，您可以使用一个动画的回调（最后一个动画参数）在完成后调用下一个动画。
@Ian 你能举个例子说明它是如何工作的吗？
@PeterHaight 感谢您的解释和 JSFiddle。我已经能够让线条在没有口吃的情况下移动，我遇到的问题是让它们重复
jsfiddle.net/kgxLkwh7/1

标签： javascript jquery css svg snap.svg

【解决方案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();

【讨论】：