优化JavaScript/React Native中SVG路径间的平滑补间动画

我正在将一款应用移植到React Native，核心功能是捕获用户输入的笔触，并将其平滑动画到目标SVG的对应位置。在Web端，我通过结合多款平滑库与PixiJS实现了无瑕疵的流畅过渡，但在React Native + Reanimated框架下，只能手动编写路径插值逻辑，当前实现步骤如下：

• 将目标SVG转换为固定点数N的点序列
• 对用户输入的笔触进行平滑处理，同样转换为包含N个点的序列
• 遍历每个坐标点，在输入点与目标点之间执行线性插值
• 将插值后的点数组传入Catmull-Rom样条函数处理
• 渲染最终的SVG曲线

其中步骤1和2可以在动画启动前完成缓存，但步骤3、4、5必须在每帧渲染时实时执行。目前这个方案存在两个明显问题：

1. N的最大值约为300，超过后会出现明显掉帧
2. 动画末尾始终残留一些瑕疵，即便使用Catmull-Rom样条也无法完全消除

Web端可以流畅处理数万个点的动画，说明我肯定遗漏了关键的性能优化点，比如：

• 是否能将步骤3和4合并，减少计算量？
• 有没有比Catmull-Rom样条更高效的平滑算法？

另外想请教：

• 有没有更优的纯JavaScript（必要时可使用Swift）方案实现两条矢量路径的平滑过渡？
• 如何解决动画末尾的瑕疵问题？由于不清楚该瑕疵的技术术语，我甚至找不到合适的搜索方向。

动画效果图示 #

起始/结束状态

中间状态

结束状态（带瑕疵）

内容的提问来源于stack exchange，提问作者cadlac