如何解决Scrollmagic DrawSVG线变为虚线?输出错误的线长和笔划破折号?
我正在使用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,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不起作用吗?还是为什么要输出虚线而不是图形动画?谢谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。