Question

我现在正在学习JS动画方法，我编写了这个小代码，通过使用GSAP库中的TimelineLite（）和staggerTo（）来顺序绘制和填充SVG路径。

$('#svg path').each(function() {
          var path = $(this)[0];
          preparepath(path);
});

function preparepath(path) {
    var pathlength = path.getTotalLength();
    path.style.strokeDasharray = pathlength + ' ' + pathlength;
    path.style.strokeDashoffset = pathlength;
    path.style.fill = "#fff";
}

var paths = $('#svg path');
var tl = new TimelineLite();
tl.staggerTo(paths, 0.5,  {strokeDashoffset:"0"}, 0.3).staggerTo(paths, 0.5,  {fill:"#000"}, 0.2);

现在，我要解决的问题是如何在向下滚动窗口时绘制SVG路径。我被Bright Media http://brightmedia.pl的精彩网站大肆宣传，我看到他们正在和GSAP一起使用CreateJS，但我无法弄清楚绘图是如何发生的。

使用Skrollr插件有一个解决方案，但我想尝试使用GSAP。

有关如何使用滚动绘制SVG或Canvas的任何指示都将受到高度赞赏！另外，关于如何改进上述内容的任何想法！我相信美丽的头脑！

Answer 1

您可以为stroke-dash-offset和stroke-dasharray属性设置动画。有关如何执行此操作的教程here。我还在同一主题上发现了另一个here。

Greensock GSAP + SVG路径动画+滚动

1 个答案: