如何在React上实现基本动画？

如何解决如何在React上实现基本动画？

我是编码环境的新手。到目前为止，我学习了HTML，CSS，JS6和React。我对Python也很满意。现在，我想创建一个网站，以显示与隔离类型有关的感染如何工作。

如图所示，我希望有一个条来表示隔离的类型-全部，部分等-以及在每次不同运行时随机出现在屏幕上的随机点。我希望这些点以随机向量移动-当部分隔离区选择仅几个受感染点移动时，如果未选择隔离区，则所有点都将移动-直到它们与另一个点碰撞。当它们碰撞时，它们会改变颜色-最好是染成红色。当我们到达每个点都为红色或达到特定倒数的位置时，程序将停止。

程序中有很多要添加的内容-因为它们中的％1可能会变黑，表示已死等。-但我的主要问题是，在哪里可以找到向我展示如何实现基本动画的资源在React上？我已经在Google上搜索了很多，也尝试过Python gamepy库。 -尝试点子Gamepy-时遇到很多错误。

无论如何，我可以使用“ react-konva”绘制一个圆，但是现在我觉得我需要一些指导，以进行下一步：

import React from 'react';
import { render } from 'react-dom';
import { Stage,Layer,Rect,Text,Circle,Line } from 'react-konva';

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
       <Circle x={200} y={100} radius={50} fill="green" />
      </Layer>
    </Stage>
  );
};

render(<App />,document.getElementById('root'));

如何填充更多圈子？
如何移动它们？

如果有更好的方法将此伪代码实现到现实世界中-python或js中的另一个库，我也想学习它们。

我非常感谢您的帮助。感觉就像我只是在寻找它而没有研究它，但是相信我，我已经花了好几个小时试图找出答案。

-编辑- 好了，两个多小时后，我在《华盛顿邮报》的网站上发现了几乎相同的作品。 very good implementation https://www.washingtonpost.com/graphics/2020/world/corona-simulator/

仍然试图找到他们如何制作动画的画面。