javascript - 使用 vanillaJS 无限绘制/取消绘制 SVG 路径循环

Question

我想在每次上一个路径中的动画结束时向svg路径添加一个类并删除一个类，以实现一遍又一遍的平滑绘制/取消绘制效果。

我的 fiddle 说明了我的意思，但我只是在听动画结束，然后取消绘制路径。我不确定无限循环的最佳方法是什么。当前 fiddle 绘制和取消绘制一次(删除 .patha 并添加 .pathb)，但不会在下一个动画结束时触发。

为了获得流畅的连续动画，我需要像这样交替 add(.pathb)>>remove(.patha)>>add(.pathc)>>remove(.pathb)>>add(.pathd)>>删除(.pathc)>>添加(.patha)>>删除(.pathd)

我正在考虑使用 % 运算符的 for 循环，但这似乎不是最佳选择。现在，我什至无法在每次动画结束时触发动画结束，只能触发一次。

https://jsfiddle.net/jr7ocbzq/4/相关的 JS 片段:

svgpath.addEventListener("animationend", function(event) {
  document.getElementById("path").classList.add('pathb');
  document.getElementById("path").classList.remove('patha');
  i++;
  console.log(i);
}, false);

为了清晰起见，尝试从具有类 patha 的元素切换到 pathb，然后是 pathc，然后是 pathd，以该顺序无休止地切换。我找到的所有潜在解决方案都是 jQuery，而不是 vanillaJS。需要在每个动画结束时触发一个 onEvent，所以一个连续的是行不通的。

Answer 1

听起来你需要一个包含这 4 个类名的数组，然后你可以循环遍历它们:

const svgpath = document.getElementById("path");
const paths = ['patha', 'pathb', 'pathc', 'pathd'];
let i = 0;
svgpath.addEventListener("animationend", () => {
  svgpath.classList.remove(paths[i]);
  i = (i + 1) % 4;
  svgpath.classList.add(paths[i]);
}, false);

.patha {
  stroke-dasharray: 13672.7;
  stroke-dashoffset: -13672.7;
  animation: dashZero 1s linear forwards;
}

.pathb {
  stroke-dasharray: 13672.7;
  stroke-dashoffset: 0;
  animation: dashDrawn 1s linear forwards;
}

.pathc {
  stroke-dasharray: 13672.7;
  stroke-dashoffset: 13672.7;
  animation: dashZero 1s linear forwards;
}

.pathd {
  stroke-dasharray: 13672.7;
  stroke-dashoffset: 0;
  animation: dashUndrawn 1s linear forwards;
}

@keyframes dashZero {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes dashDrawn {
  to {
    stroke-dashoffset: 13672.7;
  }
}

@keyframes dashUndrawn {
  to {
    stroke-dashoffset: -13672.7;
  }
}

<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="200px" viewBox="0 0 3027.621 4035.496" enable-background="new 0 0 150 200" xml:space="preserve">
      <path id="path" class="patha" fill="none" stroke="#000000" stroke-width="16" stroke-miterlimit="10" d="M413.078,1768.305
        c-24.633,50.051-0.718,112.339,6.712,163.942c9.629,66.869,23.438,133.097,36.056,199.496
        c22.431,118.04,30.003,240.334,26.476,359.948c-3.251,110.267,14.797,239.577,71.273,335.987
        c14.709,25.109,29.367,50.25,43.714,75.568c9.666,19.331,28.359,31.145,41,48c14.109,20.522,29.366,40.521,48,57.186
        c23.089,20.648,51.639,30.456,74.625,51.064c20.852,18.695,45.92,32.317,66.834,51.288c17.762,16.109,30.969,35.89,47.541,52.462
        c43.407,43.407,74.809,98.79,127.394,133.067c44.3,28.876,85.672,49.923,138.364,58.69c69.464,11.559,124.444,2.54,191.202-16.422
        c104.527-29.689,201.769-76.793,289.516-139.937c42.764-30.773,77.666-72.729,122.62-99.768
        c50.301-30.254,105.492-64.867,159.904-86.632c92.434-39.106,181.063-100.788,251.25-171.875
        c31.896-32.304,66.448-72.631,77.125-117.75c11.867-50.149,19.56-98.736,21.625-150.375c0-54.127,4.634-111.463,6.963-166.259
        c2.441-57.438,3.972-113.243,13.297-170c7.623-46.402,20.744-87.695,56.294-120.587c31.39-29.043,76.555-65.571,94.946-104.654
        c8.934-18.985,24.678-32.756,32.98-52.139c11.043-25.779,11.248-54.254,13.289-81.738c1.946-26.211-1.156-52.432,0.675-78.882
        c1.963-28.351,9.619-56.153,9.431-84.616c-0.293-44.235-21.954-87.451-44.875-124.125c-43.331-54.164-91.033-2.819-125,36
        c-50.949,62.271-118.999,159.005-109.5,244.5c2.411,21.704-8.296,32.208-18.25,50.25c-12.092,21.917-19.175,43.347-21.25,68.25
        c-4.311,30.171-0.273,59.368,2.68,89.448c1.227,12.493,4.32,27.231,4.32,39.552c0,6.844-5.353,12.754-3.578,8.601
        c2.911-1.966,3.771-0.833,2.578,3.399c-47.409-37.928-40.657-126.818-47.125-180c-2.167-17.817-4.29-71.508-22.5-81.625
        c-14.396-7.998-15.077,62.01-14.344,67.875c4.491,35.93-16.116-1.506-21.92-14.324c-13.666-30.178-17.265-64.605-24.111-96.822
        c-13.661-64.283-29.435-126.601-46-190.104c-8.623-25.868-28.964-49.228-44.814-70.852c-19.866-27.101-35.539-56.868-54.958-84.279
        c-36.979-52.197-70.151-98.792-115.228-143.869c-20.548-20.547-43.361-38.965-70.75-49.125
        c-39.084-14.499-27.718,21.271-24.408,45.627c9.404,69.213,83.619,85.898,110.945,140.058c-0.539-1.26-0.539-1.26,0,0
        c-1.549-1.119-2.694-2.546-3.437-4.28c1.728,0.956,2.873,2.382,3.437,4.28c-33.145-29.063-68.993-52.085-104.443-77.779
        c-32.626-23.646-76.713-40.15-105.344-68.781c-39.09-19.545-76.505-50.088-110-78c-18.519-16.835-36.408-32.652-51.625-52.5
        c-12.863-16.777-26.937-41.062-41.375-55.5c-29.586-29.586-45.693-72.107-77-99.5c-33.206-29.055-72.169-45.084-111-64.5
        c-8.22-5.48-20.368-4.095-29-11c-20.746-10.373-3.499,43.453-1.75,48c8.116,21.102,20.279,41.774,29.222,62.936
        c2.116,5.007,34.684,48.175,34.778,47.939c-1.561,3.903-68.28-71.214-78.242-77.869c-36.59-24.448-84.849-50.89-101.447-94.749
        c-15.672-41.412,19.921-103.632,37.257-140.601c12.106-25.815,19.211-54.101,35.163-78.042c16.457-24.699,38.841-44.255,59.1-65.657
        c-22.636-21.361-105.591,48.52-120.634,64.608c-43.661,46.697-67.815,102.46-93.739,159.881
        C911.3,1007.47,759.609,995.49,673.057,1077.379c-43.074,40.753-77.728,111.422-80.61,170.498
        c-1.651,33.851-10.257,65.288-8.369,99.569c1.971,35.768-3.779,67.888-13.952,102.104c-19.856,66.789-41.101,122.66-77.932,181.85
        c-17.076,27.443-28.568,57.338-43.268,85.993c-15.072,29.38-36.854,41.532-43.636,76.335
        c-5.878-80.343-32.141-157.622-35.634-238.854c-3.732-86.805,28.114-152.401,50.771-233.371
        c22.175-79.244,68.332-142.288,73.671-227.543c2.401-38.335,13.992-73.532,26.493-109.548c15-43.214,17.744-79.896,44.428-119.309
        c45.189-66.744,99.946-120.074,166.354-165.686c32.482-22.311,67.216-37.679,100.899-57.378
        c36.212-21.179,68.07-47.756,106.292-66.032c73.732-35.256,152.973-39.133,233.839-46.663c22.458-2.091,57.163-15.8,79.567-9.993
        c9.649,2.501-16.527,53.048-15.829,66.824c-0.201-3.983,147.514-32.421,157.959-33.811c52.149-6.94,103.896-17.357,156.799-13.956
        c52.464,3.374,86.372,50.615,122.926,81.772c36.808,31.374,63.902,78.269,103.809,104.334
        c41.339,27.001,96.697,43.496,144.006,56.327c48.201,13.074,97.097,29.991,140.361,54.841
        c49.342,28.342,106.265,43.365,157.159,69.197c49.727,25.238,86.129,50.654,108.619,103.171
        c10.992,25.668,27.36,46.758,36.442,73.71c9.544,28.323,15.726,57.79,17.251,87.674c0.828,16.208-4.857,38.451,4.994,52.745
        c11.554,16.763,25.008,31.074,41.293,43.17c12.156,9.029,18.786,31.155,30.554,42.878c16.379,16.319,27.618,31.697,37.166,52.68
        c40.238,88.449,68.993,190.7,49.853,289.211c-9.129,46.981-20.9,94.993-32.856,141.342c-7.486,29.021-21.176,53.734-31.518,81.433
        c-9.207,24.645-12.56,50.123-17.314,76.016"/>
      </svg>