SVG 线性动画的工作原理

我相信你们中的大多数人一定见过这种小技巧，用 SVG 路径动画让它看起来像是在自行绘制。它非常酷。Jake Archibald 率先使用了这项技术，并在他的博客文章中详细介绍了它的工作原理：一个非常棒的交互式博客文章。Brian Suda 也在 24 Ways 上写过关于它的文章。Polygon 在自定义设计文章中成功地使用了它，并 写了一篇关于它的文章。Codrops 也提供了一些 很棒的示例。

我几乎没有要补充的，除了我的大脑只是突然明白了，所以我认为我会再解释一次，这样你就能像我一样理解它。

1. 你有一个 SVG 形状

2. 该形状必须有描边

3. 描边可以是虚线

我们可以从 Illustrator 中完成，但我们也可以通过编程的方式来完成。让我们使用 CSS 针对路径（假设我们在这里使用的是内联 SVG，或者通过 <object>）并以这种方式应用虚线。

<svg ...>
  <path class="path" stroke="#000000" ... >
</svg>

.path {
  stroke-dasharray: 20;
}

这样会得到 20 像素长的虚线。

4. 这些虚线可以更长...

.path {
  stroke-dasharray: 100;
}

5. 我们还可以“偏移”描边，这会移动这些虚线的位置

让我们看看我们如何动画化这些长描边的偏移量

这很简单，只要

.path {
  stroke-dasharray: 100;
  animation: dash 5s linear;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}

6. 想象一下，有一条虚线很长，可以覆盖整个形状

没什么好看的，如果它根本没有虚线，它看起来就像完整的形状。你只需要让 stroke-dasharray 的值比描边的长度更长。

7. 现在偏移描边，这样它就不会覆盖整个形状，而是不会覆盖整个形状。

它看起来就像形状根本不存在。

8. 现在将描边的偏移量动画化回 0

如果使用 CSS，你希望 animation-fill-mode 的值是 forwards，这样动画的最终状态将保持动画结束时的状态。

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

好了！

实时示例

为什么需要 JavaScript？

你看到的大多数 SVG 线性动画示例都使用了 JavaScript。这是因为很难知道描边的实际长度。在我们的示例中，我们使用了 1000，因为这正好是合适的长度。

你可以在 JavaScript 中获取该长度，方法如下

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

然后根据需要使用它。我在文章开头提到的那些文章更详细地介绍了所有这些内容，所以你可以参考那些文章，了解更多高级内容。我只是想介绍一下这个概念，也许你也可以理解它。

还有一个技巧！看看 一个让绘制 SVG 线变得更简单的技巧。