Logo

菜单

发布于 2026-01-06 5 阅读
0

你也能制作动画：SVG 线条动画

你也能制作动画：SVG 线条动画

动画赏心悦目，还能提升应用程序的易用性。动画可以提供重要的反馈，并增强用户的耐心。动画让与技术的交互更加有趣，也更具视觉吸引力。然而，很多网站却显得静态，缺乏人性化。本文的目的并非论证在下一个项目中添加动画的必要性，而是展示添加动画的成本其实非常低。取悦用户可能比你想象的要容易得多！

在本教程中，您将创建一个自定义的 SVG 线条图，并使用 CSS 关键帧动画为其添加动画效果。

你需要准备以下物品：

本教程使用三个免费的基于网络的工具，无需任何网页开发、动画或图形编辑经验。

免责声明：强烈建议使用Google Chrome、Firefox或 Microsoft Edge 浏览器进行本教程操作。Vectr和 CodePen 在 Safari 或 Internet Explorer 浏览器上可能无法稳定运行。

向量

Vectr是一款在线矢量图形编辑器。它是免费的，并拥有直观易用的SVG绘图和导出工具。

SVGOMG

SVGOMG是另一款免费工具，它可以读取 SVG 文件并去除不必要的代码。这不仅可以减小文件大小，还能消除可能分散注意力的代码。

CodePen

CodePen是一个在线代码社区和编辑器，用于编写和展示代码。它非常适合制作小型动画。您可以编写代码并实时查看更改。

什么是SVG？

SVG（可缩放矢量图形）非常棒。它们是：

  • 矢量图像意味着它们可以缩放到任意大小而无需考虑分辨率。
  • 所有现代网络浏览器均支持
  • 在 XML 中定义，XML 是一种可以在 HTML 文件中使用的标记语言。

本质上，SVG 文件使用 xy 坐标或“点”创建图像。这些点被分组为“路径”，从而描述线条或形状。

不完整的三角形

描述上述三角形的路径可以这样表示：

    <path d="M0 0 L100 0 L50 100 L5 10" />
Enter fullscreen mode Exit fullscreen mode

别担心，你永远不需要手动编写 SVG 路径。M不过，请注意每个和后面的数字对L。这些是 xy 坐标，标记了路径上三角形的每个点。与 JPEG 和 PNG 等栅格图像格式不同，放大后的 SVG 图像中看不到像素。增大图像尺寸只会增加点之间的距离。无论尺寸大小，SVG 路径都会平滑填充。

本教程将教你创建一个包含单个路径的 SVG。然而，SVG 通常包含多个路径来描述更复杂的图像。

创建您的 SVG

访问Vectr.com，点击“在线使用”按钮即可启动网页版编辑器。无需注册！界面大致如下：

空白矢量编辑器

在左上角可以看到“图层”选项卡。如果您是第一次使用这类软件，可以将图层想象成一叠透明薄片。每个图层都可以单独编辑，而不会影响其他图层。添加参考图像时，以及绘制路径时，您都会在此列中看到一个新的图层。

继续往下看，你会看到钢笔工具。钢笔工具通过连接线上的点来创建路径。本教程将使用这个工具。其他工具可以创建形状或文本，这些形状或文本也可以导出为 SVG 格式并制作动画。

下方是上传图片按钮。

最后，完成后，您可以使用右侧栏顶部的导出按钮导出您的 SVG 文件。

上传图片

从电脑中选择一张参考图片，或者在线查找并下载。尽量选择简洁的图片。线条清晰或对比度高的图片最佳。手绘很难表现精细的细节，而且非常费时费力。使用上传按钮或拖放操作。上传后，您会在左侧栏看到一个“图像”图层。拖动任意一个角来调整图像大小以适应页面（提示：按住Shift键可保持图像的原始宽高比）。

带图像的向量

勾勒你的路径

草图。这意味着这一步要快速、大致地完成。之后可以轻松地在路径上添加、删除和调整点。在这个阶段画出一条粗略的路径，可以让你快速地进行试验和修改。点击钢笔工具，然后在图像上的任意位置点击即可开始绘制路径。每次点击都会添加一个新点并延长路径。

具有起始路径的向量

继续沿着参考图像的主要线条添加点。可能需要尝试几次才能用一条路径捕捉到图像。按删除键可以删除路径中的最后一个点。如果需要重新定位，也可以拖动现有点。根据图像和您的个人喜好，您可以选择连接路径的起点和终点，形成一个闭合的环。

您可能需要隐藏参考图像，以便更好地了解最终的 SVG 文件效果。将鼠标悬停在图像图层上，然后单击眼睛图标即可切换该图层的可见性。

切换图像可见性 gif

优化你的路径

有几种基本方法可以编辑路径，使其更好地适应图像：

  • 重新定位点 - 拖动任何现有点
  • 添加新点 - 单击现有路径上的任意位置
  • 删除点 - 单击任意现有点以选中它，然后按删除键

编辑点演示

您可能已经注意到路径上每个点旁边都有一些小圆圈或“角点控件”。这些控件用于调整点的曲率。将控件从其所在点拖动即可柔化曲线。

编辑点演示 2

双击某个点可以在两种调整曲线的方法之间切换。两种方法都试试吧！

编辑点演示 3

一些小贴士

  • 别在小事上纠结——插画的精髓在于用更少的笔墨传达更多的信息。不可能捕捉到所有细节，所以要有所选择地表达哪些元素。尝试移除一些点来简化你的路径。
  • 写实并不得分——请隐藏参考图片。尝试不同的比例和曲线强度，打造属于你自己的插画风格。

导出您的 SVG 文件

路径设置完成后，就可以导出了！首先，点击路径图层选中它进行导出。导出的文件里不要包含参考图像。你会看到一个灰色矩形框，里面只包含路径。然后点击导出按钮。

导出前步骤

在导出页面，选择“选区”，并仔细检查路径后面是否没有显示参考图像。然后点击下载保存SVG文件！

导出页面

清理你的SVG文件

SVG 清理工具可以做很多有用的事情。清理工具会移除不必要的代码，并生成格式良好的 XML 代码，供下一步使用。

访问SVGOMG并上传从 Vectr 下载的 SVG 文件（它可能位于您的下载文件夹中，名为“untitled.svg”）。

空白 SVGOMG

上传后，您会在右侧看到一列开关。请保持默认设置不变，然后点击油漆桶图标下方的“复制为文本”按钮。您将在下一步中粘贴此文本。

SVG复制按钮

动画！

前往CodePen并创建一个新的“Pen”，这是一个编辑器，您可以在其中编写一些代码来为您的 SVG 添加动画效果。

新代码笔

在新编辑器中，您会注意到顶部有三个文本区域，标题分别为“HTML”、“CSS”和“JS”。超文本标记语言（HTML）、层叠样式表（CSS）和 JavaScript 是用于创建网页和应用程序的标准语言。HTML 描述网页的内容和结构，而 CSS 描述 HTML 的样式或呈现方式。本教程中，请忽略 JS 部分。

HTML

将从SVGOMG复制的 SVG 代码粘贴到 HTML 区域，这就是您将使用 CSS 实现动画效果的内容。您的 SVG 将显示在下面的白色区域中。

CodePen 包含 HTML

请勿编辑此 HTML 代码，但请注意其结构。在顶部和底部，您可以看到<svg [don't worry about the junk in here]>` </svg><html>` 和 `<html>` 标签。它们分别称为“开始标签”和“结束标签”。它们表示 HTML 元素的开始和结束，在本例中，该元素是一个 SVG 图形。HTML 元素可以嵌套，这意味着它们可以包含其他元素。SVG 开始标签和结束标签之间的所有内容都是 SVG 图形的一部分。您应该能够识别出被包裹的 `<html>`path标签。路径标签看起来略有不同<path d="[your path coordinates]" />。它不包含任何其他 HTML 元素，因此它是“自闭合”的。

CSS

现在您可以使用 CSS 来描述 <div>svg和pathHTML 元素。CSS 代码遵循以下语法：

selector {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

选择器(A)selector是要定位的 HTML 元素。属性 (B)property是该元素的一个可修改属性，而值 (C) 则value指定该属性的外观或行为。一个 CSS 文档可以包含多个选择器，而每个选择器又可以包含多个属性/值对。为了演示，请将以下代码粘贴到 CodePen 的 CSS 区域。

svg {
  height: 100vh;
  width: 100vw;
  background-color: BurlyWood;
}
Enter fullscreen mode Exit fullscreen mode

CSSsvg选择器会选中整个svgHTML 元素。SVG 的高度和宽度应该已经改变，以填充代码下方的整个窗口。`height`100vh和`width` 的值100vw分别指定 SVG 的高度和宽度应为视图高度和宽度的 100%。如果您调整显示区域或浏览器窗口的大小，SVG 也会随之调整大小。`height` 设置为 `100%`则表示窗口高度的一半。您的 SVG 还拥有一个漂亮的新背景色！您可以从完整的 CSS 颜色命名列表50vh中选择自己喜欢的颜色。

接下来，选中该path元素。另起一行，将以下代码粘贴到svg选择器的右括号 ( }) 之后：

path {
  stroke-dasharray: 100;
}
Enter fullscreen mode Exit fullscreen mode

“笔画”是指沿着路径绘制的线条。此前，路径一直以实线笔画绘制，即一条连续的线条。该stroke-dasharray属性可将笔画变为虚线，其值指定每条虚线的长度。

带破折号数组的路径

接下来，定义动画。将以下关键帧定义粘贴到 CSS 区域的新行中。此时 SVG 图像不会立即发生变化。

@keyframes draw {
  from {
    stroke-dashoffset: 0
  }
  to {
    stroke-dashoffset: 200;
  }
}
Enter fullscreen mode Exit fullscreen mode

@keyframes`@draw` 是一个描述行为的 CSS 关键字，用于描述动画中的步骤。后面的单词 `draw` 是动画的名称，稍后会用来引用这个动画。你可以随意命名动画。`start`from和to`end` 是关键帧选择器，用于指定动画开始和结束时的外观。

此关键帧定义描述了属性的渐变过程stroke-dashoffset。它指定了起始值和结束值；其余部分可由 CSS 关键帧填充。该stroke-dashoffset属性描述了笔画在路径上的起始位置。其值指定了笔画与路径起点的距离。通过为该stroke-dashoffset属性添加动画，您实际上是在动画过程中沿着路径推动笔画。

笔画偏移示例

最后，是时候应用动画了。animation: draw 2s infinite在pathCSS 选择器中添加 `<animation>` 属性。`animation` 属性可以接受多个值。本例中，它接受draw关键帧动画的名称、2s动画持续时间（以秒为单位）以及infinite一个关键字，用于指定动画是否无限循环。完整的 CSS 代码应该类似于这样：

svg {
  height: 100vh;
  width: 100vw;
  background-color: white;
}

path {
  stroke-dasharray: 100;
  animation: draw 2s infinite;
}

@keyframes draw {
  from {
    stroke-dashoffset: 0
  }
  to {
    stroke-dashoffset: 200;
  }
}
Enter fullscreen mode Exit fullscreen mode

SVG动画开始后，尝试调整stroke-dasharray`--d`和` stroke-dashoffset--d`的值，找到适合图像的虚线长度。为了获得流畅的动画效果，请确保`--d`的stroke-dashoffset值是`--d`值的倍数stroke-dasharray（至少是`--d`值的两倍）。

本教程中使用的所有 CSS 属性都可以取多种值。这些属性的组合可以极大地改变动画效果。

梨的例子
请在CodePen 上查看此示例的代码！

尤其要了解animation、stroke-dasharray和@keyframes，以便进一步自定义动画。此外，还有许多其他CSS 属性可以应用于 SVG。

现在你已经掌握了创建动画 SVG 线条图的工具。为你的下一个项目增添一些动感吧！

文章来源：https://dev.to/oppnheimer/you-too-can-animate-svg-line-animation-jgm
在 Supabase 上设置一个免...
JavaScript 中的数字格式化