SVG路径绘制动画-用anime.js绘制线条，如何防止线条重叠

Question

我使用 anime.js 绘制了以下 SVG 线条图，但由于某些原因，线条在动画过程中似乎重叠。我尝试了所有设置，包括删除 loop、更改 direction 等等，但我所做的任何更改似乎都对此没有影响。根据文档，strokeDashoffset 参数是此类动画的设置，但我找不到与此相关的其他文档。

会不会是 SVG 本身？

https://codepen.io/lol4000/pen/VwzpBVL

代码如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>A Basic HTML5 Template</title>
<style>
body { 
background-color:black
}
.svg_container { 
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%; 
  max-width:464.145px;
    vertical-align: right; 
    overflow: hidden; 
}
#demo_svg { 
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
}

  
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script>
window.onload = function() {
    anime({
      targets: '#demo_svg path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'linear',
  duration: 5000,
  delay: anime.stagger(100),
  direction: 'alternate',
  loop: true
    });
}
</script>
</head>

<body>


<div class="svg-container">
<svg id="demo_svg" preserveAspectRatio="xMinYMin meet" width="464.145" height="880.76" viewBox="0 0 464.145 880.76">
  <g id="Groupe_2" data-name="Groupe 2" transform="translate(-1456.318 -9.18)">
  <path id="Tracé_559" stroke="#ffffff" fill="none" stroke-width="1" data-name="Tracé 559" d="M17388.053,2171.939h-1v-42.691l.24-.146,108.744-66.334-108.984-66.207V1865.485l.24-.146,105.926-64.153V1291.18h1v510.569l-.24.146-105.926,64.153V1996l109.906,66.768-109.906,67.043Z" transform="translate(-15604 -1282)"/>
    <path id="Tracé_560" stroke="#ffffff" fill="none" stroke-width="1" data-name="Tracé 560" d="M17523.959,1819.568l-30.465-17.819.5-.863,30.465,17.819Z" transform="translate(-15604 -1282)" />
    <path id="Tracé_561" stroke="#ffffff" fill="none"  stroke-width="1" data-name="Tracé 561" d="M17523.74,2079.5,17496,2062.711l.705-.428,27.031-16.359.52.855-26.326,15.932,26.326,15.932Z" transform="translate(-15604 -1282)"/>
    <path id="Tracé_562" stroke="#ffffff" fill="none"  stroke-width="1" data-name="Tracé 562" d="M17387.3,2129.958l-109.549-65.217.691-.435,108.832-68.449.531.846-108.141,68.014,108.146,64.381Z" transform="translate(-15604 -1282)"/>
    <path id="Tracé_563" stroke="#ffffff" fill="none"  stroke-width="1" data-name="Tracé 563" d="M17171.338,2130.1l-.258-.153-110.762-65.927v-131.3l.242-.146,218.141-130.829.256.149,109,63.556-.5.864-108.748-63.407-217.391,130.379v130.166l110.016,65.482,107.113-64.567.516.856Z" transform="translate(-15604 -1282)"/>
    <path id="Tracé_564" stroke="#ffffff" fill="none"  stroke-width="1" data-name="Tracé 564" d="M17278.451,2064.991l-111.012-65.538v-130.82h1v130.25l110.52,65.247Z" transform="translate(-15604 -1282)"/>
  </g>
</svg>
</div>

  
</body>
</html>

Answer 1

你的js没有问题，问题是svg。

我在 illustrator 中打开了你的 SVG，正如你从放大的屏幕截图中看到的那样，每条路径实际上都是一条非常细的闭合路径，所以动漫“正确地”在每条路径的外部绘制！

SVG路径绘制动画-用anime.js绘制线条，如何防止线条重叠

SVG path drawing animation - line drawing with anime.js, how to stop lines from overlapping

javascript

animation

svg

line-drawing

anime.js