线条动态生长动画，利用 SVG 实现

在网页中，经常能看到一些线条动画，比如加载动画、进度条动画等。这些动画通常都是利用 SVG 和 JavaScript 实现的。

SVG（可缩放矢量图形）是一种基于 XML 的图形格式，它可以用于创建可缩放的、可交互的图形。SVG 动画则是利用 JavaScript 来控制 SVG 元素的属性，从而实现动画效果。

要创建线条动态生长动画，我们需要做的就是：

1. 创建 SVG 画布。
2. 绘制线条。
3. 使用 JavaScript 控制线条的生长。

下面，我们就来一步一步地实现这个动画。

1. 创建 SVG 画布

首先，我们需要创建一个 SVG 画布。我们可以使用以下代码来创建 SVG 画布：

<svg width="500" height="500" viewBox="0 0 500 500"></svg>

这段代码创建了一个宽为 500 像素，高为 500 像素的 SVG 画布。

2. 绘制线条

接下来，我们需要在 SVG 画布中绘制一条线条。我们可以使用以下代码来绘制线条：

<path d="M 100 100 L 200 200" stroke="black" stroke-width="2" fill="none" />

这段代码创建了一条从点 (100, 100) 到点 (200, 200) 的直线。stroke 属性指定线条的颜色，stroke-width 属性指定线条的宽度，fill 属性指定线条的填充色。

3. 使用 JavaScript 控制线条的生长

最后，我们需要使用 JavaScript 来控制线条的生长。我们可以使用以下代码来控制线条的生长：

var path = document.querySelector('path');
var length = path.getTotalLength();

var animation = anime({
  targets: path,
  strokeDashoffset: [length, 0],
  duration: 2000,
  easing: 'easeInOutSine',
  loop: true
});

这段代码首先获取了 SVG 画布中的路径元素。然后，它获取了路径的总长度。接着，它使用 anime.js 库创建了一个动画。这个动画将路径的 strokeDashoffset 属性从长度值逐渐减小到 0，从而使线条逐渐生长。duration 属性指定动画的持续时间，easing 属性指定动画的缓动函数，loop 属性指定动画是否循环播放。

以上，就是创建线条动态生长动画的步骤。希望本文能帮助您更好地理解 SVG 动画的实现原理，并将其应用到自己的项目中。