Javascript 使用GSAP/d3.js绘制HTML5动画

我想创建一个HTML5画布动画，可能是这个网站上的动画：

我已经开始使用GSAP，但创建类似这样的东西看起来确实是一项艰巨的任务。 我几乎必须创建每个点/移动，我不知道是否有更快/更好的方法。 目前我只看过没有插件的GSAP。 是否有一些特殊的工具/（GSAP）插件可以帮助创建这个？ 或者我应该使用d3.js吗

我还试图找到一个教程，但它似乎没有什么更先进的情况

谢谢你的帮助

您提供的示例正在使用，我建议您也使用它，因为您也想在3D空间中操作

当您想要为大量点设置动画时，需要使用顶点着色器。这是因为顶点着色器允许您一步计算所有点的位置（感谢GPU上的并行计算），而使用“正常方式”（在CPU上）对性能非常不利，因为每个点都必须逐个计算。（在这里你可以看到）

设置点动画的方式与您可能认为的略有不同-您不希望将动画应用于每个点。单身。指向 相反，您将需要传递给着色器的三个内容：

-包含起始点位置的数组

-包含最终点位置的数组

-混合参数（只是一个取值范围为0到1的浮点变量）

然后使用GSAP仅设置混合参数的动画，着色器执行其余操作（例如，当混合参数为0.5时，点位置正好位于提供给着色器的起始位置和最终位置之间的中间位置）

您提供的示例还使用了某种柏林噪波函数，您还必须在着色器中实现该函数

一次咬很多东西，但这里有一些来自Yuri Artyukh的很棒的教程，可以帮助你实现类似的目标：

希望对你有帮助，祝你好运