如何使用SVG.js动画线条

Question

我试图用SVG.js库绘制一条线条。我尝试过添加动画()方法，但由于某种原因，它不起作用。

我试图隐藏()我已经画的线，然后显示和动画之后。我在这里做错什么了？

线应该隐藏在负载-然后动画到他们的位置后。

请运行代码看一看。

$(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>

​

Answer 1

函数hide() & show()破坏了动画效果。我想你是在尝试这样的方法：

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