Greensock GSAP + SVG 路径动画 + Scroller答案

【问题标题】：Greensock GSAP + SVG Path animations + ScrollerGreensock GSAP + SVG 路径动画 + Scroller
【发布时间】：2014-06-25 18:55:21
【问题描述】：

我现在正在学习 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 的精彩网站大肆宣传，在那里我看到他们将 CreateJS 与 GSAP 一起使用，但我无法弄清楚绘图究竟是如何发生的。

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

任何关于如何使用滚动绘制 SVG 或 Canvas 的指针将不胜感激！此外，还有关于如何改进上述内容的任何想法！我相信美丽的心灵！

【问题讨论】：

标签： javascript svg scroll gsap

【解决方案1】：

您可以为stroke-dash-offset 和stroke-dasharray 属性设置动画。有一个关于如何做到这一点的教程here。我还找到了另一个关于同一主题的here。

【讨论】：