如何用AnimeJS实现SVG路径的手绘式填充动画而非描边动画？

嘿，我明白你想要的效果——不是描边一笔一笔画出来，而是填充区域像手绘一样慢慢“填”进去对吧？用strokeDashoffset做描边动画已经找对了方向，我们可以把这个思路结合SVG的遮罩（mask）来实现填充动画，具体做法如下：

核心原理 #

我们给每个需要填充的路径搭配一个遮罩：遮罩里放一条和原路径完全重合的描边路径。当我们给遮罩里的路径做strokeDashoffset动画时，描边会逐渐“覆盖”整个路径区域，遮罩就会慢慢露出下面的填充内容，视觉上就像填充在手绘出来。

步骤1：调整SVG结构 #

你需要在<defs>里定义遮罩，然后给原填充路径应用对应的遮罩。注意遮罩里的路径要和原路径的d属性完全一致，且描边宽度要足够宽，能完全覆盖原路径的填充区域：

<svg id="cssSelector" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <!-- 每个填充路径对应一个遮罩 -->
    <mask id="mask-path-1">
      <!-- 遮罩路径：无填充，白色描边（mask中白色=显示内容） -->
      <path d="[你的路径d属性]" fill="none" stroke="#fff" stroke-width="20" />
    </mask>
    <mask id="mask-path-2">
      <path d="[你的路径d属性]" fill="none" stroke="#fff" stroke-width="20" />
    </mask>
  </defs>
  <!-- 原填充路径，应用遮罩 -->
  <g class="filled-paths">
    <path d="[你的路径d属性]" fill="#ff6b6b" mask="url(#mask-path-1)" />
    <path d="[你的路径d属性]" fill="#4ecdc4" mask="url(#mask-path-2)" />
  </g>
</svg>

步骤2：修改Anime.js动画逻辑 #

现在动画的目标是遮罩里的描边路径，而不是原填充路径。我们依然用strokeDashoffset从路径总长度（anime.setDashoffset）过渡到0，让描边逐渐展开：

var fillAnimation = anime({
  targets: '#cssSelector mask path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 1500,
  delay: function(el, i) { return i * 250 }, // 保留你原来的延迟逻辑
  direction: 'normal'
});

关键注意事项 #

• 遮罩路径的stroke-width一定要足够大，确保描边能完全覆盖原填充路径的所有区域，避免露出缝隙。
• 遮罩路径和原填充路径的d属性必须完全一致，否则会出现错位。
• anime.setDashoffset会自动计算路径的总长度，不用手动设置stroke-dasharray的数值，非常省心。

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