如何创建专业的 SVG 动画

已发表: 2022-12-27

如果您希望通过动画为 Web 项目增添一些活力，您可能想知道如何使用可缩放矢量图形 (SVG) 创建具有专业外观的动画。虽然您可以找到许多用于创建简单 SVG 动画的在线工具，但如果您希望创建更复杂的东西或为您自己的网站量身定制，则需要付出更多的努力。在本文中，我们将从头到尾探索如何创建具有专业外观的 SVG 动画。我们将首先讨论使用 SVG 制作动画的一些好处。然后，我们将介绍使用流行的 GreenSock 库创建动画的过程。最后，我们将了解如何优化 SVG 动画的性能。到本文结束时，您应该对如何创建自己的专业 SVG 动画有了很好的了解。

万维网联盟 (W3C) 于 1999 年发布了可缩放矢量图形 (SVG) 作为开放标准。功能强大的 <path> 元素对于使用 SVG 创建动画元素至关重要。使用路径创建几乎任何 2D 形状都很简单。路径元素包含一系列分配了 ad 属性的绘图命令。您可以按照这些说明了解您的笔接下来会去哪里。您可以使用其他绘图命令制作复杂的形状，例如二次贝塞尔曲线。两个非常强大的 SVG 属性，stroke-dasharray 动画和 stroke-dashoffset，可用于在您的路径上创建范围广泛的动画和效果。

它就像在要绘制要在 Vivus 中创建的对象的元素中添加一个 ID 一样简单。 Snap.svg 绘制SVG 图像的能力使它们易于使用。它们由 JavaScript 动画，调用它们很简单。生成用于为 SVG 动画创建 HTML 元素的代码。 CSS 属性中包含的动画播放状态属性允许您确定动画是开始还是停止。当配置你的 CSS 时，你可以为一个元素包含一个类，然后为它添加一个伪类。如果您想要对 SVG 图像进行动画处理和操作，则可能需要考虑以下资源。

使用 Adobe Illustrator，您可以制作 sva 文件。可以使用您可能熟悉的 Adobe Illustrator 创建简单的SVG 文件。尽管在 Illustrator 中制作 SVG 文件的方法已经有很长一段时间了，但 Illustrator CC 2015 添加并简化了这些功能。

如何制作 Svg 动画？

您可以通过选择帧然后启用 SVG 动画导出来为帧设置动画。使用此节点为该帧中的 X、Y、X、Y、Y、缩放、旋转和旋转设置动画。使用内置的实时预览来调整你的动画，直到你喜欢你所看到的。

本教程将引导您完成使用 SVGator 等工具创建元素并为其设置动画的过程。时间线的大小、位置和持续时间都可以更改。您必须选择变换工具才能查看每个元素的原点。如果单击该按钮，您将能够访问动画师。对于 Windows，它是 CTRL 或 CMD，而对于 Mac，它是 ctrl 或 CMD。您可以选择所有元素，然后右键单击并选择组，或者您可以使用快捷键 ctrl G 或 cmd G。在画布的左上角，您还可以将组的原点指定为默认值。通过双击组的名称，我们将其居中并重命名。

当您准备好制作动画时，选择文件夹并返回到动画师。我们将使用这些箭头通过选择和使用它们来选择它来重新排列元素列表中的组。该文件夹将被缩放，所以让我们在这样做之前将它拖到这里。该图标应该在此文件夹中可见，因为我希望它显示为位置动画器。单击此按钮时，您将收到动画预览。在开始导出之前，您可以在此处预览各种导出选项。当您用鼠标在 SVG 上滚动或单击动画时，它会在加载或鼠标悬停时开始。标记您的项目将帮助您组织它们。

如何在 Html 中创建动画 Svg？

要指定透明度的范围，您必须首先选择重要的元素，然后相应地对其进行编辑。为 SVG 动画过程中的每个步骤创建一个关键帧和一个名称。要保持属性不变，请为元素分配属性和动画。之后，在编辑完所有元素后立即保存最终文件。

Svg 交互性：在您的网站上吸引用户的关键

为了让您的用户与您的网站保持互动，您必须不断与之互动。使用SVG 交互性，您可以为用户增加身临其境的体验，鼓励他们在您的网站上停留更长时间。您可以通过多种方式以交互方式为您的 SVG 动画制作动画。要响应用户交互，您可以使用触发器或触发动画。有触发器，可以像按钮一样简单，也可以像自定义事件一样复杂。当您使用触发器时，您可以确保无论用户如何与页面交互，您的动画始终以相同的方式响应。通过添加交互性，您可以更轻松地更改动画的外观。可以创建响应特定用户操作的动画，而不是简单地单击按钮或键入文本。您可以使用触发器和交互来创建响应用户输入的复杂动画。通过利用这两种类型的交互，您可以为您的用户创造真正独特的体验。

Svg 适合动画吗？

使用称为 SVG（可缩放矢量图形）的基于 XML 的矢量图像格式。它可以无限缩放并具有交互性和动画功能。由于其文件大小比其他格式小，因此它是徽标、图标、图表、动画和其他网络插图的最佳工具。

基于 XML 的矢量图形格式是矢量图形。它可以容纳多少用户没有限制，并且它支持交互性和动画。这种格式提供了许多优势，包括使您的动画在任何屏幕尺寸（甚至是高分辨率显示器）上都清晰且像素完美的能力。如果您使用矢量图而不是 JPG 或 PNG 图像，您将能够将文件大小减少多达 200%，同时保持高质量和可扩展性。因为它使用基于 XML 的标记，它描述了二维矢量图形，这是 SVG 的一个显着特征。尽管它们很受欢迎，但 GIF 已经过时且效率低下。通过用轻量级和快速加载的 VG 文件替换它们，您可以提高公司的竞争优势。

缩放、保持分辨率独立性和以小尺寸存储文件的能力，以及使用颜色和透明度的能力，只是使用 SVG 的部分优势。由于其基于代码的结构，它是一种可索引格式，可以被搜索引擎读取、抓取和索引。它可以在 CSS 和/或 JavaScript 中进行编辑和编写脚本，从而可以在简单的文本编辑器或代码生成器中轻松控制图形样式。如果您将 SVG 包含在 HTML 中，那么无论它是否直接嵌入到 HTML 中，Google 都会为它们编制索引。您可以使用动画 SVG 来创建引人入胜的网站内容。 90% 的消费者表示，具有互动元素的网站会增加他们回头的可能性。如果您还没有创建交互式 SVG ，您应该试一试。

你不必是天才才能做到这一点。用户可以通过使用动画徽标来了解页面中最重要的部分。流畅的动画创造了一种愉快的体验，让他们不断地滚动、点击、观看和阅读。移动元素让用户从走进屏幕的那一刻起就对屏幕感兴趣，这是科学支持的设计趋势的核心。对于特定的应用程序，会生成微妙但有效的动画。当您在激活动画功能后与页面上的元素交互时，您会收到视觉反馈或交流感。要创建对动作的视觉响应，请为精心制作的元素引入微妙的动作。

预加载通过显示首先加载了多少网站来减少加载时间。在线宠物商店可能有一个动画预加载器，供访客与他们可爱的猫科动物或狗一起享受。由于您网站的背景，加载您的网站更加困难并导致延迟。在探索无限可能性时创建微妙或动态的动画。如果使用得当，动画图标可以为用户带来多种好处，包括改进的用户体验和更具吸引力的外观。使用与其他元素分层的精美图标可以为您的网站增添一点视觉效果。为了鼓励用户继续与您的网站互动，您可以有效地使用悬停效果和微妙的移动来吸引他们点击这些元素。

尽管现在无需编码即可完成矢量动画，但它在您的日常生活中永远不会过时。如果您在作品中添加微妙的动画效果，您可以大大增加成功的机会。与文本和图像相比，用户更喜欢动画，因为它们更容易记住并且更容易理解。可以在网站上提供带有解释器动画的预订或付款过程的解释。带有可爱插图的漂亮交互式地图可以成为帮助人们浏览页面的好方法。信息图是教育公众了解各种动物物种和传播信息的最佳方式。简单而巧妙的绘图是保持页面干净时尚的有效方法，并且可以以多种不同方式使用。

路径动画可以添加到徽标、图标、边框和其他线条插图中。由于行进的蚂蚁动画由移动的点线或虚线组成，您可以将其用作指南、地图上的轨迹或链接元素。尽管 SVG 文件很小，但如果包含大量元素，它会显着增大。然而，尽管大多数现代浏览器都支持它，但它仍不兼容 IE8 及更低版本等旧版浏览器。如果您需要制作更复杂的文件，请使用 PNG 或 GIF 等光栅格式。

您可以使用任何浏览器查看任何格式的矢量图形，包括 SVG。图形驱动程序用途极为广泛，可用于范围广泛的图形应用程序。除了缺点之外，使用 SVG 也很有意义。如果对象包含大量小元素，则文件大小可能会很大，如果对象包含大量小元素，则仅读取图形对象的部分将很困难。因此，它可以提高您的旅行速度。尽管如此，使用 SVG 比使用 SVG 有一些优势。

Svg 动画示例

以下是使用可缩放矢量图形 (SVG) 创建的动画示例：此示例显示了一个简单的“弹跳球”动画，其中为圆形元素指定了沿 x 轴的速度。在动画的每个滴答声中，圆的位置根据其速度更新。当圆到达 SVG 视口的边缘时，它被赋予一个负速度，以便它会在另一个方向反弹回来。

动画通过提供视觉反馈和引导用户完成任务来改善用户体验，而且动画非常有趣。在本文中，我们将学习如何使用 HTML5 和 CSS 创建轻量级、可缩放的动画。加载、上传、菜单切换、暂停、播放和点亮登陆页面只是一些常见的例子。这些属性直接在 SVG 上设置，而不是 CSS 样式属性。如果我们想让一个形状出现在背景中，我们必须将它包含在 SVG 文件的顶部。考虑已经设置的内容，以便您可以为页面加载过程中出现的内容做好准备。 SVG 的存在通过减少 HTTP 请求的数量来提高性能。

CSS 样式可以嵌套在 >style> 标签中，该标签位于 >svg> 标签内。我们将在本课中讨论两种类型的动画，每种都有自己的一组控件。在关键帧期间，条形图会在时间轴中的四个位置沿 Y 轴移动比例。第一个数字代表动画的长度，而第二个数字代表延迟。由于每个元素都添加了 ID，因此 SVG 和 HTML 中的所有三个字符很容易成为 Sass 的目标。如您所见，我将使用 SVG 来创建汉堡菜单。用户悬停鼠标，导致顶部和底部矩形旋转。

它也被称为动画文本。最后的演示是一个动画波浪文本，世界上的每个字母似乎都以波浪模式移动。随着 Web 前端变得越来越复杂，Web 浏览器需要更多功能。在本文中，我们将使用以下工具为 sva 制作动画。 LogRocket 可以帮助您跟踪您的客户端在生产中如何使用 CPU、内存和其他资源，并且它是免费使用的。

Svg 动画 Html

SVG 是一种矢量图形格式，可用于创建动画。 HTML 是一种可用于创建网站的标记语言。这两种技术可以一起用于创建动画网站元素。

本教程演示了如何使用 HTML 和 CSS（如果需要）制作简单的 SVG 动画。许多（如果不是全部的话）Web 框架可以以足够抽象的方式在其中实现这些动画。可以根据需要创建具有多个移动部件的动画。如果您已经决定继续执行第 3 步，请跳过此步骤并直接执行第 2 步。如果您想要为 SVG 中不是其自身路径的部分设置动画，则需要直接在第 2 步中对其进行编辑2. 您导出的文件将在表单的描述中包含一个附加元素（任何自定义颜色，如果适用），该元素包装在 >defs> 标签中。导出我的 SVG 后，我将自己的 ID 添加到 >path>>> 标签，然后使用以下字符列表创建了一个动画 SVG：这些动画让您可以更好地控制您的环境。从根本上说，您可以为几乎任何 CSS 属性（例如不透明度、颜色以及 2D 和 3D 转换）和您想要的页面的任何部分设置动画，无论您是为 2D 还是 3D 图像设置动画。

动画 Svg 路径

Animate SVG Path是为您的网页添加一些生命的好方法。通过使用此技术，您可以创建将遵循您定义的路径的动画。这可用于创建沿定义路径移动的动画角色或对象。

Louis Hoebregts (@Mamboleoo) 在 CodePen 上发起的 CodePen 挑战是对 SVG 路径上的任何内容进行动画处理。由于 SVG 不是由彩色像素组成，而是由可以在屏幕上解释和显示的数学函数组成，因此它们被称为矢量图像。在本文中，我们将回顾函数 getPointAtLength() 并展示我们如何将 SVG 路径的数据用于创意目的。在此动画的每一帧上，我们都会为一个新的圆形元素制作动画，该元素将嵌入路径中。每一帧，createParticle 函数都会生成一个会弹出和淡出的新粒子。为了使动画更逼真，我还添加了保险丝笔划偏移的动画。您现在可以使用任何其他允许您应用这些坐标的方法沿 SVG 路径提取点的坐标。每个向量的动画都会有一个延迟，该延迟是根据它自己沿路径的距离计算的，从而产生很好的粒子流。你可以在 Twitter 上和我一起学习如何做到这一点；我很想看看你的想法。

如何在 Svg 中为路径设置动画？

您必须使用 stroke-dasharray 属性在 JavaScript 中设置破折号（和间隙）长度，以便为这条路径设置动画，就好像它在屏幕上缓慢而平滑地绘制一样。因此，曲线中每个破折号和间隙的长度都等于整个路径的长度。

沿直线或曲线动画对象

您可以通过转到“动画”>“路径”>“直线”选项卡，以您想要的方向为对象设置动画。可以选择沿线的任何其他点的起点和终点，您也可以选择在那里开始和结束动画。
徒手画一条线来为对象创建一条弯曲的路径。要为曲线设置动画，请选择对象，然后单击“动画”选项卡。单击曲线上的起点和终点时，动画会在曲线上的任何其他点开始和结束。

你能为 Svg 制作动画吗？

动画 gif 或视频比笨重的 gif 或笨重的视频需要更少的时间来加载。您还可以创建简单的动画，而无需在您的网站上使用其他 JavaScript 库。

Adobe Animate：创建图形和动画的最佳方式

使用 Adobe Animate，您可以生成高质量的图形和动画。无论您是为项目创建徽标、海报还是动画，Adobe Animate 都提供您需要的功能。

Smil 被弃用了吗？

这不是删除 SMIL 动画的实际方法。但是，它不是基于 SMIL，因为有现代规范选项。所有现代浏览器都支持它。

轻松制作漂亮的 Svg 动画

有很多方法可以轻松创建漂亮的 svg 动画。最流行的方法是使用像 GreenSock 或 Snap.js 这样的库。这些库使创建看起来很棒的复杂动画变得容易。

它使设计师和艺术家能够创建可以无限扩展而不会降低质量的可视化 Web 内容。尽管需要更多的实践和学习，但所有新网站都在很短的时间内实施了该方法。图像可以缩放到任何屏幕分辨率，而 GIF 等图像格式将保持屏幕的默认分辨率。 Sara Soueidan 的半小时视频解释了为什么 SVG 在某些情况下优于 GIF，以及为什么在使用 HTML 以外的图像文件格式时应始终使用 GIF。 Chris Coyier 解释了如何通过三个简单的步骤为您的视觉 sveiw 文件制作动画。炫酷的 Project Deadline 动画描绘了一位忙碌的自由职业者在努力赶上即将完成的项目的最后期限时慢慢接近终点线的死亡。她目前正在从事该项目或正在完成该项目。

在本课中，来自 Codrops 的 Mary Lou 将教您如何创建自己的动画SVG 图标。 Luis Manuel 使用 Segment 库通过使用 SVG 的路径笔划从任何类型的文本创建漂亮的字母动画。 visvius.js 库是一种仅通过确定哪个文件需要制作动画以及应该如何制作动画来在 SVG 文件上“绘制动画”的库。该库不支持单行 CSS 或 JavaScript。从 12 种装载机中进行选择，并根据您的需要进行自定义。颜色可以按贝塞尔曲线排序，CSS 属性可以按数组排列，滚动条可以按颜色排列。 GreenSock 动画平台 (GSAP) 包含的功能使其他引擎与其同类引擎相比看起来像廉价玩具。

SVG 马戏团网页允许开发人员和设计人员创建加载器、微调器和其他可由浏览器使用的面向循环的对象。它详细介绍了 SMIL 的基础知识以及使用它完成生产就绪项目的过程。 LivIcons Evolution 不仅提供了 379 个图标并且还在增加，而且还提供了所有必要的附加功能。您会很快获得正确的外观，因为每个图标都有五种不同的设计风格。它包含一项功能，允许您同时为两个或多个对象设置动画。动画 SEO 图标是一组 16 个用于 SEO 和 SEM 的图标。以下示例演示了如何使用 SVG 将浏览器图标转换为动画体验。所有 Google Chrome、Safari、Internet Explorer、Mozilla Firefox 和 Opera 都包含在这个 JavaScript SVG 包中。