什么是 SVG 动画？

SVG (可缩放矢量图形) 是无论如何缩放都保持像素完美的视觉元素。它们非常适合图标、徽标和各种尺寸可变的视觉元素，在小屏幕和大屏幕上都清晰锐利。它们也常用于创建 SVG 动画。

普通的位图或栅格图像由许多小像素组成，而 SVG 只包含一组指令，处理器在加载时使用这些指令重新绘制和缩放图像。

因为它们是基于点和形状的矢量文件，所以 SVG 动画是可缩放的。更好的是，因为它们是基于代码而不是基于像素的，所以在后续修改和调整时更容易。

然而，SVG 最好的部分是什么？它们体积小，加载快。这使得 SVG 动画成为现代网页设计中广泛用途的完美选择。

SVG 动画的简史

第一批 SVG 动画示例在 90 年代末开发，一些网络浏览器早在 2003 年就已经支持 SVG 动画的使用。不过，直到最近，你还需要一个单独的程序或插件才能在网络上查看 SVG，这可能就是 SVG 动画师花了这么长时间才走到聚光灯下的原因。

所有主要的网络浏览器在 2011 年开始支持 SVG 动画。在 2018 年 SVG2 发布之后，我们开始看到对强大且易于使用的 SVG 动画软件的开发投入了更大的精力。

使用 JavaScript 和 HTML 的 SVG 动画

从那时起，SVG 网页动画已经发展到挑战曾经无处不在的 GIF。正如 GIF 的使用在过去 10 年中有所下降一样，JavaScript 和 HTML5 中的 SVG 动画也越来越受欢迎。

为什么选择 SVG 动画？

SVG 动画无疑为开发者或设计师提供了几个优势。然而，如果今天 SVG 看起来会取代 GIF，这很大程度上是由于网站速度现在是决定谷歌排名的最重要因素之一。

如果一个网站充满了笨重且迟钝的 GIF，那么你可能会看到它在搜索结果中下降。突然之间，像 SVG 这样快速、轻量且易于使用的格式开始变得非常有吸引力。

SVG 动画工具如何工作？

动画 SVG 仅仅是向 SVG 动画工具提供一组清晰的指令。想象一下给一个用笔画画的人指路：将手向左移动 3 英寸；现在以 180 度向右，继续移动 5 英寸，依此类推。

这些指令可能描述方形和圆形等形状，但它们通常被压缩成描述任意形状的路径或曲线。
SVG 路径具有明确的起点、终点，当然还有长度。因此，除了以任何比例、旋转或颜色绘制 SVG 外，我们还可以指示我们只想绘制 SVG 路径到一定长度。通过将此长度从零动画到路径的全长，你可以看到路径作为一个 SVG 动画组合在一起。

由 Benjamin den Boer 创建的 Framer Animator 组件处理所有幕后工作，以帮助我们创建精美的 SVG 动画。只需将其连接到画布上的 SVG，并在属性面板中配置组件的动画设置即可使其栩栩如生。

如何使用 Framer 全新的矢量工具制作 SVG 动画

Framer 全新的矢量编辑体验让您比以往任何时候都更容易在画布上创建、管理和制作 SVG 动画，无需代码。

1. 绘制或导入您的 SVG

您现在有两种将矢量图形导入 Framer 的方法：

• 使用新的“矢量”菜单从头开始绘制。只需打开插入菜单并选择矢量，即可直接在画布上开始绘制。

• 通过将现有 SVG 拖放到画布上来导入现有 SVG。Framer 会自动将它们转换为矢量集——将图标或插图分组在一起的智能集合。

2. 使用矢量集进行组织

矢量集有助于保持您的设计整洁且可扩展。右键单击任何矢量组并选择“创建矢量集”，或者从资产面板构建一个新的矢量集。您将获得一个专用画布来组织和编辑您的图形，并内置了便捷的浏览和搜索功能。

矢量集支持变量，例如描边颜色和不透明度，因此您可以自定义图标的每个实例，而无需复制您的设计。您甚至可以使用单个集构建双色调或多色图标。

3. 使用描边效果进行动画

使用 Framer 新的描边动画效果，让您的矢量动起来。这使您可以访问强大的新属性：

• 长度

• 间隙

• 偏移

您还可以从三种循环模式中进行选择，以创建无缝动画。从无限徽标循环到动态微交互，所有这些只需点击几下即可实现。