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);

这个想法很简单 - 从零到全长动画笔画的dasharray。我希望这可以成为一个干净的解决方案的一个很好的步骤

Snap SVG - 动画路径元素

1 个答案: