Question

我正在尝试使用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);
  });

这个小提琴应该让我更清楚地了解我想要完成的事情。

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

我正在试图创建几个圆圈并让它们重复动画到顶部的路径。是否最好使用循环来创建多个圆，然后使用间隔让它们在路径上设置动画？

非常感谢任何指导！

谢谢

Answer 1

尝试在0中交换bot_line和Snap.animate

    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
        );
    });

如何使用Snap SVG在路径上制作动画？

1 个答案: