Question

我正在使用Scrollmagic创建滚动svg线动画，但是，该动画不适用于某些svg。该行将变为虚线，并且虚线会稍微移动（而不是在滚动时“绘制” svg）（附加gif屏幕截图）。我正在使用DrawSVG函数创建此动画。

我认为问题出在代码的“获取总行长”和“路径准备”部分（输出错误的stroke-dashoffset和stroke-dasharray），但我不知道如何解决此部分代码。

gif of animation that IS NOT working
gif of animation that IS working (what I want the animation to do)

下面是DrawSVG函数

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

    function drawSvg(pathId, triggerElem, speed){
        var $pathLine = $(pathId);
        
    if($pathLine){
        // prepare SVG
        pathPrepare($pathLine);
        

        // init controller
        const controller = new ScrollMagic.Controller();
        // build tween
        const tween = new TimelineMax().add(TweenMax.to($pathLine, 1, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw $pathLine for 0.9
        // build scene
        const scene = new ScrollMagic.Scene({triggerElement: triggerElem, duration: speed, tweenChanges: true})
                    .setTween(tween)
                    //.addIndicators() // show indicators (uncomment dependecy)
                    .addTo(controller);
    }
 }
     
     drawSvg('.line-draw', '.trigger', 500); // <- This line animation WORKS
     drawSvg('.line-draw-3', '.newtrig', 500); // <- This line animation DOESN'T WORK

这是svg线动画的html结构

<div class="newtrig" style="min-height:1px;"></div>
    <div class="interaction">    
    <h2 class="catdesc">Building <span class="svg_pos">interaction
        <span class="svg8">
            <div class="drawing">
               <svg id="Layer_1" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 225.22 49.48">
<path id="path1" class="line-draw-3" d="M219.13,19.65C181.92,1.7,139,1.05,97.72.75,71.16.56,44,.46,18.92,9.22,9.68,12.45-.68,19.49.72,29.18c1.46,10.07,14,13.59,24.12,14.68A859.79,859.79,0,0,0,156.56,48c14.95-.68,30.33-1.87,43.75-8.48s24.58-20,24.28-34.91"  stroke=black stroke-width="2" stroke-linecap="round"/></svg>  
            </div>
        </span></span>
  </h2>
 </div>

有人知道为什么此功能可能对某些svgs有效而对其他svgs不起作用吗？还是为什么要输出虚线而不是图形动画？谢谢！

Scrollmagic DrawSVG线变为虚线？输出错误的线长和笔划破折号？

0 个答案: