如何使用 SVG.js 为线条制作动画答案

【问题标题】：How to animate lines using SVG.js如何使用 SVG.js 为线条制作动画
【发布时间】：2018-07-04 15:26:29
【问题描述】：

我正在尝试为使用 SVG.js 库绘制的线条制作动画。我尝试添加 animate() 方法，但由于某种原因，它不起作用。

我试图隐藏（）我首先绘制的线，然后显示并动画它。我在这里做错了什么？

这些线应该在加载时隐藏 - 然后在之后动画到它们的位置。

请运行代码查看。

$(document).ready(function() {
  var draw = SVG('frame-1').size(300, 268);
  var line = draw.line(0, 0, 0, 268).stroke({
    width: 1,
    color: '#000'
  });
  var line2 = draw.line(0, 60, 300, 60).stroke({
    width: 1,
    color: '#000'
  });

  var draw2 = SVG('frame-2').size(300, 268);

  var line3 = draw2.line(300, 0, 300, 268).stroke({
    width: 1,
    color: '#000'
  });

  var line4 = draw2.line(0, 208, 300, 208).stroke({
    width: 1,
    color: '#000'
  });

  line3.hide();
  line3.show().animate({
    ease: '<',
    delay: '1.5s'
  });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="frame-1"></div>
<div id="frame-2"></div>

【问题讨论】：

使用 animate() 然后 nothing 之后会这样做：什么都没有。当您想要为线条设置动画时，您需要 line.animate().plot(newPoints)，如文档中所述：svgjs.com/elements/#line-plot
@Fuzzyma 所以 - 如果我将线条的不透明度设置为 0 并将其放置在我的 div 的底部，然后将新点绘制到它应该使用 line.animate() 滑入的位置.plot() - 这行得通吗？还是我想的不对
你想达到什么目的？你想有淡入效果，动画不透明度。如果要移动线条，请使用 move 设置动画。如果要动画到另一条线，请使用 plot
@Fuzzyma 只是试图从页面顶部滑动#frame-1 中的行，从页面底部滑动#frame-2 中的行。它们最初应该是隐藏的。
在这种情况下animate().plot(new line position).opacity(1) 会做我猜的工作

标签： javascript animation svg svg.js

【解决方案1】：

hide() & show() 函数破坏了动画效果。我认为您正在尝试这样的事情：

line3.attr('opacity',0).animate(1500,'<').attr('opacity',1);

【讨论】：