子按钮飞出太普通，他让FAB主按钮像果冻一样伸缩

多数悬浮操作按钮（FAB）菜单都在努力让那一排子按钮飞得漂亮。然而这位开发者偏偏不想这样——他想让主按钮本身变成一团能拉伸、会晃动的果冻。

灵感来自 Dribbble 上的一个交互动画：主按钮不是简单展示更多操作，而是朝着子按钮的方向伸展，随着它们出现而抖动，最后像软软的啫喱一样回到原位。这看上去好玩，背后却藏着一个渲染难题：在 Jetpack Compose（Android 原生界面工具包）里，怎么把一个硬邦邦的圆形画成可以变形的东西？

打开网易新闻 查看精彩图片

这个问题最终催生了 JellyFab——一个完全用 Compose Canvas 和 Animatable API 实现的开源库，没有动用着色器，只依靠少量采样点和出奇简单的几何计算。

整个效果会分四步搭起来：一个自定义触发按钮、两层展开的迷你 FAB、赋予 JellyFab 灵魂的可变形 blob，以及让整个幻觉可信的动态阴影。

前两步并不新鲜。可展开的 FAB 菜单已经出现了很多年，成熟的实现也遍地都是。真正有意思的——也是这个项目存在的理由——是那块 blob。

说到基础，中心触发按钮并没有使用 Material 3 提供的标准 FloatingActionButton。因为这个按钮要变形：后面会把它拉伸成拖着软边的 blob，朝着展开的菜单项扭动。标准的 FloatingActionButton 自带形状、涟漪效果和高度，很难在它底下绘制并驱动一个完全自定义的轮廓。所以触发按钮只是一个可点击的 Box，旋转动画控制切换图标的旋转，而所有果冻变形的绘制工作在它底下的 Canvas 里独立完成。

触发按钮只是一块普通的 Box，上面的图标和触摸反馈保持不变，底下却可以自由画出任何形状——这一选择虽小，却把后续所有可能都打开了。

菜单项的布局本身没有魔法。主要动作沿着一条弧线分布，这也是浮动菜单的常见做法。有意思的地方在于：这些位置稍后会成为驱动 blob 动画的关键输入，弧线由均匀分配的角度来构建。