Как сделать несколько анимаций на одной странице с помощью Lazy Line Painter - PullRequest
1 голос
/ 15 октября 2019

Я делаю карту, куда я хочу поместить svgs с этим эффектом рисования. Я нашел очень хороший инструмент, который делает это для меня, я загружаю любой svg из интернета, и он дает эффект для меня и дает мне код для использования на моей странице.

Он отлично работает, но когда я ставлюболее одного svg на странице, первый перестает работать. Это работает, только если я использую только одну SVG.

Я делаю что-то не так? Есть ли инструмент, который также делает это?

Обратите внимание, что на первой карте svg больше нет.

example

https://pastebin.com/DhR8kfGU

   <div class="card  d-xl-flex text-center d-flex justify-content-center align-items-center">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="casa" x="0px" y="0px" viewBox="0 0 58.365 58.365" style="enable-background:new 0 0 58.365 58.365;" xml:space="preserve" width="512px" height="512px" class="lazy-line-painter" data-llp-composed="true">
        <g>
            <path d="M57.863,26.632L29.182,0L0.502,26.632c-0.404,0.376-0.428,1.009-0.052,1.414c0.374,0.404,1.009,0.427,1.413,0.052  l3.319-3.082v33.349h16h16h16V25.015l3.319,3.082c0.192,0.179,0.437,0.267,0.681,0.267c0.269,0,0.536-0.107,0.732-0.319  C58.291,27.641,58.267,27.008,57.863,26.632z M23.182,56.365v-16c0-3.309,2.691-6,6-6s6,2.691,6,6v16H23.182z M51.182,56.365h-14  v-16c0-4.411-3.589-8-8-8s-8,3.589-8,8v16h-14V23.158l22-20.429l22,20.429V56.365z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="casa-0" data-llp-duration="2000" data-llp-delay="0" fill-opacity="0" style="" />
        </g>
    </svg>
    <p class="text-center d-flex flex-column m-xl-3 title">

        Residencial
    </p>
    <p class="card-information">Gás para sua casa</p>
    <p class="m-1 card-information">P 13</p>
    <p class=" card-information">P 45</p>
    <a href="#">Saiba mais</a>

</div>

<div class="card  d-xl-flex text-center d-flex justify-content-center align-items-center">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="tent" x="0px" y="0px" viewBox="0 0 483.32 483.32" style="enable-background:new 0 0 483.32 483.32;" xml:space="preserve" width="512px" height="512px" class="lazy-line-painter" data-llp-composed="true">
        <g>
            <g>
                <g>
                    <rect x="341.664" y="465.66" width="16" height="16" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-0" data-llp-duration="890" data-llp-delay="0" fill-opacity="0" style="" />
                </g>
            </g>
            <g>
                <g>
                    <rect x="313.674" y="338.617" transform="matrix(0.8805 -0.4741 0.4741 0.8805 -150.0898 200.0408)" width="16" height="118.12" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-1" data-llp-duration="890" data-llp-delay="890" fill-opacity="0" style="" />
                </g>
            </g>
            <g>
                <g>
                    <path d="M96.008,231.316l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312l-48-48l-0.056,0.056    c-2.961-3.123-7.892-3.255-11.016-0.294c-0.085,0.08-0.167,0.162-0.248,0.246l-48,48l11.312,11.312l34.352-34.352v25.376    L0.008,220.004l11.312,11.312l34.344-34.344v25.376L0.008,268.004l11.312,11.312l34.344-34.344v25.376L0.008,316.004    l11.312,11.312l34.344-34.344V481.66h16V292.972l34.344,34.344l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312    l-45.656-45.656v-25.376L96.008,231.316z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-2" data-llp-duration="890" data-llp-delay="1780" fill-opacity="0" style="" />
                </g>
            </g>
            <g>
                <g>
                    <path d="M472.008,263.316l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312l-48-48l-0.056,0.056    c-2.961-3.123-7.893-3.255-11.016-0.294c-0.085,0.08-0.167,0.162-0.248,0.246l-48,48l11.312,11.312l34.352-34.352v25.376    l-45.656,45.656l11.312,11.312l34.344-34.344v25.376l-45.656,45.656l11.312,11.312l34.344-34.344v76.688l-16.8-35.416    c-1.316-2.788-4.117-4.571-7.2-4.584h-104v-60.688l34.344,34.344l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344    l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312l-48-48    l-0.056,0.056c-2.961-3.123-7.893-3.255-11.016-0.294c-0.085,0.08-0.167,0.162-0.248,0.246l-48,48l11.312,11.312l34.352-34.352    v25.376l-45.656,45.656l11.312,11.312l34.344-34.344v25.376l-45.656,45.656l11.312,11.312l34.344-34.344v25.376l-45.656,45.656    l11.312,11.312l34.344-34.344v60.688h-112c-2.257,0.013-4.4,0.992-5.888,2.688c-0.473,0.473-0.874,1.012-1.192,1.6l-80,152    c-2.05,3.914-0.539,8.749,3.375,10.799c1.143,0.599,2.415,0.912,3.705,0.913h240v-16h-75.2l-71.552-136H392.6l64.424,136h-83.36    v16h96c4.418-0.017,7.986-3.612,7.97-8.03c-0.004-1.174-0.267-2.333-0.77-3.394l-39.2-82.808V276.972l34.344,34.344l11.312-11.312    l-45.656-45.656v-25.376L472.008,263.316z M157.664,465.66H98.912l58.752-111.624V465.66z M232.416,465.66h-58.752V354.036    L232.416,465.66z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-3" data-llp-duration="890" data-llp-delay="2670" fill-opacity="0" style="" />
                </g>
            </g>
            <g>
                <g>
                    <path d="M153.664,1.66c-4.418,0.001-7.999,3.583-7.998,8.002c0,2.121,0.843,4.154,2.342,5.654    c8.262,7.425,13.601,17.556,15.056,28.568c1.516,13.506-8.203,25.684-21.709,27.2c-1.825,0.205-3.667,0.205-5.491,0l0.024-0.024    c-11.012-1.455-21.143-6.794-28.568-15.056c-3.125-3.124-8.19-3.123-11.314,0.002c-1.499,1.5-2.342,3.534-2.342,5.654    c0,33.137,26.863,60,60,60s60-26.863,60-60S186.801,1.66,153.664,1.66z M193.287,80.838    c-10.592,21.871-36.908,31.015-58.778,20.423c-8.904-4.312-16.095-11.499-20.412-20.401c6.371,3.432,13.381,5.515,20.592,6.12    c12.063,1.097,23.998-3.169,32.632-11.664c13.512-14.532,15.773-36.253,5.544-53.256    C194.735,32.652,203.878,58.968,193.287,80.838z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-4" data-llp-duration="890" data-llp-delay="3560" fill-opacity="0" style="" />
                </g>
            </g>
        </g>
    </svg>
    <p class="text-center m-xl-3 title">
        outdoor
    </p>
    <p class="">Lorem Ipsum.</p>
    <p class="m-1 card-information"></p>
    <p class="card-information">P 2</p>
    <a href="#">Saiba mais</a>

</div>

<script type="text/javascript">
    (function() {

        document.onreadystatechange = () => {

            if (document.readyState === 'complete') {

                /**
                 * Setup your Lazy Line element.
                 * see README file for more settings
                 */

                let el = document.querySelector('#tent');
                let myAnimation = new LazyLinePainter(el, {
                    "ease": "easeLinear",
                    "strokeWidth": 4,
                    "strokeOpacity": 1,
                    "strokeColor": "004d88",
                    "strokeCap": "square"
                });
                myAnimation.paint();

            }
        }

    })();

    // svg prepared using Lazy Line Composer
    // http://lazylinepainter.info/#composer

    let wrap = document.querySelector("#tent");
    let el = document.querySelector("#tent");

    let myAnimation = new LazyLinePainter(el, {
        ease: "easeInOutQuad"
    });

    // Timeline Events

    myAnimation.on("start", event => {
        wrap.classList.remove("tl-complete");
    });

    myAnimation.on("complete", event => {
        wrap.classList.add("tl-complete");
    });

    // Path Events

    myAnimation.on("start:llpface-0", event => {
        event.el.classList.remove("path-complete");
    });

    myAnimation.on("complete:llpface-0", event => {
        event.el.classList.add("path-complete");
    });

    el.addEventListener("click", paint, false);

    function paint() {
        myAnimation.paint();
    }

    paint();
</script>

<script type="text/javascript">
    (function() {

        document.onreadystatechange = () => {

            if (document.readyState === 'complete') {

                /**
                 * Setup your Lazy Line element.
                 * see README file for more settings
                 */

                let el = document.querySelector('#casa');
                let myAnimation = new LazyLinePainter(el, {
                    "ease": "easeLinear",
                    "strokeWidth": 1,
                    "strokeOpacity": 1,
                    "strokeColor": "004d88",
                    "strokeCap": "square"
                });
                myAnimation.paint();
            }
        }

    })();

    // svg prepared using Lazy Line Composer
    // http://lazylinepainter.info/#composer

    let wrap = document.querySelector("#casa");
    let el = document.querySelector("#casa");

    let myAnimation = new LazyLinePainter(el, {
        ease: "easeInOutQuad"
    });

    // Timeline Events

    myAnimation.on("start", event => {
        wrap.classList.remove("tl-complete");
    });

    myAnimation.on("complete", event => {
        wrap.classList.add("tl-complete");
    });

    // Path Events

    myAnimation.on("start:llpface-0", event => {
        event.el.classList.remove("path-complete");
    });

    myAnimation.on("complete:llpface-0", event => {
        event.el.classList.add("path-complete");
    });

    el.addEventListener("click", paint, false);

    function paint() {
        myAnimation.paint();
    }

    paint();
</script>

http://lazylinepainter.info/

...