Animation 捕捉SVG-设置路径元素的动画

我希望使用Snap SVG库在SVG中设置路径元素的动画。 我看到Snap有一些与路径相关的方法。其中包括：

Snap.path.getBBox（）

，

Snap.path.getSubpath（），

和

Snap.path.map（）

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

我的问题与此类似（但这个问题不是Snap特有的，尽管我假设校长也类似）：

这是一个正在运行的演示，因此很清楚我希望实现的目标（最终结果）：

我制作了一个JSFIDLE来处理我的特定路径元素：

---

非常感谢您的帮助和指导。

我有一个解决方案，可以在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);

---

这个想法非常简单——将笔划的dasharray从零到全长设置动画。我希望这是一个清洁解决方案的好步骤

也许这会有所帮助，并且有更多的方法可以合并。基本上和瓦西里斯的方法一样。谢谢！我把它连接到我的JSFIDLE中，效果非常好。现在，我们来看一些CBT（如您所提到的）。