0

我正在尝试在滚动上为 SVG 设置动画，我已经使用数学创建了我自己的 SVG 路径，它显示为我所需要的，但是当我尝试使用 CSS 对路径添加效果时问题就开始了stroke-dasharray

我的问题是：动画从两个点开始，一个从开始，另一个在 q 命令之后，只要我使用了两次 move 命令，一个在开始处，一个在 q 曲线命令之后。

我试图一直解决这个问题，但它完全改变了绘制的 SVG。

这是一个片段来解释它如何与我一起工作，

const shape = document.querySelector('#shape');
window.addEventListener('scroll', slide);
function slide() {
     let value = 2000 - scrollY*4; 
shape.style.strokeDashoffset=  value;
}
body {
    background:black;
    -webkit-user-select:none;
}
#svgdiv {
position:fixed;
margin:auto;
top:1rem;
width:95%;
}
#div1 {
height:30rem;
}
#shape {
  stroke-dashoffset:2000;
  stroke-dasharray: 2000;
}
#shapebg {
  stroke-dashoffset:2000;
  stroke-dasharray: 0;
}
#div2 {
height:19rem;
}
<div id="div1"></div>
<div id="svgdiv">
<svg viewBox="0 0 1080 500">
  <path id="shape" d="M 0 0 10 0  10 0 10 50 10 50 40 50 40 50 40 120 40 120 235 120 235 120 235 50 235 50 q 450 -20 290 130 M 525 180 595 220 595 220 605 300 605 300 675 250 675 250 725 320 725 320 765 255 765 255 835 260 835 260 810 200 810 200 890 70 890 70 1050 130 1050 130 1040 260 1040 260 880 270 880 270 1079 300" stroke="purple" stroke-width="1.5" fill="none" />
 
  <path id="shapebg" d="M 0 0 10 0  10 0 10 50 10 50 40 50 40 50 40 120 40 120 235 120 235 120 235 50 235 50 q 450 -20 290 130 M 525  180 595 220 595 220 605 300 605 300 675 250 675 250 725 320 725 320 765 255 765 255 835 260 835 260 810 200 810 200 890 70 890 70 1050 130 1050 130 1040 260 1040 260 880 270 880 270 1079 300" stroke="purple" stroke-width="0.6" fill="none" />

</svg>
</div>

<div id="div2">
</div>

如您所见，它从两点开始，但我需要动画从头开始并直接结束，

请问有什么提示吗？

4

1 回答 1

3

我对您的代码做了一些更改；

  1. 我已经删除了中间的命令移动以获得连续路径：M 525 180 595 220成为L595 220. 由于在 M 之后没有任何命令字母，因此默认情况下接下来的所有内容都是行 L

  2. 你的路径的总长度是 2223 而不是 2000。我已经改变了它everywere。要知道路径的长度，您需要使用getTotalLength()方法。

  3. 你滚动不够。在您的代码中let value = 2000 - scrollY*4;，但#div1 { height:30rem;}由于在这种情况下为 1rem = 16px，30rem = 16*30 = 480。由于您需要滚动 2223，因此您需要使用let value = 2000 - scrollY*4.631;(2223/480 = 4.631)

观察：我已经四舍五入了，你可以使用不四舍五入的数字

const shape = document.querySelector('#shape');
window.addEventListener('scroll', slide);
function slide() {
     let value = 2223 - scrollY*4.631; 
shape.style.strokeDashoffset=  value;
}

//console.log(shape.getTotalLength())
body {
    background:black;
    -webkit-user-select:none;
}
#svgdiv {
position:fixed;
margin:auto;
top:1rem;
width:95%;
}
#div1 {
height:30rem;
}
#shape {
  stroke-dashoffset:2223;
  stroke-dasharray: 2223;
}

#div2 {
height:19rem;
}
<div id="div1"></div>
<div id="svgdiv">
<svg viewBox="0 0 1080 500">
  <path id="shape" d="M0,0L10,0L10,0L10,50L10,50L40,50L40,50L40,120L40,120L235,120L235,120L235,50L235,50Q685,30,525,180L 595 220 595 220 605 300 605 300 675 250 675 250 725 320 725 320 765 255 765 255 835 260 835 260 810 200 810 200 890 70 890 70 1050 130 1050 130 1040 260 1040 260 880 270 880 270 1079 300" stroke="purple" stroke-width="2.5" fill="none" />
 
  <path id="shapebg"  d="M0,0L10,0L10,0L10,50L10,50L40,50L40,50L40,120L40,120L235,120L235,120L235,50L235,50Q685,30,525,180L 595 220 595 220 605 300 605 300 675 250 675 250 725 320 725 320 765 255 765 255 835 260 835 260 810 200 810 200 890 70 890 70 1050 130 1050 130 1040 260 1040 260 880 270 880 270 1079 300" stroke="purple" stroke-width="1.5" fill="none" />

</svg>
</div>

<div id="div2">
</div>

于 2021-02-20T20:19:06.863 回答