问题描述
我正在使用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 (将#修改为@)