Javascript 为什么我的SVG路径在尝试使用动画变形时会跳跃？

我在这里尝试变形形状。我用它来处理多边形。我还使用了一个有3个点的简单路径进行变形，但是当我试图用我的实际SVG做一些事情时，它只会给我带来一堆错误，而且是超级错误。我所做的只是稍微移动一些点和锚柄。变形后的最终结果是正确的，但实际动画根本不是我想要的。变形路径是原始路径的副本，其中一些点已更改。因此，点的数量和路径方向应该相同。我甚至登记了Illustrator

let test = anime({
    targets: `.test path:last-of-type`,
    d: [
        { value: 'M113.14,116.59a8,8,0,0,1-3.26-15.31,45.79,45.79,0,0,0,0-83.69A8,8,0,1,1,116.38,3a61.79,61.79,0,0,1,0,112.93A8,8,0,0,1,113.14,116.59Z' },
        { value: 'M113.14,116.59a8,8,0,0,1-3.26-15.31c16.52-7.35,13.84-33.54,27.19-41.85s-10.67-34.5-27.19-41.84A8,8,0,1,1,116.38,3c22.29,9.91,44.73,38.64,21.45,82.6,0,24.39.84,20.41-21.45,30.33A8,8,0,0,1,113.14,116.59Z' }
    ],
    easing: 'easeOutSine',
    duration: 2000,
    loop: false,
    complete: function(anim) {
        anim.reverse();
    },
    autoplay: false
});

要实现平滑动画，必须在所有路径中匹配节点点的数量及其类型。

查看向量编辑器中的路径

大半圆比小半圆多一个节点点。图中用红色箭头指示了一个额外的点

必须删除一个额外的点，以便两条路径上的节点点数相同。
编辑后，保存文件并将路径复制到另一个文件以创建动画

SVG SMIL动画

当您试图将一条路径变形为另一条路径时，d属性必须具有相同的命令和顺序。@enxaneta我不太明白，因为如果我只是移动几个点，illustrator如何改变结构？也许我对SVG有些误解。d属性的值只是点和曲线的坐标，对吗？如果我在Illustrator中重塑我的SVG，为什么会有什么改变？请看下面的答案：它没有使用anime.js，而是解释了在变形图形时需要了解的d属性path@enxaneta好的，谢谢。我现在明白了为什么会发生这些错误。你知道有什么工具可以帮助你编辑SVG文件吗？因为Illustrator只使用最短的命令？对我来说，手动调整图形几乎是不可能的，因为在我的例子中，SVG是相对复杂的。或者至少这将是一项艰巨的任务。Illustrator对此毫无帮助。我一直都在做manually@Yakuwari如果答案对你有帮助，请不要忘记标记