Snap SVG - 动画路径元素

Question

我希望使用 Snap SVG 库为 SVG 中的路径元素设置动画。我看到 Snap 有一些与路径相关的方法。其中包括：Snap.path.getBBox()、Snap.path.getSubpath(), 和 Snap.path.map()

我一直在思考如何为路径设置动画，使其开始时不显示，随着时间的推移会显示越来越多的路径。

我的问题和这个类似（不过这个问题不是Snap特有的，虽然我假设原理是类似的）：How can I animate a progressive drawing of svg path?

这里是一个工作演示，所以很清楚我想要完成什么（最终结果）：http://jsfiddle.net/lollero/THGuz/

我制作了一个 JSFiddle 来使用我的特定路径元素：http://jsfiddle.net/xhdjbj1r/1/

感谢任何帮助或指导。

Answer 1

我有一个解决方案在 Chrome 和 Opera

中显示了一些错误行为（闪烁额外的行）

var yourElement = s.select('path#test');
var pathLength = yourElement.getTotalLength();
yourElement.attr({
    'stroke-dasharray': '' + pathLength + ' 0'
});
Snap.animate(0, pathLength, function(t){
    yourElement.attr({'stroke-dasharray': '' + t + ' ' + (pathLength - t)});
}, 10000);

想法非常简单 - 将笔划的破折号数组从零到全长设置动画。我希望这可能是一个干净的解决方案的好一步

Snap SVG - 动画路径元素

Snap SVG - Animating a path element

animation

svg

snap.svg