Пунктирная линия SVG анимация - PullRequest
Новая
       36

Пунктирная линия SVG анимация

1 голос
/ 02 марта 2020

Я новичок в работе с SVG-анимацией, поэтому заранее прошу прощения, если есть прямой ответ на этот вопрос. Благодаря комбинации использования Scrollmaji c. js и G ASP я смог настроить SVG для анимации, когда пользователь прокручивает до указанной позиции c. Проблема, с которой я сталкиваюсь, заключается в том, что анимация преобразует ее из пунктирной линии в штрих solid. Я провел некоторое исследование и обнаружил, что использование маски было бы лучшим способом для достижения этого sh, хотя я немного растерялся, как приблизиться к этому методу.

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 l oop + другие модификации. По-прежнему возникают проблемы с реализацией маски.

...