Question

我正在为使用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>

Answer 1

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

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

如何使用SVG.js为线设置动画

1 个答案: