我正在尝试在React中实现一个简单的动画，其中一组节点从一组坐标移动到另一组坐标。我没有使用React动画库，而是尝试自己进行插值，以实现这种效果。
我有三个组成部分：App，Map和Node。现在，Map接受一个介于0和1之间的prop值，该值代表动画的完成百分比。根据该十进制值，Map对每个Node进行x和y位置的插值，并为其指定一些开始和结束坐标。当按下某个按钮时，将在App中触发单击事件。在事件处理程序中，我每15毫秒使用setInterval调用一个名为animate的函数。 animate只是简单地增加百分比完成值，然后将其作为Map函数中的道具传递给render。此百分比完成值达到1后，我将使用clearInterval停止定期调用animate。
该动画在定位和定时方面均能完美运行，但在Chrome上却难以应付。我知道有可能使这种动画流畅地工作，但是我不确定如何做。根据我对自己正在做的事情的上述描述，我可以做些什么来实现这一目标？我知道每次更改和渲染道具都会带来很多开销，考虑到我每15毫秒就要进行一次Node重新渲染，所以我想知道是否有解决方法。谢谢！