Floating Menu

动画风格 · 弹簧物理动画（Spring / Physics-based Motion）

这类风格属于 Apple「Fluid Interfaces」与 Material Design「natural motion」一脉的现代 Web 动效， iOS Dynamic Island、Arc 浏览器、Linear 的菜单展开都是同一族。 一句话描述：单一容器在「胶囊」与「大面板」两种状态间连续形变（morph）， 全程由弹簧物理驱动而非固定时长缓动曲线；内容子项以错峰编排（stagger）浮入浮出， 辅以 hover 位移、按压缩放等微交互，以及 SVG path 插值的图标变形。

主要元素（对应组件里的具体实现）

1. Spring 物理参数-- stiffness 280~350 / damping 18~35。展开稍软（280/26）有回弹感， 收起更硬更干脆（300/35），链接 hover 用低阻尼（18）所以会轻微过冲。
2. 容器形变（morphing）-- 同一个元素动画 width / height / padding（320×56 -> 380×700）， 视觉上是「长出来」的，而不是弹出一个新弹窗。这是它与普通 dropdown 的本质区别。
3. 错峰编排（stagger / choreography）-- 展开时 delayChildren 0.05 + staggerChildren 0.02 逐条浮入； 关闭时 staggerDirection: -1 反向 + when: "afterChildren"（子项先退完、容器再收）。
4. 入场单元动作-- 每项都是 opacity 0->1 + y 12->0（从下方浮入），目前最流行的入场范式。
5. 微交互（micro-interactions）-- 大链接 hover x: +6、小链接 +4、按钮 active:scale-95、标题栏 whileTap: 0.98，制造「可按压」的触觉感。
6. 图标 morph-- 汉堡 ↔ 叉号靠两条 motion.path 的 d 属性插值，两帧之间平滑变形。
7. 色彩过渡并行-- 容器背景 / 边框用 300ms transition-colors 渐显，和弹簧形变同时发生， 层次感来自「快的弹性 + 慢的渐变」叠加。

设计文档归类关键词：spring-driven morphing + staggered choreography + tactile micro-interactions，中文可以叫「弹簧形变 + 错峰编排 + 触觉微交互」。