序言：首先，这是一篇学习 SVG 及 JS 动画不可多得的优秀文章。我非常喜欢 Ana Tudor 写的教程。在她的教程中有大量使用 SVG 制作的图解以及实时交互 DEMO，可以说教程的所有细枝末节都可以成为学习 SVG 以及 JS 画图的资料。另一方面，这篇教程也非常枯燥，因为教程的主要篇幅是关于几何图形的数学计算，不过上过中学的人都能理解。全篇翻译完，我觉得我几乎重新温习了一遍中学的几何知识，顺便学了点英语表述。最后还要感叹一下，想要灵活运用 SVG 画图，深厚的数学功底是不可或缺的，同时还要有敏锐的思维和牢靠的记忆力。
原文：
译者：nzbin
在 , 我讲解了如何使用纯 JavaScript 实现从一个状态到另一个状态的平滑过渡。一定要看看这篇文章，因为我会引用一些我详细解释过的东西，比如演示示例、各种定时函数公式以及如何从结束状态返回初始状态而不需要反转定时函数。
最后一个例子展示了一个从悲伤到高兴的嘴形，它是通过嘴形 path 的 d 属性实现的。
利用路径数据可以获得更有趣的结果，比如一颗星星变成一个心。
我们即将编写的星星变心的动画。
想法两个形状都是使用五条 三次 Bézier 曲线 创建的。下面的交互式演示显示了各个曲线和这些曲线连接的点。单击任何曲线或点都会高亮显示，与它对应的另一个形状的曲线/点也会高亮显示。
See the Pen star vs. heart: highlight corresponding cubic Bézier curves on click by Ana Tudor (@thebabydino) on CodePen.
注意，所有这些曲线都是三次曲线，不过其中一些曲线的两个控制点是重合的。
星星和心的形状都非常简单，但制作起来还是会有一定难度。
开始编写代码正如在 脸部动画 中看到的，我经常使用 Pug 生成这样的形状，但在这里，因为我们生成的路径数据也需要用 JavaScript 来制作路径动画，所以全部使用 JavaScript，包括计算坐标并把数值放入 d 属性中，这似乎是最好的选择。
这意味着我们不需要写太多的标签：