figma下载_使用SVGator，Figma和Envato元素对图标进行动画处理

daique1908

墨衍会员 · AI 创作全网分发码龄10年

关注

翻译最新推荐文章于 2026-03-16 00:30:56 发布 2.9k 阅读 AI 写同款· GEO 优化 ›

figma下载

在本教程中，我们将从Envato Elements中获取基于SVG的图标，在Figma中进行一些准备修改，然后使用SVGator对其进行动画处理。让我们开始吧！

您需要什么

在开始之前，请继续从Envato Elements下载此图标包。下载后，解压缩该zip文件并找到编号15的图标，该图标看起来像一个小的键盘和屏幕。

您还需要一个付费SVGator帐户，因为免费试用版没有我们将要使用的功能之一。

1.在Figma中准备文件

我们将要使用的图标与动画所需的图标并不完全相同，因此我们将使用Figma进行一些小的更改。当然，您可以使用任何喜欢的矢量编辑工具-在本教程中，我们将使用Figma，因为一切都可以使用免费层来完成。

登录到Figma ，创建并打开一个新文件，然后将15图标拖放到界面中以将其导入。

我们将从放大图标开始，以便更轻松地使用它。为此，请在“ 图层”面板中选择顶层框架，然后在右侧边栏中将高度和宽度从当前的64增加到128：

为什么我们要更改SVG图标？

我们将对图标计算机屏幕上的小线条进行动画处理，但是默认情况下，这些线条实际上没有任何动画效果。如果我们查看任何行的路径节点，我们将看到：

这是仅具有填充的形状，因此我们将无法以所需的方式对其进行动画处理。相反，我们需要对其进行转换，使其看起来相同，但实际上是一条应用了笔触的路径，如下所示：

从填充形状转换为带有笔触的路径

没有自动的方法可以将我们的小型计算机屏幕上的七行线从填充的形状转换为带有笔触的路径，因此，我们将重新创建每一行。

首先选择钢笔工具，请注意，钢笔工具实际上比直线工具更易于使用，因为它使您可以更轻松地在网格上居中放置节点。

我们将从在屏幕顶部重新创建第一条蓝线开始。确保将其放大到足以看到Figma画布上的像素网格。在网格的左端单击两个单元以创建一个节点：

然后从右端再次单击两个网格单元以创建第二个节点：

然后按Enter键完成该行：

现在我们只需要对笔划进行样式设置，以便我们的新路径看起来像原始的蓝线。

在“ 笔触”面板中，将宽度设置为4。

通过单击宽度设置右侧的三个点图标来打开高级笔画属性：

在上限下拉菜单中，选择Round ：

重新创建线条形状后，我们现在可以将其设置为正确的颜色。打开笔划颜色选择器，并从另一条蓝线中采样颜色：

现在，完成的行应看起来与原始行相同。

对其他六行重复

创建了一行后，我们现在需要重新创建其他六行。但是，在进行此操作之前，请先选择已创建的行并将其分组。在该组中创建所有新行，以使它们井井有条并与原始行区分开。

每次重新创建其他六行的过程都相同：

使用钢笔工具在任一端创建2行网格正方形
将笔划宽度设置为4
设置圆角
从另一行采样正确的颜色

完成线的创建后，隐藏在其中创建的组，然后选择所有原始线并删除它们。

导出准备好的SVG

我们的SVG现在可以制作动画了，因此我们可以继续进行导出。

在进行此操作之前，最好重命名文档的父框架，因为无论您如何命名该框架都将成为导出图标的名称。我去了“ icon_computer”：

完成此操作后，在“ 导出”面板的右侧栏底部，单击那里的+按钮以创建新的导出，然后在文件类型下拉列表中选择SVG ：

导入SVGator中进行动画处理

登录到SVGator，然后在信息中心中点击导入新按钮，以导入 SVG图标。

导入完成后，您将自动进入SVGator的主要区域，您可以在其中开始对图像进行动画处理。

2.动画线条

动画的第一部分将使图标计算机屏幕上的所有线条从左到右绘制，一次就好像被键入一样。完成此操作后，我们将对键盘上的按键动画进行动画处理。

隐藏所有线

当我们开始制作动画时，您可能会发现一条线的一部分出现在原先应该出现的位置。您可以通过调整动画中的设置来避免这种情况，但隐藏所有行会更容易，直到我们准备好开始播放动画为止。

首先选择画布上的第一行。 SVGator的工作原理是，您将五个Animator中的一个添加到时间线中，在本例中，由于我们要隐藏线，我们将添加Opacity动画器。为此，请在左侧栏中的Animators面板中查看，然后单击Opacity左侧的+按钮：

现在，您会在时间轴上看到不透明度轨道，并且我们准备开始向其中添加关键帧。点击下图这样做的小蓝+图标：

现在，我们可以在动画的这一点更改第一行的不透明度级别。单击当前显示为100％的位置，然后将值更改为0％：

现在，您应该看到第一行不再可见。

继续，并对图标的计算机屏幕上的每一行重复相同的步骤，并将它们在动画的第一帧中都设置为0％不透明度：

动画第一行（path_49）

现在让我们开始实际的动画制作，并使我们的第一行看起来从左边开始绘制。

我们希望我们的线再次变得可见，因此将播放头移至第二帧，添加另一个关键帧，并将其设置为100％：

现在，该行应重新出现在您的画布上。

返回“ 动画制作器”面板中，还向该行添加“ 路径”动画制作器。您将看到此动画制作器具有两个属性： Offset和Dashes 。单击每个按钮的小+按钮为其添加关键帧。

我们需要在此处更改两个值： Offset和第一个值Dashhes 。在这两种情况下，我们给出的值都是路径长度+ 1。

您可以在“ 路径”动画器上看到当前选中项的长度，在这种情况下为40。因此，我们需要将“ 偏移”和“ 散列”中的第一个值更改为41，如下所示：

我们将此值设置为41的原因是，如果我们指定40（路径的长度），它将允许线的一部分显示在其右端。加1会使动画比路径本身稍长，确保隐藏整个行，直到动画完成。

此时，您应该在线的左端看到一小段线，现在我们可以通过设置偏移值动画来使其长到通常的长度。

将播放头移动5帧，添加新的“ 偏移”关键帧并将其值设置为0：

按下播放按钮（或按空格键），您应该看到第一行从左到右逐渐增加。

动画第二行（path_50）

现在，我们需要执行相同的过程，并对第二行进行动画处理以从左侧开始生长。我们希望它在第一行完成之后开始绘制，因此看起来就像一个人在完成第一行之后输入新行。

将播放头的位置比第一行的最后一个关键帧更远。将第二行现有的0％不透明度关键帧拖动到该位置。然后将播放头再移一个空间，添加一个新的关键帧，并将其设置为100％，以使第二行可见：

现在，与第一行一样，为Offset和Dashes添加Path动画器和关键帧。该路径的长度为28，因此请向该值加1，然后将“ 偏移”和“ 虚线”的第一个值都设置为29，如下所示：

由于第二行比第一行短，因此完全绘制所需的时间应该更少。因此，这次将播放头移到四个帧而不是五个帧上，添加一个新的关键帧并将其设置为0。

再次播放动画，您应该看到两条线都绘制到了计算机屏幕上。

动画剩余的线

对其余5行重复相同的步骤：

将其0％不透明度关键帧比上一行动画中的最后一个关键帧移动一帧。
此后一帧添加100％不透明度关键帧。
在同一帧上，为其“ 偏移”和“ 散列”属性添加“ 路径”动画器和关键帧。
将“ 偏移”和“ 虚线”的第一个值设置为路径的长度+1
沿几个帧创建一个新的偏移关键帧并将其设置为0

为每条线设置“ 偏移”值的动画所需的帧数取决于行长：对于短线，请使用3帧；对于最长的线，请使用5帧。

请参阅下面的屏幕截图，以查看每行要使用的动画长度，以及每种情况下完成的关键帧的外观。

第三行关键帧（path_51）

第四行关键帧（path_52）

第五行关键帧（path_53）

第六行关键帧（path_54）

第七行关键帧（path_55）

屏幕上绘制的线条的动画现已完成。给它一个游戏测试，并观看它们一次全部出现。

3.更改时间轴设置

现在，我们已将动画的主要部分布置在时间线上，我们有足够的信息来决定整个动画应持续多长时间。线条动画的运行大约需要1.5秒，因此我们将在最后留出一点空间，以便执行一些额外的步骤，我们将很快采取一些措施，并将动画设置为2秒长。

要设置动画的长度，请单击界面左侧，播放按钮上方但位于“ 动画师”面板下方的齿轮图标 。完成后，您会看到一个对话框，其中包含所有当前时间轴设置。我们将在此处进行一些更改：

将持续时间设置为2秒。
选择“ 循环”选项以使动画重复。
选中鼠标悬停时设置动画，然后选择鼠标悬停时 冻结 -这将使动画开始和停止，具体取决于用户的鼠标是否悬停在图标上。

4.动画键盘按键

现在，我们要对键盘上某些键的位置进行动画处理，以便看起来有人在屏幕上键入这些行。对按键进行动画处理的过程将是：

选择密钥。
添加位置动画器。
添加关键帧-将位置值保留为0,0
将两帧移到上方，添加另一个关键帧，然后将第二个位置值更改为1，以使您拥有0,1 –这将使键向下移动。
再移两个帧，添加另一个关键帧，然后将值设置为0,0这会将关键点移回其原始位置。

从第四帧开始，选择任意方形键（无关紧要），然后按照上述步骤操作。然后将播放头移动到刚创建的按钮动画的最后一帧，选择一个新的方形键，然后重复步骤对其进行动画处理。您总共需要八个方形按钮按下动画。

请注意，在完成前四个按钮的按下操作之后，您可以使用快捷方式进入下四个按钮。选择一个现有按钮动画的轨迹，在框内选择其关键帧并使用CTRL + C复制它们，将播放头移动到下一个动画的正确位置，然后使用CTRL + V粘贴关键帧。

当您按下八个方形按钮时，我们将模拟稍停片刻后按下的Enter或Return键。

将播放头从最新按钮动画的最后一个关键帧移出六帧。然后，选择键盘右上方的矩形键，并为其创建相同的按钮动画。

完成后，按下按钮的关键帧应如下所示：

5.淡出线

现在，我们有一个动画，表示在屏幕上键入一堆线，我们希望它能够平滑地循环。如果线条突然消失了，那似乎有点突然。取而代之的是，我们将使它看起来像刚创建的Enter键按钮一样，快速淡出屏幕以清除屏幕，为动画的下一个循环做准备。

在最后一次按键动画结束后将播放头定位一帧-这将帮助您跟踪要添加的关键帧应移到的位置：

滚动到时间线的顶部，然后在刚刚放置播放头的位置上，向不透明度仍设置为100％的七行中的每一行添加一个新的不透明度关键帧。

将播放头移到两帧上方，并向每行添加另一轮不透明度关键帧，并将它们全部设置为0％：

这会使所有七行淡出，您的动画现在完成了。如果您播放它，您应该会看到在屏幕上键入了几行，然后将其清除，然后动画可以流畅地重复。

6.导出和使用动画SVG

现在我们的动画已经制作完成，可以导出了！单击右上角附近的浅绿色导出SVG按钮，您将看到以下对话框来设置动画SVG的文件名：

保存时要小心，不要覆盖原始的SVG。

现在，您可以直接在任何浏览器中打开SVG，将其悬停在其上，然后会看到动画循环。

添加到网页

由于我们正在使用悬停交互来播放和暂停动画，因此我们无法通过<img>元素或将其作为背景图像添加到网页中。为了使鼠标悬停正常工作，需要将SVG代码复制并直接粘贴到您要在其上使用的页面HTML中。

最好的方法通常是在页面上添加<div> ，将SVG代码粘贴到页面中，然后将div设置为所需的宽度和高度。例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hover Animated SVG Icon</title>
  <style>
    .icon {
      height: 256px;
      width: 256px;
      margin: 50px auto;
    }
  </style>
</head>
<body>
  <div class="icon">
    <!-- paste svg code here -->
  </div>
</body>
</html>

SVGator的导出文件可以包含多行代码，因此，为了确保您仍然可以舒适地处理页面的其余部分，我建议使用代码编辑器，该编辑器可以折叠div并节省空间。

就是这样！完成的SVG动画图标应如下所示：