5 分钟上手 AndroidLiquidGlass：用 Compose Multiplatform 给你的应用加上会流动的液态玻璃

5 分钟上手 AndroidLiquidGlass用 Compose Multiplatform 给你的应用加上会流动的液态玻璃【免费下载链接】AndroidLiquidGlassCompose Multiplatform Liquid Glass effect项目地址: https://gitcode.com/gh_mirrors/an/AndroidLiquidGlass如果你正在用 Jetpack Compose 做界面大概率经历过这种时刻设计稿上那一层晶莹透亮的液态玻璃效果需求方一句照这个做你却盯着Blur 半透明 高光的组合陷入沉思——用普通模糊做出来像贴了层毛玻璃纸完全没有那种液体在流动的质感。AndroidLiquidGlass就是为解决这个问题而生的开源项目。它是一个基于 Compose Multiplatform 的液态玻璃效果库核心只有一个目标让你用声明式 API 快速拼出真实感极强的玻璃折射、模糊、高光和物理动画效果而不是反复手搓 Shader。接下来这篇文章会带你走一遍它解决什么、凭什么用它、怎么 10 分钟内跑出第一个可见效果的完整路径。一句话说清它是什么AndroidLiquidGlass 是一套 Compose Multiplatform 的液态玻璃效果引擎它把模糊、透镜折射、高光、内外阴影等效果封装成可叠加的 DSL再配合物理阻尼动画让你像搭积木一样给任何 Compose 元素穿上会流动的玻璃外衣。记忆点就三个词效果可叠加、动画带物理、代码跨平台。为什么不用 Bitmap 糊一层先看看它的底气可能有人会问玻璃效果而已我用Modifier.blur()加个半透明底色不就完了 这正是它和普通做法的分水岭性能效果是渲染级的不是贴图级的。库里的blur()、lens()最终会落到RenderEffect和运行时 Shader 上配合GraphicsLayer离屏渲染拖拽、缩放时效果是实时重算的不会像预渲染 Bitmap 那样一变形就露馅。想看细节的话lens()的实现就在backdrop/src/commonMain/kotlin/com/kyant/backdrop/effects/Lens.kt里面甚至内建了带色散chromaticAberration的折射 Shader 字符串这不是简单模糊能达到的。上手API 是效果栈思维不是参数堆思维。你不需要懂 RenderEffect 和 Shader 的细节。在BackdropEffectScope里按顺序调用blur(radius)、lens(refractionHeight, refractionAmount)库会自动帮你计算内边距、圆角、图层叠加这些脏活。跨平台一份代码多个平台同一套渲染路径。项目基于 Compose Multiplatform 组织源码公共逻辑放在backdrop/src/commonMain/平台差异比如RenderEffect在 Android 和 Skiko 下的不同实现被收敛到internal包内部你写的 UI 层代码几乎不用区分平台。三分钟跑通第一个液态玻璃控件下面我们按拿代码 → 铺背景 → 挂效果 → 接动画四步走让你亲手把一个会呼吸的玻璃胶囊做出来。第一步拿到项目与依赖克隆仓库到本地动手前先看一遍自带的演示应用它是最好的活文档git clone https://gitcode.com/gh_mirrors/an/AndroidLiquidGlass仓库里内置了一份可直接安装的演示 APKandroidApp/release/androidApp-release.apk里面是官方 Catalog滑块、开关、按钮、底部标签栏的液态玻璃效果全都有还附带参数面板让你实时拖圆角、模糊半径、折射强度。想接入自己的项目只需加一行依赖implementation(io.github.kyant0:backdrop:latest-version)第二步先把底铺好——Backdrop 从哪来这是最容易想反的一步。玻璃之所以有质感是因为它背后有东西可以透。所以第一步不是给按钮加效果而是先声明我想让哪个区域成为玻璃的取景窗。val trackBackdrop rememberLayerBackdrop()然后在内容层下面铺一个取样层Box(Modifier.layerBackdrop(trackBackdrop)) { // 这里是会被玻璃透视的内容 }rememberLayerBackdrop()会开辟一块GraphicsLayer离屏画布把这块区域的内容实时记录进去供后面的玻璃元素引用。第三步用 drawBackdrop 让元素浮起来铺好底之后给目标元素挂上Modifier.drawBackdrop(...)它一次能完成取背景 → 裁剪成形状 → 叠加效果 → 画高光阴影整条流水线Modifier .drawBackdrop( backdrop rememberCombinedBackdrop( backdrop, // 外部传入的自定义 Backdrop rememberBackdrop(trackBackdrop) { drawBackdrop - scale(2f / 3f, 1f) { drawBackdrop() } // 可选对取样内容做变形 } ), shape { Capsule() }, // 玻璃的轮廓 effects { blur(8.dp.toPx()) // 磨砂 lens(10.dp.toPx(), 14.dp.toPx(), chromaticAberration true) // 折射色散 }, highlight { Highlight.Ambient }, // 顶部环境高光 shadow { Shadow(radius 4.dp) }, // 投影 innerShadow { InnerShadow(radius 4.dp) } // 内阴影出玻璃厚度 )注意rememberCombinedBackdrop可以接受 2 个、3 个甚至vararg个 Backdrop 并组合绘制——这就是效果可以叠加的底层来源实现见backdrop/src/commonMain/kotlin/com/kyant/backdrop/backdrops/CombinedBackdrop.kt。第四步让玻璃活过来——接入物理动画静态玻璃顶多算亚克力板真正让它像液体的是带阻尼和速度反馈的物理动画。官方 Catalog 里的DampedDragAnimationandroidApp/src/main/java/com/kyant/backdrop/catalog/utils/DampedDragAnimation.kt就是范例拖拽时不止算位置还会根据拖动速度和方向实时给scaleX / scaleY、按压进度pressProgress施加惯性缩放。以LiquidSlider.kt为例核心就是把物理状态喂给三个不同的通道.drawBackdrop( ... effects { val progress dampedDragAnimation.pressProgress blur(8.dp.toPx() * (1f - progress)) // 按下时模糊减弱 lens(10.dp.toPx() * progress, 14.dp.toPx() * progress) // 折射随按压增强 }, layerBlock { scaleX dampedDragAnimation.scaleX // 拖拽惯性导致的形变 scaleY dampedDragAnimation.scaleY val velocity dampedDragAnimation.velocity / 10f scaleX / 1f - (velocity * 0.75f).coerceIn(-0.2f, 0.2f) } )按下 → 模糊退、折射进、元素按速度被拉长松开后阻尼动画把一切带回原位——这就是液态感的全部秘密。新手最容易踩的 3 个坑坑 1lens()一调用就抛UnsupportedOperationException错误信息会写 Only RoundedRectangularShape or CornerBasedShape is supported in lens effects。原因是折射 Shader 需要从圆角轮廓生成 SDF。解法给drawBackdrop传shape { Capsule() }或RoundedCornerShape(...)别用方方正正的RectangleShape。坑 2blur()写了但完全没效果blur()内部第一行就是if (!isRenderEffectSupported()) return——RenderEffect需要 Android 12 及以上低版本会自动静默跳过。解法要么做设备分级降级低端/低版本机器只保留半透明底色要么确认测试机系统版本别在模拟器老镜像上排查半天。坑 3玻璃元素透不到内容看起来像一块纯色塑料十有八九是忘了第二步——rememberLayerBackdrop()取样层没有铺到目标元素背后的位置。玻璃本质是取样 变形取样层没盖住的内容当然透不出来。解法按先铺layerBackdrop层再让玻璃元素叠在它上面的顺序组织布局。再进一步从会跑到会玩等你跑通上面四步值得继续挖的深水区有两个一是给效果加动态参数。官方 Catalog 的参数面板圆角、模糊半径、折射高度、色散开关就是活生生的例子把blur(radius)里的radius换成mutableFloatStateOf玻璃效果就能被运行时动态驱动。android_inner_refraction.png里那些夸张的色散和扭曲就是参数拉满的效果——很适合用来做设置页预览这类交互。二是照着 Catalog 自己造组件。库里明确不内置任何高级组件——LiquidButton、LiquidToggle、LiquidSlider、LiquidBottomTabs全部是示例代码放在androidApp/src/main/java/com/kyant/backdrop/catalog/components/下。这意味着你有充分的自由去抄作业把同样的drawBackdrop DampedDragAnimation组合改造成你自己的评分条、播放进度条、底部导航。这个项目的文档与生态情况仓库本身就是一个带说明书的产品依赖已发布到 Maven Central随库附带在线文档演示应用androidApp本身就是交互式 API 手册每个效果都带可调参数比纯文字文档直观得多。组件源码按catalog/components/、效果实现按backdrop/src/commonMain/kotlin/com/kyant/backdrop/effects/分门别类结构清晰适合想贡献的人直接按目录下手——修 bug、加新效果、补测试都是不错的切入点。现在去做这 3 件事别停留在收藏夹里。按这个顺序动手克隆仓库装好androidApp/release/androidApp-release.apk把参数面板每个滑块都拖一遍感受液态的边界在哪打开LiquidSlider.kt照着第四步的代码结构把背景换成你自己的界面内容把第一个blur lens挂到你产品里最常用的一个控件上发给同事看效果。三分钟前你觉得液态玻璃是设计稿里的玄学三分钟后你会开始纠结下一块玻璃该放在哪个页面——这个方向就对了。【免费下载链接】AndroidLiquidGlassCompose Multiplatform Liquid Glass effect项目地址: https://gitcode.com/gh_mirrors/an/AndroidLiquidGlass创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考