纯 HTML 动画 - 使用 <animate> 为 SVG 添加动画
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
在这个动画标记中，没有使用 CSS 或 JS 来实现动画效果。
长期以来，大家都在谈论 CSS 和 JS 动画或动画库。我很好奇为什么没有人谈论 HTML<animate>标签。
我希望一些业内大咖能更早animate地推广SVG的这一特性，从而促进更多相关开发。不过，亡羊补牢，为时未晚。我发起这项活动，旨在提高前端社区对animateSVG这一特性的认识。
我们先来简要了解一下SVG。
什么是SVG？
- SVG 代表可缩放矢量图形。
- SVG 用于定义 Web 上的矢量图形。
- SVG 以 XML 格式定义图形
- SVG 文件中的每个元素和每个属性都可以进行动画处理。
- SVG 是 W3C 推荐格式。
- SVG 可以与其他 W3C 标准（例如 DOM 和 XSL）集成。
为什么要用SVG？我来告诉你。
- 这是一个矢量。
- 由于是矢量图形，因此可以缩放。
- 文件体积更小。（平均比png文件小5倍。）
- 使用 CSS 和 JS 即可轻松修改。
- 易于制作动画 :) 耗时更短。而且无需任何动画软件或图像处理软件。
注意：
如果您是 SVG 的初学者，请从Sara Soueidan 的博客中获取一些关于 SVG 坐标系和变换的有用信息。
好了，废话不多说，让我们开始吧。打开你最喜欢的代码编辑器，然后启动浏览器。本教程中使用的是Sublime Text 3和谷歌 Chrome 浏览器。
我们将一步一步来。
步骤 1：准备 html 结构。
如果您熟悉Emmet，只需html:5在启用 Emmet 的编辑器中输入并执行即可；对于 Sublime Text，执行键是Tab 键。
- 或者 -
复制以下代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG wave animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Wave SVG Animation -->
<div class="waves"></div>
</body>
</html>
步骤二：画一个波浪形。
我不太擅长画画，但我可以告诉你，三次贝塞尔曲线可以看作是一种波。所以，我们来画一条三次贝塞尔曲线。
<div class="waves">
<svg width="100%" height="200px" fill="none">
<path
fill="#454599"
d="
M 0 67
C 273,183
822,-40
1920,106
V 359
H 0
V 67
Z">
</path>
</svg>
</div>
结果应该类似于这样：
这里，我使用 CSS 设置了背景样式并定位了 div 元素。你可以在页面底部的CodePen链接中找到 CSS 代码。
首先，让我解释一下这些数字和字母的含义。
欢迎来到矩阵！
你需要知道矩阵中那些绿色数字雨的含义。（忽略它）
好的，它有三个属性<svg width="100%" height="200px" fill="none">，它们本身解释得很清楚。
此外，元素内部<svg>还有一个元素<path>，并附加了两个属性：`color`fill和 `color` d。你仍然可以理解，我们正在用<path>`color` 元素绘制路径，并用其中的 `color` 属性填充它fill。但是，等等！这是怎么d ="1230948713294"回事？这正是你的问题所在，对吧？而这正是我希望你理解的，因为这是我们将在本教程中实践的内容。
曲线汉恩
SVG 中可以绘制三种不同的平滑曲线。
- 二次贝塞尔曲线
- 三次贝塞尔曲线
- 弧
本教程我们将使用三次贝塞尔曲线。那么，让我们先来了解一下它的工作原理。
如果您有使用 Illustrator 或 Sketch 等软件的经验，或者熟悉钢笔工具之类的工具，您就能轻松理解。但如果您没有使用过钢笔工具，也无需担心。我会尽我所能解释贝塞尔曲线的工作原理。
贝塞尔曲线有两个主要点，我们称之为起点和终点，每个主要点都有其控制柄，我们称之为控制点。
让我们通过下图来理解。
上图中：
M (x,y)是起点，
C (dx1,dy1)是起点的控制点
C (x2,y2)是终点；
C (dx2,dy2)是终点的控制点。
这意味着，
M 0 67 M x,y
C 273,183 C dX1,dy1
822,-40 --> dx2,dy2
1920,106 x2,y2
重要提示：本例中使用的是绝对贝塞尔曲线C 273 ...。如果您想使用相对贝塞尔曲线，可以将**大写*改为C 273 ...小写， c 273...但需要修改定义点的方式。*
Mozilla开发者社区提供了一份关于绝对曲线和相对曲线的优秀解释指南，请访问Mozilla文档中的“三次贝塞尔曲线”部分。
步骤 3：开始挥动波浪。
在开始制作波浪动画之前，让我们快速回顾一下我们将如何制作。
我们将使用 SVG 元素来实现这个效果<animate>。此外，我们还会用到<animate>元素的一些属性。首先，为了让波浪持续波动，我们将使用 `<div>`属性repeatCount="indefinite"。其次，我们将通过添加 `color` 属性为波浪填充颜色fill="#454599"。之后，我们将使用 `<div>` 属性定位到元素的` dcolor` 属性，并通过添加 `dual` 属性定义动画的持续时间。接下来，我们将讨论 `dual`属性。<svg>attributeName="d"dur="12s"values=""
<animate
repeatCount="indefinite"
fill="#454599"
attributeName="d"
dur="12s"
values=""
></animate>
values=""根据使用上下文的不同，属性可以用多种方式编写。另一方面，如果解释器找到的是列表的规范values，则会忽略属性的值to。更多详情，推荐阅读相关文章。fromby
在本例中，我们通过修改元素d的属性<svg>来改变曲线。我们还定义了持续时间为 12 秒，这意味着我们可以将迭代分成 4 个阶段，每个阶段持续 3 秒。现在开始……
values="
M0 77
C 473,283
822,-40
1920,116
V 359
H 0
V 67
Z;
*second and third iteration will go here*
M0 77
C 473,283
822,-40
1920,116
V 359
H 0
V 67
Z;
"
你可能想知道为什么我两次使用相同的值？
这是因为在动画循环的第四次迭代结束时，我们会回到起始位置，而在第二次和第三次迭代期间，我们会对形状进行一些移动。
现在我们来制作第二版和第三版动画。
第二次迭代
M0 77
C 473,-40
1222,283
1920,136
V 359
H 0
V 67
Z;
第三次迭代
M0 77
C 973,260
1722,-53
1920,120
V 359
H 0
V 67
Z;
基本上，我们在迭代之间修改点和柄的值，<animate>元素将根据属性定义的动画持续时间平滑点的变换dur="..."。
所以，最终的代码应该类似于这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG wave animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Wave SVG Animation -->
<div class="waves">
<svg width="100%" height="200px" fill="none">
<path
fill="#454599"
d="
M0 67
C 273,183
822,-40
1920.00,106
V 359
H 0
V 67
Z">
<animate
repeatCount="indefinite"
fill="#454599"
attributeName="d"
dur="15s"
values="
M0 77
C 473,283
822,-40
1920,116
V 359
H 0
V 67
Z;
M0 77
C 473,-40
1222,283
1920,136
V 359
H 0
V 67
Z;
M0 77
C 973,260
1722,-53
1920,120
V 359
H 0
V 67
Z;
M0 77
C 473,283
822,-40
1920,116
V 359
H 0
V 67
Z
">
</animate>
</path>
</svg>
</div>
</body>
</html>
哦，等等……因为这是我的第一篇文章，所以我准备了一个小惊喜。
让我来告诉你如何给波浪添加渐变效果。
为了添加渐变，我们将在元素<linearGradient>之前添加一个元素<path>。此外，我们将为元素提供一些属性，<linearGradient>例如id渐变的起始位置和结束位置，如下所示<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">。
在元素内部<linearGradient>，我们将定义stop要在渐变中使用的颜色点。有关在 SVG 中使用渐变的更多详细信息，请阅读 Mozilla 开发者网络上的这篇文章：SVG 中的渐变元素。
可以在元素的属性中id使用。linearGradient<path>fill=""
请查看以下代码。
<svg width="100%" height="200px" fill="none">
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#00B4DB" />
<stop offset="50%" stop-color="#224488" />
<stop offset="100%" stop-color="#0083B0" />
</linearGradient>
<path
fill="url(#grad1)"
d="
M0 67
C 273,183
822,-40
1920.00,106
V 359
H 0
V 67
Z">
</path>
...
最终输出：看看这支笔
文章来源：https://dev.to/theliquidcharcoal/pure-html-animation-animate-svg-with-animate-2a5m