我可以使用成帧器运动创建一个 blob animation 吗？

Question

作为参考，我说的是Discord 登录页面左上角的深灰色空间，这里是截图：

我知道可以使用 canvas 元素和动画二次贝塞尔曲线创建这种斑点或“摆动边缘”效果（在左上角）。

在我的 nextjs 应用程序中，我对所有动画都使用了成帧器运动。 它很棒，快速且易于使用。 那么我可以使用成帧器运动来制作像 discord 登录页面上的这种 blob 效果，还是我可以只在 canvas 元素上创建这样的动画？

Answer 1

您可以肯定地为此使用成帧器运动。 你想用它来为 SVG 设置动画来创建这种效果，除非你想要某种形式的交互性，那么我可能会使用 canvas。

要实际生成像这样的 Blob svg 以进行动画处理，请查看此处找到的一些资源： https://css-tricks.com/blobs/

如： https://www.blobmaker.app/

或者，您可以在 Illustrator、Affinity Designer 或大多数其他矢量绘图应用程序中自己制作 SVG。

Answer 2

我用这个工具来制作blob animation https://blobanimation.com