如何将一个对象的形状动画化为另一种形状。
路径对象中有一个规则的圆圈。还有形状，它有许多曲线和非常不同的结构。对如何对从一个对象到另一个对象的过渡进行动画处理的问题感兴趣。
#shape {
fill: gray;
}
#circle {
fill: red;
}
#circle-path {
fill: yellow;
}<svg xmlns="http://www.w3.org/2000/svg" width="146.46799mm" height="138.86078mm" viewBox="0 0 146.46799 138.86078" version="1.1">
<path id="shape" d="m 57.994787,35.937017 c -3.565275,22.228189 85.795973,-13.105122 84.666663,-11.339285 -19.96273,35.147623 1.3138,49.902207 26.45833,62.744045 0.99272,0.389339 -25.82829,18.898863 -44.60119,24.190473 -4.04384,1.38725 -41.098315,2.80074 -28.726185,-34.017851 0.136954,-0.718762 -53.549741,5.805982 -53.672618,3.023809 0,0 1.700693,-26.444115 -9.827381,-40.065476 -6.889193,-8.358279 -2.234786,-15.57944 12.095239,-19.654762 10.612461,-2.556252 15.089861,2.556323 13.607142,15.119047 z"/>
<circle id="circle" cx="35.340775" cy="146.37648" r="12.662203"/>
<path id="circle-path" d="M 74.650297,107.63393 A 12.662203,12.662203 0 0 1 61.988094,120.29613 12.662203,12.662203 0 0 1 49.325891,107.63393 12.662203,12.662203 0 0 1 61.988094,94.971724 12.662203,12.662203 0 0 1 74.650297,107.63393 Z"/>
<animate xlink:href="#shape" repeatcount="indefinite" attributeName="d" dur="3s" values="M 74.650297,107.63393 A 12.662203,12.662203 0 0 1 61.988094,120.29613 12.662203,12.662203 0 0 1 49.325891,107.63393 12.662203,12.662203 0 0 1 61.988094,94.971724 12.662203,12.662203 0 0 1 74.650297,107.63393 Z; m 57.994787,35.937017 c -3.565275,22.228189 85.795973,-13.105122 84.666663,-11.339285 -19.96273,35.147623 1.3138,49.902207 26.45833,62.744045 0.99272,0.389339 -25.82829,18.898863 -44.60119,24.190473 -4.04384,1.38725 -41.098315,2.80074 -28.726185,-34.017851 0.136954,-0.718762 -53.549741,5.805982 -53.672618,3.023809 0,0 1.700693,-26.444115 -9.827381,-40.065476 -6.889193,-8.358279 -2.234786,-15.57944 12.095239,-19.654762 10.612461,-2.556252 15.089861,2.556323 13.607142,15.119047 z"/>
</svg>实际上，我理解发生这种情况的原因，到目前为止，解决这个问题的方法似乎是从一种状态到另一种状态的手动调整。将形状拟合到圆对我来说没有问题，但是如果我的形状有超过100 个点和曲线，那么将它们中的每一个至少大致拟合到圆当然是不明智的。这就是为什么我要问是否有可以解决这个问题的东西？
从一条路径到另一条路径，这根本不相关。
TL;博士
Многа букоф如果没有时间阅读或不情愿，我将立即展示如何自己制作人物变形动画的结果：所有动画示例都是响应式的，并且可以在所有现代浏览器中运行，除了
IE.Edge我将在链接中引用我对线程的评论：
所以在创建两个的时候需要满足所有这些条件，
path然后才能使用JS做动画。不要寻找魔杖，它就在你的手中。确实，还有另一个KUTE.js脚本，如果
path它们不完全满足上述条件，则允许您制作动画，特别是不允许路径完整性。然而，它似乎得到了回报。path变形形状的创作技术如果您仔细遵循这些说明，那么您将获得任何具有复杂变形的动画。
第一次没有错误就很难做到，需要使用矢量编辑器的最低技能，但是当你走这条路时，任何复杂的动画都将在 10-15 分钟内准备好。
最好从一个简单的图形（在这种情况下是一个圆形）变成一个复杂的形状。
在不添加额外节点的情况下变形
我们在矢量编辑器中画了一个圆圈。
保存 SVG 文件并将公式复制
path到将实现动画的单独文件中。保存并再次复制
path接下来，我们编写动画公式
通过添加节点进行变形
添加其他节点
在两个现有节点之间插入一个附加节点：
使用编辑路径节点工具选择这两个节点。F2按住选择的同时选择。shift选定的节点将变为黄色。
点击顶部栏
Inscape-"Вставить новые узлы в выделенные сегменты"应该会出现一个额外的节点，正好在两个旧节点的中间。
选择所有节点并按 -
"Сделать выделенные узлы автоматически сглаженными"保存文件并复制结果
path可能的地雷之一:)
通过在现有节点下的额外点击，可以添加一个额外的节点。
注意 如果锚点的数量不相等，动画将运行不平稳。
可以通过稍微移动节点点来检查是否有多余的节点，如果有隐藏节点，它会出现，并且会出现一个额外的段。
只需删除额外的节点。
检查后，复制最终补丁。
如果你仔细地做每一件事，那么在点击圆圈后就会有一个流畅的动画效果：
来回动画
从复杂形状到简单形状的动画（圆形）
我们有
path变换的初始和最终位置。因此，要将动画从复杂形状变为圆形，只需 swap 即可path：从复杂形状变形为圆形，再变形为复杂形状
添加了径向渐变。如有必要，您可以选择其他颜色或删除不必要的。
红黑渐变
蓝黑色渐变
动画加速并循环播放
根据巴勃罗毕加索的画作变形
这个例子不是我的，我很久以前下载的，现在找不到链接了。我将不胜感激源链接。
这个答案无论如何都不能算作一个解决方案，只是我能做的
按照上面的指导，一切都解决了，你只需要严格按照要求
为了解决方案的完整性，我想再添加一个答案。
根据巴勃罗毕加索的画作变形
这个例子不是我的，我很久以前下载的，现在找不到链接了。我将不胜感激源链接。
观看全屏片段更有趣。