【免费下载链接】liquid_glass_widgetsFlutter UI kit implementing Apples iOS 26 Liquid Glass design language - a comprehensive glass widget library with real shader-based blur, physics-driven jelly animations, and dynamic lighting. Works on every platform out of the box.项目地址https://gitcode.com/gh_mirrors/li/liquid_glass_widgets点击查看免费下载点按按钮一块玻璃水珠从按钮里拉伸出来滴落到菜单位置最后稳稳落定——这就是 iOS 26 的液态玻璃Liquid Glass效果。开源项目Liquid Glass Widgets把这一整套视觉语言带进了 Flutter而它的灵魂就是液态变形引擎Liquid Morph Engine一个用物理弹簧驱动时间、用Metaball SDF 着色器画形状的动画系统逐帧计算出两个液滴如何运动、拉伸、融合。本文用通俗的方式讲透这套引擎的原理几乎不需要读代码。什么是液态变形引擎一个菜单两颗液滴官方把整个动画拆成了两个概念上的Blob液滴这是理解一切的钥匙液滴角色行为Blob A锚点触发按钮的幽灵替身停留在原位在动画前 40% 逐渐缩小消失Blob B主体正在变形的菜单容器从按钮中心飞向菜单中心同时从小变大关键洞察是两颗液滴之间的泪滴状颈部没有任何手工绘制的几何它完全由 Metaball 着色器自动长出来。引擎唯一要做的事就是回答每一帧的问题Blob B 现在应该在哪多大和 Blob A 融合到什么程度答案由 LiquidMorphState 这个每帧一份的值对象给出里面的pathT位置、sizeT尺寸、anchorScale锚点缩放、blend融合强度都是引擎预先算好的UI 层拿来直接用即可。第一套原理为什么是欠阻尼物理弹簧 菜单打开/关闭的时机不是靠定时 300 毫秒而是靠真实的弹簧模拟。在 liquid_morph_physics.dart 里开合动画用的是同一族欠阻尼弹簧质量 mass: 1.0 刚度 stiffness: 120.0 → 固有频率 ω₀ ≈ 11 rad/s 阻尼 damping: 16.0 → 阻尼比 ζ ≈ 0.73阻尼比ζ 1欠阻尼是刻意为之——弹簧会冲过头再弹回来。正是这一次冲过头制造了 iOS 26 那个标志性的橡皮筋回弹手感打开时弹簧冲向 1.0 的过程中配合 J 曲线过冲液滴像被一根橡皮筋弹射出去颈部被拉到最长关闭时弹簧会冲过 0.0 变成负值液滴砸回按钮位置触发按钮还会跟着轻轻一震push 动量就像真的被液体撞了一下。关闭时还会注入一个初始速度提示closeVelocityHint -3.2相当于松手时猛地把菜单往外一拽让回弹幅度更饱满。新手提示这套物理常量是互相咬合的所以引擎不开放自定义弹簧参数只给出四档语义化速度MorphSpeedslow / normal / fast / instant任何一档都自动保持 ζ ≈ 0.73 的欠阻尼比例——保证有回弹这一灵魂不变只是快慢不同。第二套原理Metaball 如何画出泪滴颈部 光有弹簧只能算出位置液体的观感来自 GPU 上的SDF有向距离场 Metaball 融合。核心逻辑在 shaders/sdf.glsl 的smoothUnion函数每个玻璃形状按钮、菜单都用 SDF 描述成一个距离场——画面中每个像素只知道我离这个形状有多远两个形状的距离值不做简单取小那样是硬边并集而是用smoothUnion(d1, d2, k)做平滑并集——两个形状靠近时边缘会像两滴水接触时一样鼓起、融合引擎输出的blend值0–28 的模糊单位就控制这个融合的张力两滴完全重叠时 blend 0互不相扰泪滴颈部拉到最开时 blend 最大颈部最粗。所以整条液体颈部是算出来的光学错觉没有一条贝塞尔曲线参与。这也解释了为什么效果在不同尺寸、不同距离下都自然——融合强度跟着两滴的分离度自动伸缩。上图这类背景图正是玻璃折射的对象最终成像由 shaders/liquid_glass_render.frag 的渲染管线完成包含折射、色散、边缘高光等多重效果。一次完整变形五个阶段的液体生命周期 引擎把动画切成五个语义阶段MorphPhase你无需自己从原始数值反推现在演到哪了打开方向idle → detaching → travelling → arriving → settled 关闭方向settled → arriving → travelling → detaching → [回弹] → idle阶段弹簧值区间你在屏幕上看到什么idle 0.001静止动画结束detaching0 – 0.4幽灵按钮Blob A缩小液滴开始剥离travelling0.4 – 0.8泪滴颈部拉伸到最长最液体的时刻arriving0.8 – 1.0液滴逼近目标颈部开始回缩settled≥ 1.0菜单完全落定关闭时还有一个精巧的hasHandedOff交接闩锁弹簧冲过 0 的瞬间引擎把幽灵替身换回真按钮。用户在回弹过程中看到的始终是幽灵在承接撞击而真按钮重新出现时已经静止归位——肉眼完全察觉不到这次换人。自适应阻尼菜单越大流动越克制小按钮变弹出菜单还好那如果变形目标是半屏模态面板呢距离远、尺寸差大如果还用同一套曲线液滴会下坠 35–40 像素非常出戏。引擎的解法是自适应模式尺寸比scaleDelta 1.5时自动启用J 曲线过冲幅度按距离反比衰减物理过冲被约束在 10–14 像素以内颈部仍然可见的拉丝但不再有夸张的下坠尺寸曲线切换为 smootherstep大变形早期液滴保持紧凑落点附近才快速绽放blend 融合度按尺寸比衰减下限 0.2防止 SDF 把半个屏幕都糊成一体回弹推击设上限触发按钮的震动始终是一下轻点而不是像素级的猛撞。这些细节都在 LiquidMorphPhysics.compute 中实现是小菜单灵动、大菜单稳重的秘密。怎么亲手体验液态变形 不需要写任何代码项目示例里已经内置了两个参考实现GlassMenu/GlassMenuItem触发按钮 → 悬浮菜单的液态变形是引擎的教科书级集成源码见 glass_menu_internal.dartGlassModalSheet.show(morphFrom:)触发按钮 → 模态面板的变形比菜单更进一步——它要解决变形液滴与真正的路由页面的无缝交接面板在整个变形期间始终挂载在下方最后才揭示出来源码见 glass_modal_sheet_morph.dart。想给自己的组件接入只需三步在State里创建 GlassMorphController记得dispose每帧调用computeState(finalDx:, finalDy:)拿到渲染状态按状态摆放两个 Blob、把state.blend传给玻璃层的融合参数。完整的集成指南、MorphSpeed参数表与最小示例都在 docs/LIQUID_MORPH_ENGINE.md。无障碍Reduce Motion 用户看到什么 ♿引擎自动读取系统的Reduce Motion / Remove Animations设置。开启后弹簧直接切换为instant档位——菜单一步到位出现与消失没有泪滴颈部、没有回弹。GlassMenu在didChangeDependencies()中自动接线自定义组件也只需一行setDisableAnimations()即可跟上用户运行中切换设置也能实时生效。小结Liquid Glass Widgets 的液态变形引擎本质上是两套物理直觉的合谋弹簧动力学ζ ≈ 0.73 欠阻尼 J 曲线过冲负责时间——什么时候到哪、冲过头多少、回弹多猛SDF Metaball 平滑并集负责空间——两颗液滴之间那个会拉伸、会断裂、会融合的颈部。一帧接一帧这两套系统各自独立又严丝合缝地咬合才让菜单真正流动起来而不是缩放或滑动。这正是 iOS 26 液态玻璃手感在跨平台 Flutter 应用里的完整复刻——打开、飞行、落定、回弹每一毫秒都有物理解释。赞分享【免费下载链接】liquid_glass_widgetsFlutter UI kit implementing Apples iOS 26 Liquid Glass design language - a comprehensive glass widget library with real shader-based blur, physics-driven jelly animations, and dynamic lighting. Works on every platform out of the box.项目地址https://gitcode.com/gh_mirrors/li/liquid_glass_widgets点击查看免费下载相关推荐GlassModalSheet 完全指南Liquid Glass Widgets 模态弹层的参数、手势与液态变形细节GlassModalSheet 完全指南Liquid Glass Widgets 模态弹层的参数、手势与液态变形细节 liquid_glass_widgets让Liquid Glass活起来liquid-glass-studio超椭圆形状、弹簧动画与Blob融合详解让Liquid Glass活起来liquid glass studio超椭圆形状、弹簧动画与Blob融合详解 liquid glass studio 是一款在Liquid Glass Widgets 实战用 GlassScaffold 5 分钟搭建第一个液态玻璃界面Liquid Glass Widgets 实战用 GlassScaffold 5 分钟搭建第一个液态玻璃界面 想在自己的 Flutter 应用里复刻 iOS创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/28 17:34:38 · 阅读 1.2k Liquid Glass Widgets 液态变形引擎揭秘：物理弹簧 + Metaball 如何让菜单像液体一样流动
【免费下载链接】liquid_glass_widgetsFlutter UI kit implementing Apples iOS 26 Liquid Glass design language - a comprehensive glass widget library with real shader-based blur, physics-driven jelly animations, and dynamic lighting. Works on every platform out of the box.项目地址https://gitcode.com/gh_mirrors/li/liquid_glass_widgets点击查看免费下载点按按钮一块玻璃水珠从按钮里拉伸出来滴落到菜单位置最后稳稳落定——这就是 iOS 26 的液态玻璃Liquid Glass效果。开源项目Liquid Glass Widgets把这一整套视觉语言带进了 Flutter而它的灵魂就是液态变形引擎Liquid Morph Engine一个用物理弹簧驱动时间、用Metaball SDF 着色器画形状的动画系统逐帧计算出两个液滴如何运动、拉伸、融合。本文用通俗的方式讲透这套引擎的原理几乎不需要读代码。什么是液态变形引擎一个菜单两颗液滴官方把整个动画拆成了两个概念上的Blob液滴这是理解一切的钥匙液滴角色行为Blob A锚点触发按钮的幽灵替身停留在原位在动画前 40% 逐渐缩小消失Blob B主体正在变形的菜单容器从按钮中心飞向菜单中心同时从小变大关键洞察是两颗液滴之间的泪滴状颈部没有任何手工绘制的几何它完全由 Metaball 着色器自动长出来。引擎唯一要做的事就是回答每一帧的问题Blob B 现在应该在哪多大和 Blob A 融合到什么程度答案由 LiquidMorphState 这个每帧一份的值对象给出里面的pathT位置、sizeT尺寸、anchorScale锚点缩放、blend融合强度都是引擎预先算好的UI 层拿来直接用即可。第一套原理为什么是欠阻尼物理弹簧 菜单打开/关闭的时机不是靠定时 300 毫秒而是靠真实的弹簧模拟。在 liquid_morph_physics.dart 里开合动画用的是同一族欠阻尼弹簧质量 mass: 1.0 刚度 stiffness: 120.0 → 固有频率 ω₀ ≈ 11 rad/s 阻尼 damping: 16.0 → 阻尼比 ζ ≈ 0.73阻尼比ζ 1欠阻尼是刻意为之——弹簧会冲过头再弹回来。正是这一次冲过头制造了 iOS 26 那个标志性的橡皮筋回弹手感打开时弹簧冲向 1.0 的过程中配合 J 曲线过冲液滴像被一根橡皮筋弹射出去颈部被拉到最长关闭时弹簧会冲过 0.0 变成负值液滴砸回按钮位置触发按钮还会跟着轻轻一震push 动量就像真的被液体撞了一下。关闭时还会注入一个初始速度提示closeVelocityHint -3.2相当于松手时猛地把菜单往外一拽让回弹幅度更饱满。新手提示这套物理常量是互相咬合的所以引擎不开放自定义弹簧参数只给出四档语义化速度MorphSpeedslow / normal / fast / instant任何一档都自动保持 ζ ≈ 0.73 的欠阻尼比例——保证有回弹这一灵魂不变只是快慢不同。第二套原理Metaball 如何画出泪滴颈部 光有弹簧只能算出位置液体的观感来自 GPU 上的SDF有向距离场 Metaball 融合。核心逻辑在 shaders/sdf.glsl 的smoothUnion函数每个玻璃形状按钮、菜单都用 SDF 描述成一个距离场——画面中每个像素只知道我离这个形状有多远两个形状的距离值不做简单取小那样是硬边并集而是用smoothUnion(d1, d2, k)做平滑并集——两个形状靠近时边缘会像两滴水接触时一样鼓起、融合引擎输出的blend值0–28 的模糊单位就控制这个融合的张力两滴完全重叠时 blend 0互不相扰泪滴颈部拉到最开时 blend 最大颈部最粗。所以整条液体颈部是算出来的光学错觉没有一条贝塞尔曲线参与。这也解释了为什么效果在不同尺寸、不同距离下都自然——融合强度跟着两滴的分离度自动伸缩。上图这类背景图正是玻璃折射的对象最终成像由 shaders/liquid_glass_render.frag 的渲染管线完成包含折射、色散、边缘高光等多重效果。一次完整变形五个阶段的液体生命周期 引擎把动画切成五个语义阶段MorphPhase你无需自己从原始数值反推现在演到哪了打开方向idle → detaching → travelling → arriving → settled 关闭方向settled → arriving → travelling → detaching → [回弹] → idle阶段弹簧值区间你在屏幕上看到什么idle 0.001静止动画结束detaching0 – 0.4幽灵按钮Blob A缩小液滴开始剥离travelling0.4 – 0.8泪滴颈部拉伸到最长最液体的时刻arriving0.8 – 1.0液滴逼近目标颈部开始回缩settled≥ 1.0菜单完全落定关闭时还有一个精巧的hasHandedOff交接闩锁弹簧冲过 0 的瞬间引擎把幽灵替身换回真按钮。用户在回弹过程中看到的始终是幽灵在承接撞击而真按钮重新出现时已经静止归位——肉眼完全察觉不到这次换人。自适应阻尼菜单越大流动越克制小按钮变弹出菜单还好那如果变形目标是半屏模态面板呢距离远、尺寸差大如果还用同一套曲线液滴会下坠 35–40 像素非常出戏。引擎的解法是自适应模式尺寸比scaleDelta 1.5时自动启用J 曲线过冲幅度按距离反比衰减物理过冲被约束在 10–14 像素以内颈部仍然可见的拉丝但不再有夸张的下坠尺寸曲线切换为 smootherstep大变形早期液滴保持紧凑落点附近才快速绽放blend 融合度按尺寸比衰减下限 0.2防止 SDF 把半个屏幕都糊成一体回弹推击设上限触发按钮的震动始终是一下轻点而不是像素级的猛撞。这些细节都在 LiquidMorphPhysics.compute 中实现是小菜单灵动、大菜单稳重的秘密。怎么亲手体验液态变形 不需要写任何代码项目示例里已经内置了两个参考实现GlassMenu/GlassMenuItem触发按钮 → 悬浮菜单的液态变形是引擎的教科书级集成源码见 glass_menu_internal.dartGlassModalSheet.show(morphFrom:)触发按钮 → 模态面板的变形比菜单更进一步——它要解决变形液滴与真正的路由页面的无缝交接面板在整个变形期间始终挂载在下方最后才揭示出来源码见 glass_modal_sheet_morph.dart。想给自己的组件接入只需三步在State里创建 GlassMorphController记得dispose每帧调用computeState(finalDx:, finalDy:)拿到渲染状态按状态摆放两个 Blob、把state.blend传给玻璃层的融合参数。完整的集成指南、MorphSpeed参数表与最小示例都在 docs/LIQUID_MORPH_ENGINE.md。无障碍Reduce Motion 用户看到什么 ♿引擎自动读取系统的Reduce Motion / Remove Animations设置。开启后弹簧直接切换为instant档位——菜单一步到位出现与消失没有泪滴颈部、没有回弹。GlassMenu在didChangeDependencies()中自动接线自定义组件也只需一行setDisableAnimations()即可跟上用户运行中切换设置也能实时生效。小结Liquid Glass Widgets 的液态变形引擎本质上是两套物理直觉的合谋弹簧动力学ζ ≈ 0.73 欠阻尼 J 曲线过冲负责时间——什么时候到哪、冲过头多少、回弹多猛SDF Metaball 平滑并集负责空间——两颗液滴之间那个会拉伸、会断裂、会融合的颈部。一帧接一帧这两套系统各自独立又严丝合缝地咬合才让菜单真正流动起来而不是缩放或滑动。这正是 iOS 26 液态玻璃手感在跨平台 Flutter 应用里的完整复刻——打开、飞行、落定、回弹每一毫秒都有物理解释。赞分享【免费下载链接】liquid_glass_widgetsFlutter UI kit implementing Apples iOS 26 Liquid Glass design language - a comprehensive glass widget library with real shader-based blur, physics-driven jelly animations, and dynamic lighting. Works on every platform out of the box.项目地址https://gitcode.com/gh_mirrors/li/liquid_glass_widgets点击查看免费下载相关推荐GlassModalSheet 完全指南Liquid Glass Widgets 模态弹层的参数、手势与液态变形细节GlassModalSheet 完全指南Liquid Glass Widgets 模态弹层的参数、手势与液态变形细节 liquid_glass_widgets让Liquid Glass活起来liquid-glass-studio超椭圆形状、弹簧动画与Blob融合详解让Liquid Glass活起来liquid glass studio超椭圆形状、弹簧动画与Blob融合详解 liquid glass studio 是一款在Liquid Glass Widgets 实战用 GlassScaffold 5 分钟搭建第一个液态玻璃界面Liquid Glass Widgets 实战用 GlassScaffold 5 分钟搭建第一个液态玻璃界面 想在自己的 Flutter 应用里复刻 iOS创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考