SVG 动画操作指南

已发表: 2022-03-11

任何称职的前端工程师都知道分散的设备生态系统带来的挑战。 不同的屏幕尺寸、分辨率和纵横比难以提供一致的体验。 对于那些想要提供像素完美体验的人来说更是如此。

可缩放矢量图形 (SVG) 有助于解决部分问题，并且做得很好。 尽管它们有其局限性，但 SVG 在某些情况下可能非常有用，如果您有一个优秀的设计团队，您还可以创建视觉上更令人惊叹的体验，而不会给 Web 浏览器带来过度负担或妨碍加载时间。

在过去的几个月里，我一直在从事一个广泛使用 SVG 及其动画和效果功能的项目。 在本文中，我将分享如何使用 SVG 及其动画技术为您的 Web 前端工作带来新的活力。

可缩放矢量图形

SVG 是一种基于 XML 的图像格式，与 HTML 的工作方式非常相似。 它为许多熟悉的几何形状定义了不同的元素，这些几何形状可以在标记中组合以生成二维图形。

SVG 规范是万维网联盟 (W3C) 于 1999 年开发的开放标准。

一段时间以来，所有主要的 Web 浏览器都支持 SVG 渲染。

由于 SVG 图形是 XML 文档，因此 Web 浏览器提供了基于 DOM 节点的 API，可用于与图像进行交互。 谈论让照片栩栩如生！

SVG 路径

如果 SVG 中有一个过分强大的元素，那就是<path>元素。

路径元素是一种基本形状，可用于创建您可以想象的几乎任何高级 2D 形状。

该元素通过一系列绘图命令来工作。 它很像 1967 年的 Logo 编程语言，只是为了花哨的图形进行了现代化改造和设计。 该元素通过属性d采用此绘图命令序列。

 <!-- A right-angled triangle --> <path d="M10 10 L75 10 L75 75 Z" />

你可以想象一个在屏幕上绘图的虚拟笔，路径元素中的绘图注释只是控制笔。 在上面的示例中，指示笔移动到位置(10, 10) ( M10 10 )，画一条线到(75, 10) ( L75 10 )，画一条线到(75, 75) L75 75然后通过返回起点 ( Z ) 来关闭路径。

使用其他绘图命令，例如圆弧 ( A )、二次贝塞尔曲线 ( Q )、三次贝塞尔曲线 ( C ) 等，您可以在 SVG 中创建更复杂的形状和图形。

您可以在此处了解有关路径元素的更多信息。

SVG 路径和 CSS

“好的，胡安，我明白了。 路径很强大，但我如何为它们设置动画呢？” 你说。

对于我们的第一个技术，我们将利用两个 SVG 属性： stroke-dasharray和stroke-dashoffset 。

stroke-dasharray 属性控制用于描边路径的虚线和间隙的模式。 如果您想将线条绘制为一组破折号和间隙而不是一个连续的墨水笔划，这就是您将使用的属性。

由于 SVG 图像是 Web 浏览器的 DOM 的一部分，而 stroke-dasharray 是一个表示元素，因此也可以使用 CSS 设置该属性。

类似地，stroke-dashoffset 属性（它指定在破折号模式中开始破折号的距离）也可以使用 CSS 来控制。

这两个 SVG 属性一起可用于为 SVG 路径设置动画，让查看者产生路径正在逐渐绘制的错觉。

以这个二次贝塞尔曲线为例： 

 <path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

为了使这条路径动画化，就好像它在屏幕上逐渐平滑地绘制一样，我们必须使用 stroke-dasharray 属性设置短划线（和间隙）长度等于路径长度。 这样虚线曲线中每个虚线和间隙的长度等于整个路径的长度。

接下来，我们将使用 stroke-dashoffset 属性将虚线偏移设置为 0。这将使路径在屏幕上显示为实线（我们实际上是在查看第一个虚线，并且我们已经使每个虚线跨越整个曲线的长度）。 通过将虚线偏移设置为等于曲线的长度，我们最终会得到一条不可见的曲线（我们现在正在查看被渲染为整个间隙的曲线——紧跟虚线的部分）。

现在通过动画 stroke-dashoffset 属性，您可以使曲线逐渐出现在屏幕上。

请参阅 CodePen 上 Toptal 博客 (@toptalblog) 的 Pen Toptal - SVG 和 CSS 路径。

如您所见，曲线始终存在。 我们只是改变虚线偏移，使虚线部分一点一点地出现。

您可以通过使用相同的原理但使用更多路径来更进一步：

请参阅 CodePen 上 Toptal 博客 (@toptalblog) 的 Pen Toptal - SVG 和 CSS 路径。

在这里，您有一条固定的黑色曲线，一条沿路径移动的红色曲线，以及另一条黑色曲线，紧随红色曲线，但在 40px 后面。

Stroke-dasharray 和 stroke-dashoffset 是两个非常强大的属性，可用于将过多的动画和效果应用到 SVG 路径。 您可以尝试使用这个方便的工具来试验这两个属性。

沿 SVG 路径为对象设置动画

使用 SVG 和 CSS，您可以做的另一件很酷的事情是按照路径为对象或元素设置动画。

我们将为动画使用 2 个 SVG 属性：

  • offset-path：offset-path CSS 属性指定元素定位的偏移路径。

  • 偏移距离：偏移距离 CSS 属性指定沿偏移路径的位置。

通过结合这两个属性，你可以很容易地想出这样的动画：

请参阅 CodePen 上 Toptal 博客 (@toptalblog) 的 Pen Toptal - SVG 和 CSS 路径。

如您所见，我们有一个新元素div.ball 。

这个元素可以是任何东西，一个 div，一个图像，文本，等等。 此示例中的想法是，通过使用 offset-path 和 offset-distance，您可以为元素提供一条要遵循的路径并为该距离设置动画，并且元素将通过该路径移动。

使用 JavaScript 的 SVG 动画

如果所有这些还不够花哨，你总是可以求助于 JavaScript。

使用 JavaScript 为 SVG 元素设置动画与为 DOM 元素设置动画非常相似。 但是，使用 JavaScript，您可以实现我们上面检查过的动画技术，而且更容易。

以前，我们必须在 CSS 中硬编码路径长度。 在 JavaScript 函数path.getTotalLength()的帮助下，可以即时计算路径的长度并根据需要使用它。 你可以在这里了解更多。

此外，已经有许多库可供您使用，它们可以使 SVG 动画比现在更容易。

Snap.svg 不仅使使用 JavaScript 绘制 SVG 图像变得容易，而且使它们像调用.animate({})一样简单。

另一个库，anime.js，让您只需几行代码就可以使 div 元素遵循 SVG 路径。

如果您正在寻找一个可以自行完成更多功能但结果仍然令人惊叹的库，那么 Vivus 就是您正在寻找的。 它对 SVG 路径动画采用了一种不同的、更受配置驱动的方法。 使用这个库，您只需向要绘制的 SVG 元素添加一个 ID，并使用该 ID 定义一个 Vivus 对象。 Vivus 将负责其余的工作。

延伸阅读

以下是处理 SVG 图像和对其进行动画处理时可能会发现有用的资源列表：

要更深入地了解 SVG 动画，您可以阅读这篇关于动画 SVG 图像的三种方法的简短文章，并观看 CSS Tricks 的视频截屏。

本文没有涉及的一件事是使用同步多媒体集成语言 (SMIL) 为 SVG 图像设置动画。 虽然将 CSV 用于 SVG 可以让您使用您已经熟悉的东西，但 SMIL 将事情提升到一个新的水平。

使用 SMIL，您可以单独使用 SVG 实现高级动画效果，例如形状变形。 此处提供了使用 SMIL 实现此类效果的简短但有效的指南。

虽然，目前对 SMIL 的支持有点前卫（不是双关语）。

不折不扣的网络动画

在本文中，您了解了几种使用 SVG 路径上的 CSS 或 HTML 元素为 SVG 元素设置动画的方法。

SVG 是轻量级的，无论屏幕大小、缩放级别和屏幕分辨率如何，都可用于生成清晰的图形。 使用 SVG，现在比以往任何时候都更容易提供现代、生动的体验，同时获得使用标准 Web 技术的好处。

就是这样！ 希望您发现这个 SVG 动画教程很有用并且喜欢阅读它。

进一步阅读 Toptal 工程博客：

  • 如何在 CSS 中处理 SVG 动画