如何使用SVG.js為線設置動畫

Question

我正在嘗試為使用SVG.js庫繪制的線條設置動畫。 我嘗試添加animate（）方法，但是由於某種原因，它不起作用。

我嘗試了hide（）我首先繪制的線條，然后顯示並設置動畫。 我在這里做錯了什么？

線應在負載時隱藏-然后在其位置進行動畫處理。

請運行代碼看看。

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