手把手教你使用 SVG 实现手写 (路径) 动画效果

引言：SVG 手写动画的应用场景

在网页设计、在线教育、数据可视化等领域，手写动画因其自然流畅的视觉效果备受青睐。通过 SVG（可缩放矢量图形）的路径动画功能，开发者可以模拟笔触书写过程，为页面增添动态交互感。本文将从基础原理出发，结合实战案例，详细讲解如何实现这一效果。

一、SVG 路径动画基础原理

1.1 SVG 路径（Path）元素

SVG 路径通过 d 属性定义绘制指令，包括移动（M）、直线（L）、曲线（C/Q）等。例如：

<path d="M10 10 L100 100" stroke="black" fill="none"/>

此代码绘制一条从 (10,10) 到 (100,100) 的直线。

1.2 动画核心：stroke-dasharray 和 stroke-dashoffset

手写动画的关键在于控制路径的虚线样式和偏移量：

• stroke-dasharray：定义虚线模式（如 5,5 表示 5px 实线 + 5px 空白）。
• stroke-dashoffset：控制虚线起始点的偏移量。

通过动态改变 stroke-dashoffset，可以实现路径“逐渐绘制”的效果。

二、实现步骤详解

2.1 准备 SVG 路径

首先，使用设计工具（如 Adobe Illustrator）或代码生成路径数据。例如，绘制一个简单的“Hello”：

<svg width="200" height="100" viewBox="0 0 200 100">
  <path id="helloPath" d="M20,50 Q50,20 80,50 T140,50" 
        stroke="black" fill="none" stroke-width="2"/>
</svg>

此路径为二次贝塞尔曲线，模拟手写效果。

2.2 计算路径总长度

使用 JavaScript 获取路径长度：

const path = document.getElementById('helloPath');
const pathLength = path.getTotalLength();
console.log(pathLength); // 输出路径总长度（如 123.45）

2.3 设置初始虚线样式

将路径设为虚线，并隐藏（通过偏移量）：

#helloPath {
  stroke-dasharray: 123.45; /* 等于路径长度 */
  stroke-dashoffset: 123.45; /* 初始完全隐藏 */
}

2.4 添加 CSS 动画

通过 CSS 关键帧动画实现绘制效果：

@keyframes draw {
  to {
    stroke-dashoffset: 0; /* 最终完全显示 */
  }
}
#helloPath {
  animation: draw 2s ease-in-out forwards;
}

或使用 JavaScript 动态控制：

path.style.strokeDashoffset = pathLength;
const animate = () => {
  let offset = pathLength;
  const interval = setInterval(() => {
    offset -= 2;
    if (offset <= 0) {
      clearInterval(interval);
      offset = 0;
    }
    path.style.strokeDashoffset = offset;
  }, 16); // 约60fps
};
animate();

三、进阶技巧与优化

3.1 复杂路径的动画优化

对于多段路径（如中文汉字），需分别计算长度并同步动画：

<svg>
  <path id="path1" d="M10,10 L20,20" .../>
  <path id="path2" d="M30,30 L40,40" .../>
</svg>

const paths = [
  { el: document.getElementById('path1'), length: 14.14 },
  { el: document.getElementById('path2'), length: 14.14 }
];
paths.forEach(p => {
  p.el.style.strokeDasharray = p.length;
  p.el.style.strokeDashoffset = p.length;
});
let offset = 0;
const animatePaths = () => {
  offset += 0.5;
  paths.forEach(p => {
    const progress = Math.min(offset / 2, 1); // 2s完成
    p.el.style.strokeDashoffset = p.length * (1 - progress);
  });
  if (offset < 4) requestAnimationFrame(animatePaths);
};
animatePaths();

3.2 交互式控制

添加按钮控制动画的播放/暂停：

<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>

const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
let animationId;
playBtn.addEventListener('click', () => {
  if (!animationId) animate();
});
pauseBtn.addEventListener('click', () => {
  cancelAnimationFrame(animationId);
  animationId = null;
});

3.3 性能优化

• 减少 DOM 操作：批量更新 stroke-dashoffset。
• 使用 will-change：提示浏览器优化动画属性：

  #helloPath {
    will-change: stroke-dashoffset;
  }

四、实战案例：手写签名动画

4.1 案例需求

模拟用户签名过程，支持自定义文本和颜色。

4.2 实现代码

<svg id="signatureSvg" width="400" height="200"></svg>
<input type="text" id="textInput" placeholder="输入签名文本"/>
<button id="generateBtn">生成动画</button>

const svg = document.getElementById('signatureSvg');
const input = document.getElementById('textInput');
const generateBtn = document.getElementById('generateBtn');
generateBtn.addEventListener('click', () => {
  const text = input.value || 'SVG';
  svg.innerHTML = ''; // 清空SVG
  // 模拟路径生成（实际需通过字体库或手动绘制）
  const paths = [];
  for (let i = 0; i < text.length; i++) {
    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    // 简化路径：实际需根据字符生成
    const d = `M${50 + i * 70},50 Q${70 + i * 70},20 ${90 + i * 70},50`;
    path.setAttribute('d', d);
    path.setAttribute('stroke', 'blue');
    path.setAttribute('fill', 'none');
    path.setAttribute('stroke-width', '2');
    svg.appendChild(path);
    paths.push(path);
  }
  // 动画逻辑
  paths.forEach(p => {
    const length = p.getTotalLength();
    p.style.strokeDasharray = length;
    p.style.strokeDashoffset = length;
  });
  let progress = 0;
  const animate = () => {
    progress += 0.01;
    paths.forEach((p, i) => {
      const delay = i * 0.2; // 逐个字符延迟
      const pProgress = Math.max(0, progress - delay);
      if (pProgress > 0) {
        const length = p.getTotalLength();
        p.style.strokeDashoffset = length * (1 - pProgress);
      }
    });
    if (progress < paths.length * 0.2 + 1) {
      requestAnimationFrame(animate);
    }
  };
  animate();
});

五、常见问题与解决方案

5.1 路径不显示

• 原因：路径未设置 stroke 或 fill。
• 解决：确保路径有 stroke="black" 等属性。

5.2 动画卡顿

• 原因：路径过于复杂或帧率不足。
• 解决：简化路径、使用 requestAnimationFrame 而非 setInterval。

5.3 浏览器兼容性

• 问题：旧版浏览器不支持 stroke-dashoffset。
• 解决：使用 Polyfill 或降级方案（如逐步显示）。

六、总结与扩展

通过 SVG 的路径动画功能，开发者可以轻松实现手写效果，适用于教育演示、品牌标识等场景。未来可结合以下技术进一步扩展：

• GSAP 库：简化复杂动画控制。
• WebGL 集成：实现 3D 手写效果。
• 用户输入交互：实时捕捉笔迹并动画化。

掌握这一技能后，你将能为用户创造更具吸引力的动态体验。立即尝试，让你的网页“动”起来！