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

Question

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

当我尝试使用此示例绘制虚线时 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, 0, 0, 1, 20, 20 L 900 208 a 20, 20, 0, 0, 1, -20, 20 L 20 228 a 20, 20, 0, 0, 1, -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

Answer 1

要为虚线制作动画，有一种作弊方法，如您所说，为虚线之上的线制作动画。

虽然稍微复杂一点，但更好的方法是使用面具。您用匹配的线遮盖了虚线，然后为遮罩中的路径设置动画。

演示

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, 0, 0, 1, 20, 20 L 900 208 a 20, 20, 0, 0, 1, -20, 20 L 20 228 a 20, 20, 0, 0, 1, -20, -20 L 0 15"
              fill="none" stroke="white" stroke-width="3" />
      </mask>
    </defs>
    <path d="M20 0 L 880 0 a 20, 20, 0, 0, 1, 20, 20 L 900 208 a 20, 20, 0, 0, 1, -20, 20 L 20 228 a 20, 20, 0, 0, 1, -20, -20 L 0 15"
          fill="none" stroke="black" stroke-width="1.6" stroke-dasharray="5" mask="url(#anim-mask)"/>
  </svg>
</div>

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

How to draw a dashed svg path using anime.js?

css

animation

svg

anime.js