运行 SVG 动画向后使用 Vivus.js

Question

我正在尝试运行向后播放 SVG 线条动画，但我似乎无法使用 Vivus plugin

让它工作

这是我的代码

我的 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) Plays the animation with the speed given in parameter. This value can be negative to go backward, between 0 and 1 to go slowly, or superior to 1 to go fast. By default the value is 1."

出于某种原因，当我添加任何负值时，插件无法正常工作，并且我没有收到任何控制台错误。

有人做过这个吗？

The above code as a fiddle

Answer 1

vivus 启动时没有描边。然后它会按时间逐渐向前绘制笔划。

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

如果你wait till its drawn something，你可以运行它向后。例如

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

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

Answer 2

您可以使用一种名为 "finish" 的方法。

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

应该这样做。

运行 SVG 动画向后使用 Vivus.js

Run SVG animation Backwards using Vivus.js

html

jquery

animation

svg

vivus