SVG动画操作指南

本文概述

• 可缩放矢量图形
• SVG路径
• SVG路径和CSS
• 沿SVG路径设置动画对象
• 使用JavaScript的SVG动画
• 进一步阅读
• 毫不妥协的网络动画

任何值得一试的前端工程师都知道分散的设备生态系统所带来的挑战。不同的屏幕尺寸, 分辨率和长宽比使得难以提供一致的体验。对于那些想要提供完美像素体验的用户而言, 尤其如此。

可伸缩矢量图形(SVG)可帮助解决部分问题, 并且做得很好。尽管它们有其局限性, 但SVG在某些情况下可能会非常有用, 并且, 如果你有一支优秀的设计团队, 你还可以在视觉上令人惊叹的体验中, 而不会给Web浏览器造成过多负担, 也不会影响加载时间。

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

可缩放矢量图形

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

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

所有主要的网络浏览器都已经有一段时间支持SVG渲染了。

由于SVG图形是XML文档, 因此Web浏览器提供了可用于与图像进行交互的基于DOM节点的API。谈论将图片变为现实！

SVG路径

如果SVG中有一个功能强大的元素, 那就是<path>元素。

路径元素是一种基本形状, 可用于创建你可以想象的几乎所有高级2D形状。

该元素通过采用一系列绘制命令来工作。它与1967年的徽标编程语言非常相似, 只是为精美的图形进行了现代化设计。元素通过属性d遵循此绘制命令序列。

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

你可以想到在屏幕上绘制的虚拟笔, 并且path元素中的图形注释仅控制了笔。在上面的示例中, 指示笔移动到位置(10, 10)(M10 10), 向(75, 10)(L75 10)画线, 向(75, 75)L75画线75, 然后通过返回起点(Z)封闭路径。

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

你可以在此处了解有关path元素的更多信息。

SVG路径和CSS

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

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

stroke-dasharray属性控制用于绘制路径的虚线和间隙的模式。如果要以一组虚线和间隙而不是一个连续的笔触来绘制线条, 则可以使用此属性。

由于SVG图片是网络浏览器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上的srcmini Blog(@srcminiblog)的Pen srcmini-SVG和CSS路径。

如你所见, 曲线始终存在。我们仅更改破折号偏移量以使虚线部分逐渐出现。

你可以使用相同的原理, 但使用更多的路径来使这一步骤更进一步：

请参阅CodePen上的srcmini Blog(@srcminiblog)的Pen srcmini-SVG和CSS路径。

在这里, 你有一条固定的黑色曲线, 一条红色的曲线沿路径移动, 另一条黑色的曲线沿红色移动, 但向后40像素。

Stroke-dasharray和stroke-dashoffset是两个非常强大的属性, 可用于将大量动画和效果应用于SVG路径。你可以尝试使用此便捷工具来试用这两个属性。

沿SVG路径设置动画对象

使用SVG和CSS, 你可以做的另一件很酷的事情是使对象或元素遵循路径动画。

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

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

• offset-distance：offset-distance CSS属性指定沿偏移路径的位置。

通过结合这两个属性, 你可以轻松地制作出这样的动画：

请参阅CodePen上的srcmini Blog(@srcminiblog)的Pen srcmini-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动画教程很有用, 并喜欢阅读。