html - 虚线 SVG 动画

Question

我对使用 SVG 动画比较陌生，所以如果有一个简单的答案，我提前道歉。通过结合使用 Scrollmajic.js 和 GASP，我能够在用户滚动到特定位置时让 SVG 动画化。我遇到的问题是动画将它从虚线转换为实线。我做了一些研究，发现使用面具是实现这一目标的最佳方法，尽管我对如何使用这种方法有点迷茫。

https://codepen.io/ncanarelli/pen/wvaeLNa

js：

$(document).ready(function() {
    function pathPrepare ($el) {
        var lineLength = $el[0].getTotalLength();
        $el.css("stroke-dasharray", lineLength);
        $el.css("stroke-dashoffset", lineLength);
    }

    // init controller
    var controller = new ScrollMagic.Controller();

    // loop through all elements
    $(".svg-animation").each(function() {

        var $thePath = $(this).find("path#thePath");

        // prepare SVG
        pathPrepare($thePath);

        // build tween
        var tween = new TimelineMax()
            .add(TweenMax.to($thePath, 1, {
                strokeDashoffset: 0, 
                ease:Linear.easeNone
            }))

        // build scene
        var scene = new ScrollMagic.Scene({
            triggerElement: $(this)[0],
            duration: 200, 
            tweenChanges: true,
            reverse: true
        })
        .setTween(tween)
        .addTo(controller)
        .addIndicators();
    });
});

更新：更新 .js 以反映 .each 循环 + 其他修改。仍然有实施面具的问题。

标签： htmlcsssvgjquery-animatescrollmagic