时间戳

首页 > 解决方案 > 如何使用 SVG.js 为线条制作动画

javascript - 如何使用 SVG.js 为线条制作动画

问题描述

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

标签： javascriptanimationsvgsvg.js

解决方案

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

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

推荐阅读