javascript - 使用 Vivus.js 以所需方向为线条制作动画

Question

我正在尝试为这条线设置动画，使其从上到下开始，然后右转以使用 Vivus.js 绘制自身。但是，图形似乎没有动画，我不知道为什么..也许有人对 SVG 绘制动画有一些经验？这是笔：https ://codepen.io/anon/pen/mLzYyE

代码：

var animate = ["animate1"];

animate.forEach(function (svgId) {
    return new Vivus(svgId, {
        type: "async",
        start: "autostart",
        duration: 100
    });
});

Answer 1

据我了解Vivus.js，仅适用于path元素。因此，在您的情况下，您应该将rect元素替换为path. 我还将类型更改oneByOne为序列动画。这是一个简化的示例：

var animate = ["animate1"];

animate.forEach(function (svgId) {
    return new Vivus(svgId, {
        type: 'oneByOne',
        start: "autostart",
        duration: 100
    });
});

svg {
  height: 500px;
  width: 200px;
}

path {
  stroke-width: 3px;
}

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

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="animate1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 66.598 221.333" enable-background="new 0 0 66.598 221.333" xml:space="preserve">
	<path stroke="red" d="M0 0 l 0 20"/>
  <path stroke="red" d="M0 25 l 0 20"/>
  <path stroke="red" d="M0 50 l 0 20"/>
  <path stroke="red" d="M0 75 l 30 0"/>

</svg>