Javascript 如何使用捕捉SVG在路径上设置动画？

我正在尝试使用snap.svg创建动画

我已经创建了一条南北线和一个圆。我正在尝试沿从下到上的两条路径设置圆的动画

var north_line = paper.path("M335.8 137.6v163.1").attr({
  id: "north",
  fill: "#fff",
  strokeWidth: "5",
  stroke: "#000"
});

var south_line = paper.path("M334.3 398v163.2").attr({
  id: "south",
  fill: "#fff",
  strokeWidth: "5",
  stroke: "#000",
  "stroke-dashoffset": bot_line
});

目前我有动画工作，但圆是从线的顶部开始动画，而不是从线的下方开始动画，我如何更改方向

var greenCircle = paper.circle(32,32,8);
  greenCircle.attr({
    fill: "#FF5252",
    strokeWidth: 14
  });

  setTimeout( function bottom() {
    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);
  });

这把小提琴应该能让我更清楚地了解我想要实现的目标

我正在尝试创建几个圆，并让它们在顶部的路径上重复设置动画。使用循环是实现这一点的最佳方法吗？创建多个圆，然后使用间隔在路径上设置它们的动画

非常感谢您的指导

---

谢谢

尝试在

Snap中交换
0
和
bot\u行
。设置动画

    setTimeout(function bottom() {
        Snap.animate(
            bot_line,  // <==
            0,         // <==
            function(value) {
                movePoint = south_line.getPointAtLength(value);
                greenCircle.attr({ cy: movePoint.y, cx: movePoint.x });
            },
            700,
            mina.easeinout
        );
    });

setTimeout（函数底部（）{
捕捉动画(
bot\u line，//尝试在
Snap.animate中交换
0
和
bot\u line

    setTimeout(function bottom() {
        Snap.animate(
            bot_line,  // <==
            0,         // <==
            function(value) {
                movePoint = south_line.getPointAtLength(value);
                greenCircle.attr({ cy: movePoint.y, cx: movePoint.x });
            },
            700,
            mina.easeinout
        );
    });

setTimeout（函数底部（）{
捕捉动画(
bot_line，//至于方向问题，您可以将南线的坐标从
M334.3 398v163.2
更改为
M334.3 561.2v-163.2
（561.2为398+163.2，163.2为负数则相反）。这里有一个关于使用Snap.svg重复动画的问题：至于方向问题，您可以将南线的坐标从
M334.3 398v163.2
更改为
M334.3 561.2v-163.2
（561.2为398+163.2，163.2为负数则相反）。这里有一个关于使用Snap.svg重复动画的问题：