Animation SVG路径动画跳跃

我想设置SVG路径的动画。我有相同的点和相同的贝塞尔设置。当我将2个点移动到矩形中心时，动画会跳跃且不平滑

我发现如果这些点最初不在直线路径上，那么动画是平滑的！它看起来像一只虫子(

请查看下面演示该问题的代码，或在

跳跃动画

平滑动画

我发现在向量编辑器中拖动节点时，节点类型会发生变化
因此，即使形状的初始路径和最终路径中的节点数量相等，也无法获得平滑动画

如何防止类型节点点在拖动时发生变化，这是有待解决的问题。
我发现，通常情况下，自动平滑点的类型会更改为其他类型的节点点
因此，我尽量避免使用这种类型的节点。
我首先创建了一个带有凹边的矩形，然后将这些边转换成直线

使用此技术，节点点的类型不会改变，动画变得平滑

平滑动画

---

对于平滑动画，您必须具有相同数量的路径命令。它们也必须是相同顺序的相同类型。我认为您的路径不够相似。（路径命令是字母）。我通过复制相同的形状并仅移动2个点来创建该路径。可能在从图形软件导出路径形状时，它会自动从路径的中间删除2个点。在这种情况下，我看不到任何方法可以使动画平滑。