2020 年面向 Web 设计师和开发人员的 24 大 SVG 动画示例

这是一个很好的功能，能够在您的网站上拥有在任何设备屏幕分辨率下看起来都相同的视觉内容。 这就是 SVG 所做的； 它帮助设计师和艺术家创建可以无限缩放而不会损失任何图像质量的视觉 Web 内容。 一种快速适应所有新现代网站的方法，尽管这种方法仍然需要更多的学习和实践。 SVG 越来越受欢迎，但今天大多数设计师仍然依赖传统的视觉技术。 SVG 是不是太难了，还是只是旧的方法仍然很好用？ 对于一些人来说是后者，而其他人则意识到在他们的项目中使用 SVG 的巨大好处。

好处

以下是 SVG 的一些最重要的好处：

• SVG 的 XML 格式的文件大小通常较小，并且压缩得更好。 这为您提供了更高的性能和更高的质量。
• 为视网膜显示创建内容变得更加容易，任何大小的矢量图像看起来都一样清晰，因此您不必仅为视网膜显示重新创建内容。
• 它们不仅限于样式，实际上您仍然可以使用 CSS 设置 SVG 样式，并为其设置动画； 正如我们将在本介绍之后的众多 SVG 动画中学到的那样。
• 现在所有主要的 Web 浏览器都完全支持 SVG，因此在许多方面 SVG 时代已经正式到来，只是设计师需要开始更频繁、更一致地迎头赶上。
• 网站加载时间增加只是 SVG 的副作用之一。 您的图像使用相同的图像以各种尺寸加载，因此您不必使用单独的、更大的图像来满足您的视觉设计要求。 事实上，SVG 不会向服务器发出任何额外请求，因为它不使用直接的 HTTP 请求，而是所有图像都内置在网站的源代码中。
• 乍一看，SVG 似乎过于技术化，但实际情况是，大量的库和照片编辑应用程序让您可以专注于视觉外观，并负责将图像转换为 SVG 格式的过程。

如果您完全是 SVG 的新手，那么本教程和 Sara 的 SVG 介绍指南是您开始旅程的好地方。 她甚至详细介绍了将矢量图像放到您的网站的开发过程中最微小的细节，帮助您学习一项您将逐渐珍惜的宝贵技能。 我们对 SVG 的未来感到兴奋，并期待您对我们今天必须为您展示的动画的反馈，也许您自己就是 SVG 动画的作者，如果是的话 — 联系我们，我们将收到您的反馈作品很快就在这里发表。

动画 SVG 与 GIF [CAGEMATCH]

在需要为特定图像设置动画的所有情况下，动画 SVG 不一定都很好。 但是，如果您希望为徽标图像、矢量图、用户界面视觉效果、信息图表内容和图标制作动画，那么您绝对应该更深入地了解 SVG 动画的过程以及它如何为您提供帮助，可用性的主要领域是事实上，SVG 图像可以在任何屏幕分辨率下缩放，而 GIF 等图像格式只会保持默认设置的分辨率，导致从不同设备和屏幕尺寸查看时图像体验失真。

当然，其他因素也会起作用，例如文件大小 - 如果文件大小小于 JPG 或 PNG 的文件大小，请保留原始图像，但尝试在可能的情况下通过 SVG 合并不同分辨率的图像，以提供一个更愉悦的视觉体验。 Sara Soueidan 是一位经验丰富的前端 Web 开发人员，拥有计算机科学学位。 她带领读者进行了半小时的旅程，了解为什么在某些情况下 SVG 优于 GIF，以及在哪些情况下坚持使用 GIF 或其他图像格式。

速度.js

我们将扩展对 SVG 动画的这一综述，以包括库和框架，以及真正详细介绍 SVG 动画如何工作的文章，并承诺每个传出资源将至少有一个示例供您探索。 Velocity 是一个建立在 jQuery Animate 函数之上的动画框架，是一个快速而强大的库，用于执行颜色动画、视觉转换和循环，以及各种内容类型的滚动效果。 如果您正在寻找一个可以在一个地方结合 CSS3 和 jQuery 的平滑过渡库； 这是您想要更深入探索的框架，正如我们所说的 - Velocity 有数十个示例供您预览，只需花点时间浏览文档即可。

SVG.js

SVG 有很多方法可以帮助开发人员创建更好的 Web 体验。 使用 SVG.js 库，您可以扩展该帮助以包含可以环绕可视 SVG 文件的实时可视过滤器。 这些过滤器可以具有许多最常见的过滤器和动画效果。

SVG 动画的三种方法

截屏视频是与内容作者建立联系并了解他试图在更深层次上传达的内容的好方法，这是文本可能无法做到的。 Chris Coyier 是一位知名的 CSS 设计专家，他在 2014 年底制作了一个 15 分钟长的截屏视频。该截屏视频解释了三种不同的 SVG 文件动画方法。 方法如下：首先，您可以使用@keyframes 函数使用CSS 为可视SVG 内容设置动画，第二种方法是直接使用SMIL 为SVG 设置动画（这篇文章中有一个教程详细解释了SMIL，请密切关注） ，而第三种方法是使用 JavaScript，它提供了制作动画的核心功能，当然，始终可以选择为此目的选择 JavaScript 框架，您可以在此资源中找到其中的许多框架。

项目截止日期

如果您想在您的网站或项目上获得一些乐趣，您很有可能想要引入 Project Deadline。 这是一个很酷的动画，死亡慢慢接近超级忙碌的自由职业者，他的目标是赶上他或她正在处理的任务的最后期限。 您可以执行多种自定义调整，使其精确适合您的风格。 但也可以随意使用它。 简而言之，当您想用 SVG 动画增添趣味时，您最好不要错过 Project Deadline，因为每个人都可以轻松使用它来充分利用它。

带滑块的 SVG 动画

一个超酷的带有滑块的 SVG 动画示例，它允许您仅使用滑块来玩不同的功能。 小房子变得更宽、更高，你甚至可以让树木和整个地基伸展。 随意更改每个滑块，完全按照您的需要。 您可以使用这个 SVG 动画示例作为灵感或在您的项目中实际使用它。 使用可用的特性和功能，您可以修改默认设置，因此结果完全符合您的喜好。 但首先，请转到演示页面并查看该工具的全部效果。

动画 SVG 图标

Snap.svg 是另一个流行的 JS 库，供直接使用 SVG 的开发人员使用。 虽然我们希望看到他们的数量增加，但学习的机会总是存在的。 Codrops 的 Mary Lou 撰写了一篇关于如何创建自己的动画 SVG 图标的有见地的文章，同时提供了一个包含 24 个独特 SVG 图标的演示页面，这些图标都具有动画功能。 您可以立即在您的设计中使用这些演示，或者以它们为起点来创建更出色、更独特和更讨人喜欢的东西。

创意 SVG 字母动画

网页设计的艺术特色是全新的风潮。 人们喜欢有一个网站，通过具有现在才开始大规模出现的功能而从其他网站中脱颖而出，其中一个功能是徽标、标题和内容标题中的动画字母。 Luis Manuel 正在使用 Segment 库来处理 SVG 路径笔划，为任何可以想象的文本创建令人惊叹的字母动画。 这篇文章彻底解释了 Segment 如何实现动画，以及如何根据自己的喜好操纵它们。 这种级别的解释甚至可以帮助最没有经验的人开始使用这些很酷的 Web 开发功能，而无需投资学习编程语言。

Vivus.js

随着开发的进行，开发人员可以更轻松地创建可以代表用户完成大部分工作的库和框架。 因此，用户只需要指定他需要什么以及应该将需要应用到哪个文件。 Vivus.js 就是这样一个库，它只通过您告诉库哪个文件需要动画以及以何种方式在 SVG 文件上“绘制动画”； 您有权选择一系列动画以供选择，而且所有动画都同样易于设置和处理。

SVG 加载器

SVG Loaders 是一个令人惊叹的 SVG 加载器动画库，专门使用 SVG 构建。 不久前我们谈到了 jQuery 中的进度条和加载器； 绝对值得一游。 一旦打开演示页面，或者如快照所示，很难相信仅使用 SVG 就可以实现如此精确的设计细节。 但这是真的； 在这个库中你找不到任何一行 CSS 或 JavaScript。 这进一步强化了这样一个事实，即 SVG 是现代网页设计开发的绝佳选择。 12 种装载机可供选择，您可以根据需要进行定制。

初学者的 CSS 动画

动画使网站或正在使用它们的应用程序充满活力。 越来越多的现代设计使用动画也就不足为奇了。 它们更擅长吸引用户的注意力。 它们还可用于更详细地解释您要提供的内容。 我们过去写过 CSS 教程和资源。 对此类内容的需求确实飙升，我们非常乐意回馈社区和那些缺乏自己寻找最热门内容所需技能的人。 考虑到这一点，我们也了解实际学习某些东西以真正了解其目的及其工作方式的重要性。

CSS 动画是首先应该了解的事情之一，以便在设计中使用实际动画时拥有更好的决策技能。 我们这里来自 Rachel Cope 的示例教程是一个很好的、易于遵循的 CSS 动画指南，您可以使用这些方法在视觉上实现动画效果。

SVG 圣诞节

想真正了解 SVG 的局限性吗？ 您应该检查这个精彩的 CSS 圣诞动画的源代码。 源代码包含用于制作动画的所有元素和代码。 您还可以使用这些代码示例来创建自己的东西。 除此之外，这是一个很好的 SVG 动画示例，具有所有复杂性。

SVG 动画和 CSS 转换：一个复杂的爱情故事

当开发人员谈论现代 CSS 功能时，他们不只是谈论每个功能的复杂构建，或者从新功能中创建出色的结果是多么困难。 大多数时候，开发人员忙于讨论和解决有关浏览器的问题，以及浏览器如何对新功能做出反应，例如 CSS 转换和 SVG 动画。 来自 GreenSock 的 Jack Doyle 客座撰写了一篇 CSS-Tricks 内容，带领读者踏上 SVG 动画和 CSS 变换属性之旅，以更好地理解，并提供足够的示例供您随时开始构建。

SVG动画简介

Jon McPartland 的 SVG 动画指南可以追溯到 2013 年。 尽管如此，对于任何新的 SVG 实验者来说，深入研究它并了解 SVG 在现实世界中的实际工作方式以及应该采取什么样的措施是很重要的在开始创建您自己的动画时使用。 该指南分为三个不同的部分：讨论标记、创建动画的过程，以及在我们工作流程中已经可以访问的内容的基础上进行构建。 它还包括一个关于实际现实世界 SVG 限制的简短段落。 如果您喜欢这篇文章的风格，请查看更多 Big Bite Creative 内容帖子； 有大量关于 CSS 和前端开发的内容可供免费阅读。

使用 GreenSock 制作 SVG 动画

Allan Pope 分享了他对一个已经建立的平台的想法：GreenSock 动画平台 (GSAP) 以及如何通过应用的 SVG 动画使用它为您的矢量文件提供第二次机会。 GSAP 具有使大多数其他引擎看起来像廉价玩具的功能。 动画颜色、贝塞尔曲线、CSS 属性、数组、滚动等等。 舍入值，即时平滑反转，使用相对值，自动适应 getter/setter 函数，使用几乎任何缓动方程，并像专业人士一样管理冲突的补间。 定义回调、以秒或帧为单位的补间、轻松构建序列（即使补间重叠）、重复/悠悠球等等。 如果您之前听说过 GSAP 并希望在该平台上有一个可靠的介绍，Allan 的这篇文章是最好的起点。 您可以在评论部分找到更多见解。

SVG 马戏团

SVG Circus 是一个网页，它允许开发人员和设计人员通过为浏览器创建加载器、旋转器和其他面向循环的对象来挖掘现成的 SVG 潜力。 这是了解 SVG 以及如何修改动画以及将这些动画直接导出到您的项目中的一个很好的起点。 例如，您可以创建一个加载器，然后使用输出来了解网站命名的每个功能或“技巧”，以应用于您的其他项目和元素和/或动画。

SVG 动画指南 (SMIL)

我们确实说过我们会提到 SMIL，尽管有人说 SMIL 的可用性正在下降，但毫无疑问，您会发现网站和应用程序仍在生产中使用 SMIL 来提供 SVG 动画效果。 这篇来自 Sara Soueidan 的关于 CSS-Tricks 的长篇客座文章深入探讨了 SMIL 的技术细节，以及完成可用于生产的 SVG 动画项目的过程。 据我们所知，帖子中的所有示例仍然是最新且有效的。

高级 SVG 动画

当今网络上最好和最伟大的 SVG 动画示例的惊人综述。 当然，在 Codepen 等网站上还有更多可用的内容。 但是，我们希望您自己探索此类示例。 我们试图将重点转向更详细的方法。 这是为了确保您不只是查看精彩动画及其工作流程的示例。 但是，您也在学习如何重新创建每个动画，并可能对其进行扩展。 现在是时候向高端市场倾斜，并通过完全准备好和完全优化的 SVG 文件来获取一些不会附带教程和指南的出色 SVG 动画，您可以开始在您的项目中使用这些文件。 选择的多样性不是很好，但也许您会发现可以在您的项目之一中实际使用的东西。

SVG 加载器

您并不总是想在您的网站上放置加载程序，但是当您这样做时，您需要确保它们足够酷以吸引访问者的注意力。 使用 SVG Loaders（十二个基于矢量的加载程序包），您将轻松实现。 毕竟，您不需要从头开始创建这些很酷的动画，而是使用预定义的版本并将它们合并到您的项目中。 流畅的动画、小文件、只有 CSS 动画、视网膜就绪和可编辑的颜色都是 SVG Loader 的不同功能。 此外，每个动画加载器也适用于更流行的网络浏览器和设备。

LivIcons 进化

如果您正在寻找动画矢量图标，您将需要进一步研究 LivIcons Evolution。 LivIcons Evolution 收集了 379 个图标并且数量还在不断增加，它确保提供所有必要的和更多的图标。 此外，每个图标还具有五种不同的设计风格，因此您可以更快地找到合适的外观。 惊人的设置、与不同屏幕的兼容性、实用的配置工具、悬停效果以及可编辑的颜色和大小是 LivIcons Evolution 的一些特色。 为方便起见，套件中还包含独有的双重和三重动画功能。

动画 SVG 插图包

SVG 动画包由四种不同的动画组成。 一个背着喷气背包的飞行男孩、从一个地方飞到另一个地方的飞机、一只乌龟和一个摄影师。 拿着这个包并根据需要将其应用到您的项目中。 您可以完全控制每个插图元素的着色和大小。 代码库针对清洁度进行了优化，管理起来会很愉快。

SVG 中的动画 3D 文本样式

3D 文本是在设计中实现个性化的好方法。 虽然在向您的网站添加动画 3D 文本效果时，这将它提升到一个新的水平！ 该套餐包括十种不同且独特的款式可供选择。 就颜色、文本和字体而言，您可以以无限方式自定义它们。

错误代码 404 动画 SVG

HTTP 错误 404 页面有许多不同的风格。 我们通过阅读我们自己的一位作者在一月份的帖子中了解到这一点，他列出了您可以在网络上找到的 30 个最具创意的 404 错误页面设计。 为了扩展该列表，我们为 404 错误页面包含了这个非常棒的 SVG 动画！ 动画是使用 Snap.svg 库构建的。

16 个动画 SEO 图标

SEO 和 SEM 专家，这次我们为您准备了一些特别的东西！ 这是一包 16 个图标，属于 SEO 和 SEM 类别。 这些图形将为您的项目无限缩放。 它们还为您提供您的设计所渴望的清晰外观和体验。 图标分为以下几类：网站优化、定位、智能手机搜索引擎优化、云存储、分析
奖项、网络、社交媒体、电子邮件营销、SEO/SEM、按点击付费、代码优化、数字营销、使命、监控、联盟营销。 我们确信每个人都能享受到一些乐趣。

动画 SVG 浏览器图标

最后，我们为您提供了一个示例，说明如何使用 SVG 将浏览器图标转换为动画体验。 Google Chrome、Safari、Internet Explorer、Mozilla Firefox 和 Opera 都是这个 JavaScript SVG 动画包的一部分。 请查阅演示页面以了解有关每个浏览器图标使用的转换的更多信息。

您在 SVG 动画中寻找什么？

多么惊人的综述！ 我们对其中的一些例子感到震惊。 他们再次证明，网页设计正在增长，而且增长速度相当快。 从简单的动画标志，到我们可以看到将来集成到游戏应用程序中的复杂设计。 SVG 的未来一片光明，你会成为其中的一份子吗？