我可以使用 framer motion 创建 blob 动画吗?
Can i create a blob animation using framer motion?
作为参考,我说的是Discord's Login Page左上角的深灰色space,截图如下:
我知道可以使用 canvas 元素和动画二次贝塞尔曲线创建此斑点或“摇摆边缘”效果(在左上角)。
在我的 nextjs 应用程序中,我为我的所有动画使用成帧器运动。它很棒,快速且易于使用。那么我是否也可以使用 framer motion 来制作这种 blob 效果,就像在 discord 登录页面上一样,或者我可以只在 canvas 元素上创建这样的动画吗?
你肯定可以为此使用成帧器运动。你想用它来制作 SVG 动画来创建这种效果,除非你想要某种形式的交互性,那么我可能会使用 canvas.
要实际生成像这样的 blob svg 以进行动画处理,请查看此处找到的一些资源:
https://css-tricks.com/blobs/
例如:
https://www.blobmaker.app/
或者,您可以在 Illustrator、Affinity Designer 或大多数其他矢量绘图应用程序中自己制作 SVG。
我用这个工具制作blob动画https://blobanimation.com
作为参考,我说的是Discord's Login Page左上角的深灰色space,截图如下:
我知道可以使用 canvas 元素和动画二次贝塞尔曲线创建此斑点或“摇摆边缘”效果(在左上角)。
在我的 nextjs 应用程序中,我为我的所有动画使用成帧器运动。它很棒,快速且易于使用。那么我是否也可以使用 framer motion 来制作这种 blob 效果,就像在 discord 登录页面上一样,或者我可以只在 canvas 元素上创建这样的动画吗?
你肯定可以为此使用成帧器运动。你想用它来制作 SVG 动画来创建这种效果,除非你想要某种形式的交互性,那么我可能会使用 canvas.
要实际生成像这样的 blob svg 以进行动画处理,请查看此处找到的一些资源: https://css-tricks.com/blobs/
例如: https://www.blobmaker.app/
或者,您可以在 Illustrator、Affinity Designer 或大多数其他矢量绘图应用程序中自己制作 SVG。
我用这个工具制作blob动画https://blobanimation.com