SVG 路径绘制动画

使用 strokeDasharray 和 strokeDashoffset，我们可以模拟出“线条被逐步绘制”的动态视觉效果，常用于：

• 手绘风格动画
• Logo 绘制过渡
• 图表加载动画

动画原理说明

SVG 路径元素 <path> 默认是连续曲线或直线段。通过：

• stroke-dasharray: 定义虚线间隔（可以设为路径总长）
• stroke-dashoffset: 设置绘制的起点偏移量

配合 Anime.js 的动画控制，即可实现路径“从无到有”地绘制出来。

动画示例代码

anime({
  targets: '#path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 2000
});

小结

通过 Anime.js 操作 SVG 路径动画，可以实现高质量、无失真的矢量绘制动效。

示例演示

loading

✅ 效果：点击按钮后，一条平滑曲线被“绘制”出来，形成流畅自然的路径动画，常用于品牌 LOGO 展示或 SVG 图形绘制演示。