复杂的自定义JS交互式动画-以及如何创建它们？

Question

一段时间以来，我一直在修补JavaScript（React JS），Python，HTML和CSS。这样做时，我偶尔会遇到一些动画-其中大多数是标准的CSS动画（例如transition: width 2s;）。但是越来越多的我想知道如何制作更复杂的自定义交互式动画，而我却根本无法找出正确的技术来学习以达到所需的效果（是的，我在问这个非常广泛的一般性问题之前就使用了搜索功能）。 HTML5 canvas似乎是一种灵活且用途广泛的工具，但是我不知道它们是否是我所想到的“正确”工具。

让我给你一个我想做的事的例子：

• 过程可视化：：公司的资源被动画化为沿着不固定的而是由公司供应链结构生成的路径移动的移动对象。
• 拖放功能：元素，例如可以通过拖放将供应商添加到供应链中
• 复杂的自定义图表（我知道存在强大的库来实现此功能，例如AnyChart）：图表是从显示生命数据的过程数据中派生的。我可以在图中单击以添加新的数据点。

我不是在寻找另一个JS库，而是自己创建这些动画的技术。我也在寻找开始学习这些技术的一个好时机。所以问题确实是：我需要学习什么才能创建这些交互式动画，HTML5 canvas是正确的工具吗？有哪些类型的交互式动画技术以及何时使用它们？

谢谢。

Answer 1

因此，我对该主题进行了一些研究，我认为可以在这里找到该主题的最佳，最结论性的摘要（ReactJS和VanillaJS）：

https://css-tricks.com/comparison-animation-technologies/#react-and-animation