0

我正在尝试向后运行 SVG 线条动画，但我似乎无法使用Vivus 插件让它工作

这是我的代码

我的 SVG：

<svg version="1.1" id="eco-system-line-1" class="eco-system-line active" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 2.9 64.5" enable-background="new 0 0 2.9 64.5" xml:space="preserve">
    <g>
        <path fill="none" stroke="#1C75BC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M 1.3 63.3 L 1.3 1.2"/>
    </g>
</svg>

我的 jQuery：

 var svgLine = new Vivus(eco-system-line-1);
 svgLine.play(-1);

Vivus 插件网站声明“play(speed) 以参数中给定的速度播放动画。该值可以为负值向后退，0 到 1 之间为慢速，或高于 1 为快。默认值为1."

由于某种原因，当我添加任何负值时，插件不起作用，并且我没有收到任何控制台错误。

有人做过这项工作吗？

上面的代码作为小提琴

4

2 回答 2

2

当 vivus 开始时，没有画笔画。然后，它会逐渐向前绘制笔画。

如果你向后运行它，它会从没有中风开始，并且永远不会画一个。

如果你等到它画了一些东西，你可以向后运行它。例如

setInterval(function(){ svgLine.play(-1); }, 3000);

如果您阅读文档，大概还有一种方法可以让它从绘制东西的位置开始。

于 2015-05-28T02:00:52.213 回答
1

您可以使用一种称为“完成”的方法。

svgLine.finish().play(-1);

那应该这样做。

于 2016-10-21T22:21:40.327 回答