0

我想创建一个 HTML5 画布动画，可能是这个网站上的动画：https ://flowstudio.co/ 。

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

我也试图为此找到一个教程，但看起来这个更高级的案例没有任何内容。

谢谢您的帮助！

4

1 回答 1

0

  1. 您提供的示例是使用THREE.js ，我建议您也使用它，因为您也想在 3D 空间中操作。

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

  3. 您为点设置动画的方式与您可能想象的略有不同——您不想将动画应用于每个点。单身的。点...相反，您需要将三件事传递给着色器：

    - 包含起点位置的数组，

    -包含最终点位置的数组，

    -混合参数（只是一个浮点变量，取值从 0 到 1）。

    然后，您使用GSAP仅对混合参数进行动画处理，其余部分由着色器完成（例如，当混合参数为 0.5 时，点位置正好在您提供给着色器的起始位置和最终位置之间）

  4. 您提供的示例还使用了某种 Perlin Noise 函数，您还必须在着色器中实现该函数。

    一次吃很多东西，但这里有一些来自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

    希望它有帮助......祝你好运！

于 2018-09-28T10:05:53.640 回答