如何使用anime.js绘制虚线svg路径？

编程问答 2022-04-21

问题描述

我知道使用与第一条路径重叠的第二条路径的方法，但这种方法对我不起作用，因为渐变用于背景。

当我尝试使用此示例 https://animejs.com/documentation/#lineDrawing 绘制虚线时，没有任何效果，有什么方法可以解决此问题？

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <Meta charset="UTF-8">
  <Meta http-equiv="X-UA-Compatible" content="IE=edge">
  <Meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
  <div>
    <svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 900 228' preserveAspectRatio='none'><path d='M20 0 L 880 0 a 20,20,1,20 L 900 208 a 20,-20,20 L 20 228 a 20,-20 L 0 15' fill='none' stroke='black' stroke-width='1.6' stroke-dasharray='5' /></svg>"
  </div>
</body>
</html>

CSS：

body {
  background-color: white;
}
div {
  width: 900px;
  height: 228px;
}

JS：

anime({
  targets: 'path',strokeDashoffset: [anime.setDashoffset,0],easing: 'easeInOutSine',duration: 3000,direction: 'alternate',loop: true
});

anime.js 示例：https://codepen.io/n4ks/pen/vYXxboa

在这两种情况下，行为都不是预期的。我需要从A点到B点（从头到尾）画一条虚线

解决方案

如果有人遇到同样的问题，我将把这个演示留在这里，非常感谢 Paul LeBeau 的帮助：https://codepen.io/n4ks/pen/ExmVxzY

解决方法

要为虚线设置动画，有一种作弊方法，即如您所说的那样，为它上面的一条线设置动画。

更好的方法是使用掩码，虽然稍微复杂一些。您用匹配的线遮罩虚线，然后为遮罩中的路径设置动画。

演示

anime({
  targets: '#mask-path',strokeDashoffset: [anime.setDashoffset,0],easing: 'easeInOutSine',duration: 3000,direction: 'alternate',loop: true
});
body {
  min-height: 500px;
  background: linear-gradient(135deg,linen,aqua);
}

div {
  width: 900px;
  height: 228px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<div>
  <svg width='100%' height='100%' viewBox='0 0 900 228' preserveAspectRatio='none'>
    <defs>
      <mask id="anim-mask">
        <path id="mask-path"
              d="M20 0 L 880 0 a 20,20,1,20 L 900 208 a 20,-20,20 L 20 228 a 20,-20 L 0 15"
              fill="none" stroke="white" stroke-width="3" />
      </mask>
    </defs>
    <path d="M20 0 L 880 0 a 20,-20 L 0 15"
          fill="none" stroke="black" stroke-width="1.6" stroke-dasharray="5" mask="url(#anim-mask)"/>
  </svg>
</div>

animationanimationanimationanime.jssvgsvgsvg