Canvas HTML5 动画 GSAP/d3.js
Canvas HTML5 animation with GSAP/d3.js
我想创建一个 HTML5 canvas 动画，可能是本网站上的那个：https://flowstudio.co/。
我已经开始使用 GSAP，但看起来创建这样的东西确实是一项艰巨的任务。
我几乎必须创建每个 point/move 单数，我不知道是否有 faster/better 方法。
目前我只看过没有插件的 GSAP。
是否有一些特殊的工具/（GSAP）插件可以帮助创建它？
或者我应该使用 d3.js?
我也试图找到这方面的教程，但似乎没有针对这个更高级案例的教程。
感谢您的帮助！
您提供的示例使用的是 THREE.js，我建议您也使用它，因为您也想在 3D 中操作 space。
如果要为大量点设置动画，则需要使用 顶点着色器。那是因为顶点着色器将允许您在一个步骤中计算所有点的位置（由于 GPU 上的并行计算），而这样做 'normal way'（在 CPU 上）在性能上非常糟糕，因为每个点都必须一个一个地计算。 （这里可以看到the difference）
设置点动画的方式与您想象的略有不同 - 您不想对每个点都应用动画。单身的。观点...
相反，您需要传递给着色器的三样东西：
-包含起点位置的数组，
-包含最终点位置的数组，
-blend 参数（只是一个取值从 0 到 1 的浮点变量）。
然后使用 GSAP 仅对 blend 参数设置动画，其余由着色器完成（例如，当混合参数为 0.5 时点位置正好是您提供给着色器的起始位置和最终位置之间的中间位置）
您提供的示例还使用了某种 Perlin 噪声函数，您也必须在着色器中实现该函数。
一次要咬很多东西，但这里有一些来自 Yuri Artyukh 的很棒的教程，它们将帮助您实现类似的目标：
https://www.youtube.com/watch?v=XjZ9iu_Z9G8&t=5713s
https://www.youtube.com/watch?v=QGMygnzlifk
https://www.youtube.com/watch?v=RKjfryYz1qY
https://www.youtube.com/watch?v=WVTLnYL84hQ&t=4452s
希望对您有所帮助，祝您好运！
我想创建一个 HTML5 canvas 动画，可能是本网站上的那个：https://flowstudio.co/。
我已经开始使用 GSAP，但看起来创建这样的东西确实是一项艰巨的任务。 我几乎必须创建每个 point/move 单数，我不知道是否有 faster/better 方法。 目前我只看过没有插件的 GSAP。 是否有一些特殊的工具/（GSAP）插件可以帮助创建它？ 或者我应该使用 d3.js?
我也试图找到这方面的教程，但似乎没有针对这个更高级案例的教程。
感谢您的帮助！
您提供的示例使用的是 THREE.js，我建议您也使用它，因为您也想在 3D 中操作 space。
如果要为大量点设置动画，则需要使用 顶点着色器。那是因为顶点着色器将允许您在一个步骤中计算所有点的位置（由于 GPU 上的并行计算），而这样做 'normal way'（在 CPU 上）在性能上非常糟糕，因为每个点都必须一个一个地计算。 （这里可以看到the difference）
设置点动画的方式与您想象的略有不同 - 您不想对每个点都应用动画。单身的。观点... 相反，您需要传递给着色器的三样东西：
-包含起点位置的数组，
-包含最终点位置的数组，
-blend 参数（只是一个取值从 0 到 1 的浮点变量）。
然后使用 GSAP 仅对 blend 参数设置动画，其余由着色器完成（例如，当混合参数为 0.5 时点位置正好是您提供给着色器的起始位置和最终位置之间的中间位置）
您提供的示例还使用了某种 Perlin 噪声函数，您也必须在着色器中实现该函数。
一次要咬很多东西，但这里有一些来自 Yuri Artyukh 的很棒的教程，它们将帮助您实现类似的目标：
https://www.youtube.com/watch?v=XjZ9iu_Z9G8&t=5713s
https://www.youtube.com/watch?v=QGMygnzlifk
https://www.youtube.com/watch?v=RKjfryYz1qY
https://www.youtube.com/watch?v=WVTLnYL84hQ&t=4452s
希望对您有所帮助，祝您好运！