如何轻松创建精美的 SVG 动画

2025-06-07

如何轻松创建精美的 SVG 动画

我们将要创建的最终版本！

网页动画制作从未如此简单。SVG（可缩放矢量图形）使用 XML 标记来帮助将内容渲染到浏览器中。这里有一个例子。如果您下载一个png或一个，jpeg您将只获得图像，然后您必须使用<img />标签将其渲染到浏览器中。这本身并没有错，但如果我想让它动起来，我的能力就非常有限。SVG 如何改变这种情况？

<svg width=”100" height=”100">
 <circle cx=”50" cy=”50" r=”40" stroke=”green” stroke-width=”4" fill=”yellow” />
</svg>
Enter fullscreen mode Exit fullscreen mode

这是一个 SVG 示例。它使用了与 HTML 非常相似的 XML。这使得动画制作变得非常简单。

要制作动画，我们首先需要两个库，TweenMax一个TimelineMax来自 GSAP。如果您还没听说过，这里有更多信息。对于懒人来说，这里是 CDN。

为了教程方便，我们不会自己创建 SVG。我们只会从网上找一个。Flaticon 是我最喜欢的图标和精美图片网站之一。他们有很多不同的选择，但因为我们是程序员，所以我选择了显示器。我知道，这绝对是原创的。


Flaticon 给我们提供了 SVG，因为他们知道我们想要动画🙏

下载文件后，打开它并将代码复制到CodePen或JSfiddle之类的网站……或者，如果您不信任这些网站，那么您可以使用自己的代码编辑器。开始吧！

化点淡妆

这一步是可选的，但我个人很讨厌（抱歉，用词过重）SVG 不居中。背景颜色也不好看。我们来改一下。把 改成body你喜欢的颜色，然后把这些 CSS 属性添加到 SVG 元素的 ID（我这里叫“Layer_1”）。要居中，只需添加display: block;和margin: 0 auto;。


等一下，这看起来很熟悉……

分析我们的 SVG

在上一节中，你可能注意到我们使用了 CSS 将 SVG 居中。让我们快速看一下我们的 SVG 文件……

<svg version="1.1" id="Layer_1" xmlns="
" xmlns:xlink="
" height="300" wx="0px" y="0px"
  viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
 <path style="fill:#E8EDEE;" d="M361.931,494.345H150.069c0-19.5,15.81-35.31,35.31-35.31h141.241
  C346.121,459.034,361.931,474.845,361.931,494.345"/>
 <polygon style="fill:#B0B6BB;" points="317.793,459.034 194.207,459.034 211.862,388.414 300.138,388.414  "/>
Enter fullscreen mode Exit fullscreen mode

有趣的是...我们可以将 ID 应用于单个 SVG 元素...但它们代表什么？


等一下……这看起来非常像 HTML 代码……

我的计算是正确的……所有这些polygons和paths都是 SVG 图像中的不同元素。这肯定会让事情变得简单得多。如果你注意到了，在 gif 中，我已经找到了所有的paths和polygons，并相应地为它们设置了 ID。例如，第一个路径元素是显示器支架，所以我将其命名为stand。为了便于教程，我会告诉你每个元素的命名，这样你跟着教程操作就更容易理解了。

动画我们的第一个元素

我们先从设置 ID 的元素开始。确保已GSAP导入这两个库。首先，我们来启动一个时间轴实例。以下是在 JavaScript 文件中的操作方法：

var tl = new TimelineMax();
Enter fullscreen mode Exit fullscreen mode

现在我们有了时间轴实例。让我们使用它。

tl.from('#stand', 0.5, {scaleY: 0, transformOrigin: "bottom", ease: Power2.easeOut})
Enter fullscreen mode Exit fullscreen mode

这将使它执行以下操作：


我的 GIF 制作软件无法正确显示屏幕。别担心！

突破性的动画！让我们分解一下代码目前完成的功能。

var tl = new TimelineMax();
Enter fullscreen mode Exit fullscreen mode

这将初始化变量的时间线tl。

tl.from('#stand', 0.5, {scaleY: 0, transformOrigin: "bottom", ease: Power2.easeOut})
Enter fullscreen mode Exit fullscreen mode

我们使用该tl变量在时间轴上添加动画。它有一些
我们必须输入的参数。

tl.fromfrom 函数允许你定义动画的起始位置，动画将移动到 JavaScript 执行之前浏览器渲染 SVG 的位置。另一个常用的方法是，tl.to不过那是以后再说的。想象一下，tl.from在赛车驶向已经定义好的终点线之前，先在起跑线上定义它。

tl.from('#stand'这里我们定位到需要动画的元素。在本例中，它是 ID 为 stand 的元素。

tl.from('#stand', 0.5这定义了动画的长度。在本例中，它是半秒。

tl.from('#stand', 0.5, {}这些花括号内的所有内容都是动画参数。这些参数里面有……

{scaleY: 0通过极薄的尺寸使元素逐渐消失。

{scaleY:0, transformOrigin: “bottom"该transformOrigin部分会告诉您希望元素在哪个位置进行变换。例如，如果我们不选择此bottom选项，它就会从顶部拉伸，从而破坏计算机建筑物本身的视觉效果。

最后，同样重要的是ease: Power2.easeOut，这个功能用起来非常有趣。ease 参数可以让你决定动画呈现的轻松程度。注意到它是慢慢结束的，而不是 100% 完全停止吗？GSAP 这有点难以解释，不过有个轻松可视化工具可以帮助你。


它甚至还会给你代码来复制！！！

继续……

哇，真是让人眼花缭乱……说真的，你现在已经掌握了所有关于 SVG 动画的知识。现在我们就可以完成项目了，今天就到此为止。我还有一些其他的巧妙技巧，相信你一定会喜欢的。我们继续吧！

使用浏览器的开发工具找到支架的背面。我将 ID 设置standBack为 standBack，因为这些动画会让你大吃一惊。

这个动画也相当直接，因为我们要做的和上次一样的动画。这次我们使用了Bounce缓动效果。我觉得它看起来很卡通，这正是我想要的效果。为了演示时间轴是如何工作的，我将粘贴此步骤的最终代码：

var tl = new TimelineMax();

tl.from('#stand', 0.5, {scaleY: 0, transformOrigin: "bottom", ease: Power2.easeOut})
Enter fullscreen mode Exit fullscreen mode

要连续播放一个动画，只需使用.from其下方的另一个函数即可。甚至不需要回调函数或其他任何东西。


又一个漂亮的动画。我女朋友一定会很骄傲的！

变换原点

如果您不理解本transformOrigin节内容，希望本例能让您更清楚地理解。注意到最后两个动画是如何从下往上清除的吗？对于这个动画，我希望显示器的底部从中间向两侧拉伸。这就是transformOrigin之前我们设置bottom值的地方，但这次我们将使用center。由于我们也是垂直拉伸而不是水平拉伸，scaleX因此我们也将使用 方法。这很容易理解。我将此元素的 ID 设置为monitorBottom

var tl = new TimelineMax();

tl.from('#stand', 0.5, {scaleY: 0, transformOrigin: "bottom", ease: Power2.easeOut})
  .from('#standBack', 0.5, {scaleY: 0, transformOrigin: "bottom", ease: Bounce.easeOut})
Enter fullscreen mode Exit fullscreen mode


哇！就因为知道这个，你一年能挣10多万吗？

喘口气

好吧，这些动画太酷了，人类根本无法接受。下一个动画需要稍微延迟一下，不然我可能会惊慌失措。还好GSAP我们还有办法。现在我们来制作即将出现的屏幕动画。

让我们给屏幕一个 ID screen。现在我们将使用此代码来为其添加动画。

tl.from('#stand', 0.5, {scaleY: 0, transformOrigin: "bottom", ease: Power2.easeOut})
  .from('#standBack', 0.5, {scaleY: 0, transformOrigin: "bottom", ease: Bounce.easeOut}) 
  .from('#monitorBottom', 0.7, {scaleX: 0, transformOrigin: "center", ease: Bounce.easeOut})
Enter fullscreen mode Exit fullscreen mode

一切都非常简单。然而，我们添加了另一个参数……
它会是什么呢？Delay！这个延迟函数将触发播放此动画之前等待的时间。我将其设置为 0.4 秒。让我们看看它是什么样子。


稍微加了点延迟！谢天谢地。

不必太复杂

现在让我们为黄色框添加动画。对于这个动画，我只想让它显示出来。但是，为每个元素添加大量不同的参数会很繁琐……如果它简单一点就好了。我们将黄色框的 ID 设置为yellowBox

var tl = new TimelineMax();

tl.from('#stand', 0.5, {scaleY: 0, transformOrigin: "bottom", ease: Power2.easeOut})
  .from('#standBack', 0.5, {scaleY: 0, transformOrigin: "bottom", ease: Bounce.easeOut}) 
  .from('#monitorBottom', 0.7, {scaleX: 0, transformOrigin: "center", ease: Bounce.easeOut})
  .from('#screen', 0.6, {scaleY: 0, transformOrigin: "bottom", ease: Circ.easeOut, delay: 0.4})
Enter fullscreen mode Exit fullscreen mode

等等，就这些？这肯定行不通吧？


轻松简单的柠檬挤压。

我想就这么简单。

数量决定质量

所以我们一直在用每个单独的元素来制作动画……现在到了最后一步，画红线。这得花很长时间……

等等，朋友，先别这么悲观，其实有一个简单的方法，只需一行代码就能让这些红线动起来，非常漂亮。跟我讲讲具体步骤吧。首先，我们打开开发工具，找到这些红色路径的选择器。


提高！！！

有趣的是，所有红线似乎都有一个父元素<g>。使用开发工具，我将复制选择器，如下所示：

#Layer_1 > g:nth-child(1) > g
Enter fullscreen mode Exit fullscreen mode

path现在，要获取此父元素的所有子元素，我只需在选择器的末尾添加 即可。这将起作用：

#Layer_1 > g:nth-child(1) > g path
Enter fullscreen mode Exit fullscreen mode

太好了。现在我们有了红色下所有元素的列表。

现在我们可以用这个tl.from函数来给它们添加动画效果，但它会同时为所有动画效果添加动画。如果它们都能在不同的时间点以一致的方式进行动画，那岂不是很酷？你现在可能已经看出我这种反问句的倾向了。tl.staggerFrom就是这样！让我们一起看看代码的最后一部分。

.staggerFrom('#Layer_1 > g:nth-child(1) > g path', 0.2, {scaleX: 0}, -0.1)
Enter fullscreen mode Exit fullscreen mode

正如你所见，它相当直观。我们放入了之前确定的选择器，设置了时长，还添加了属性，但是等等，这是什么？-0.1这是什么意思？

在函数中.staggerFrom，我们需要定义每个路径在哪个点之后进行动画。在本例中，我们将执行。0.1 seconds我们添加 的原因-是为了使其从左到右移动，而不是从右到左移动。让我们看看实现后的效果。


这确实很美，但不如你美。

哇，太完美了！令人GSAP惊叹的是，你可以快速使用 HTML 元素和 SVG 元素制作出如此精彩的动画。一旦你理解了语法，这样的事情只需要 10 分钟。

Fork my Pen并在 Twitter 上给我发私信，向我展示你自己做了什么😸。

CodePen

叽叽喳喳

如果你喜欢这篇文章，觉得它对你有帮助，欢迎在推特上关注我！谢谢
😸

文章来源：https://dev.to/lewismenelaws/how-to-create-beautiful-svg-animations-easily-ame
Devto 翻译
PREV
JAMstack。网站如何在臃肿的网络中变得更快。
NEXT
SSH 代理转发 如何正确使用 SSH 以及什么是 SSH 代理转发