前端初探：小白笔记（绘制 SVG 路径动画）

前端

2023-09-21 22:11:26

在前端世界的漫漫长路中，初学者可能会遇到令人望而生畏的挑战。作为一名渴望成为技术男神的南京前端工程师，我也曾是那个懵懂无知的小白。今天，我决定开启我的笔记之旅，从绘制 SVG 路径动画的简单实现入手，为你，这位前端初学者，点亮一盏明灯。

SVG 路径：图形的画笔

SVG（可缩放矢量图形）是一种基于 XML 的矢量图形格式，广泛用于网页设计和交互。它的强大之处在于，它可以创建可缩放、清晰且响应式的图形。其中，SVG 路径元素用于绘制线条、曲线和其他复杂形状。

绘制 SVG 路径动画

要绘制 SVG 路径动画，我们需要两个关键方法：

element.getPointAtLength()： 该方法沿路径返回给定距离的点。
element.getTotalLength()： 该方法以用户单位返回路径总长度的用户代理计算值。

实现动画

让我们用代码来实现这个动画：

// 获取 SVG 路径元素
const path = document.querySelector('path');

// 获取路径总长度
const totalLength = path.getTotalLength();

// 创建一个变量来存储当前动画进度
let progress = 0;

// 定义动画函数
function animate() {
  // 计算当前进度
  progress += 1;

  // 获取当前路径点
  const point = path.getPointAtLength(progress);

  // 更新 SVG 元素的属性
  path.setAttribute('stroke-dashoffset', totalLength - progress);

  // 如果进度未达到最大值，则继续动画
  if (progress < totalLength) {
    requestAnimationFrame(animate);
  }
}

// 启动动画
animate();