如何遍历路径元素并依次逐个执行路径动画？

我明白你现在的困扰啦——你写的代码里所有路径动画会同时触发，没法实现逐个依次播放的效果对吧？这是因为for循环是同步执行的，浏览器会一次性把所有路径的样式更新批量渲染出来，所以看起来就像是一起动了。下面给你两种实用的解决方案：

方法一：用延迟定时器按顺序触发 #

这种方法适合你已经知道单个动画时长的情况，通过给每个路径设置递增的延迟时间，让它们依次启动动画：

(function () {
  var button = document.querySelector('.animate');
  button.onclick = function (event) {
    var paths = document.querySelectorAll('path');
    // 单个动画的时长，单位毫秒，根据你的需求调整
    const singleAnimDuration = 1000;

    paths.forEach(function(path, index) {
      setTimeout(function() {
        var length = path.getTotalLength();
        // 清除之前可能存在的过渡效果
        path.style.transition = path.style.WebkitTransition = 'none';
        // 设置路径的虚线数组，让整个路径变成一段虚线
        path.style.strokeDasharray = `${length} ${length}`;
        // 初始偏移量设为路径总长，让路径完全隐藏
        path.style.strokeDashoffset = length;
        // 强制浏览器重绘，避免过渡不生效的问题
        path.getBoundingClientRect();
        // 设置过渡动画
        path.style.transition = path.style.WebkitTransition = `stroke-dashoffset ${singleAnimDuration}ms ease-in-out`;
        // 把偏移量设为0，触发动画
        path.style.strokeDashoffset = '0';
      }, index * singleAnimDuration);
    });
  };
})();

方法二：递归等待上一个动画完成再启动下一个 #

如果你的动画时长不确定，或者想要严格保证上一个路径动画完全结束后再启动下一个，用递归的方式更靠谱：

(function () {
  var button = document.querySelector('.animate');
  button.onclick = function (event) {
    // 把NodeList转成数组，方便递归遍历
    var paths = Array.from(document.querySelectorAll('path'));
    const singleAnimDuration = 1000;

    // 递归动画函数，index表示当前要处理的路径下标
    const animateNextPath = function(index) {
      // 所有路径处理完就停止递归
      if (index >= paths.length) return;
      
      var path = paths[index];
      var length = path.getTotalLength();

      // 初始化路径状态
      path.style.transition = path.style.WebkitTransition = 'none';
      path.style.strokeDasharray = `${length} ${length}`;
      path.style.strokeDashoffset = length;
      path.getBoundingClientRect();

      // 启动当前路径的动画
      path.style.transition = path.style.WebkitTransition = `stroke-dashoffset ${singleAnimDuration}ms ease-in-out`;
      path.style.strokeDashoffset = '0';

      // 等待当前动画完成后，处理下一个路径
      setTimeout(function() {
        animateNextPath(index + 1);
      }, singleAnimDuration);
    };

    // 从第一个路径开始动画
    animateNextPath(0);
  };
})();

额外注意事项 #

• 确保你的路径元素都设置了stroke属性（比如stroke="#000"），不然虚线动画可能看不到效果；
• getBoundingClientRect()这一步很重要，它会强制浏览器立即应用之前的样式变更，避免过渡动画不触发；
• 如果不需要兼容旧版浏览器，可以去掉WebkitTransition前缀，现代主流浏览器已经支持标准的transition属性。

内容的提问来源于stack exchange，提问作者Display Name