平时做 UI 动效时我最常被问到的问题就是苹果那种半透明、带景深、边缘还有一层淡淡高光的“液态玻璃”界面到底是怎么做出来的网上的教程大多只讲了静态毛玻璃一到动态交互就没了下文。这篇文章我打算系统拆解一套基于 After Effects 的液态玻璃 UI 动画制作思路覆盖 13 个常见的界面动画案例并给出可以直接照着做的核心合成结构和参数适合刚接触 AE 动效的 UI 设计师也适合想进阶动效细节的开发者。1. 什么是液态玻璃 UI 动画1.1 液态玻璃的设计背景“Liquid Glass” 是苹果在近年操作系统更新中主推的一种视觉语言。它的核心不只是“把一个矩形变模糊”而是通过多层半透明材质、边缘高光、背景折射和动态景深让界面元素像真实玻璃一样悬浮在内容之上。和早期拟物化设计不同液态玻璃更强调“层级感”和“环境响应”。同一个玻璃卡片放在深色背景上和放在浅色背景上观感完全不同当背景内容滚动或移动时玻璃内部的模糊与折射也会跟着变化这就是它看起来“活”的原因。1.2 为什么用 After Effects 做这类动画液态玻璃动效的难点在于它不是单一效果而是模糊、高光、边缘、景深、运动曲线等多个要素的组合。After Effects 的图层合成模型非常适合这种分层控制背景层负责提供画面内容玻璃形状层负责定义范围模糊层负责模拟磨砂质感高光层负责塑造玻璃边缘动画曲线负责让卡片移动时有“重量感”。换句话说AE 里的每一个视觉要素都可以拆成独立图层来控制这正好对应液态玻璃的多层特性。1.3 常见应用场景液态玻璃 UI 动画主要用在以下场景App 启动页和引导页的玻璃卡片入场控制中心、通知中心、侧边栏等半透明面板的展开收起播放器界面中的毛玻璃背景和滑块交互加载动画、切换动画、按钮点击反馈产品宣传视频中的 UI 展示动效。这些场景都有共同点需要在“内容可见”和“层级清晰”之间取得平衡。液态玻璃的优势正在于此——它既能保持背景内容的可见性又不会让文字和控件失去可读性。2. 环境准备与版本说明在开始动手之前先确认软件环境。本文示例不需要第三方插件所有效果都使用 After Effects 内置功能完成。2.1 软件版本项目建议配置操作系统Windows 10/11 或 macOS 12 以上After Effects2023 版本及以上推荐 2024/2025显卡支持 OpenCL/CUDA/Metal用于 GPU 加速预览分辨率1920 x 108030fps第三方插件不需要本文全部使用内置效果如果你的版本较旧部分效果参数名称可能略有差异但整体原理不变。版本需要根据你的项目实际情况调整本文示例以常见环境为例重点演示配置思路。2.2 开启 GPU 加速AE 默认可能使用 CPU 渲染做模糊类效果时会比较吃力。建议提前开启 GPU 加速# 菜单位置 编辑 - 首选项 - 预览 - GPU 信息或者文件 - 项目设置 - 视频渲染和效果 - 使用 Mercury GPU 加速选择 GPU 加速后快速方框模糊、高斯模糊等效果的预览速度会有明显提升。2.3 素材准备本文案例不需要外部素材我会用纯色层和形状图层搭建一个简单的“背景画面”方便你聚焦在玻璃质感的制作上。如果你有真实的 UI 设计稿或视频背景也可以直接替换。3. 液态玻璃的核心视觉原理3.1 玻璃的五层视觉要素做液态玻璃之前先建立一套拆解思维。一块看起来真实的玻璃界面至少包含下面五个要素视觉要素作用AE 对应做法背景虚化让玻璃后面的内容变得模糊快速方框模糊、高斯模糊半透明底色玻璃本身带有一定颜色倾向白色填充 降低不透明度边缘高光玻璃边缘有一圈亮边描边、内阴影、白色半透明形状层动态折射背景内容在玻璃内部有轻微错位湍流置换、光学补偿、缩放位移景深层次玻璃元素与背景拉开距离投影、缩放、模糊半径差值需要特别说明的是只做“模糊 白色半透明”是不够的这样出来的效果更像“毛玻璃”而不是“液态玻璃”。液态玻璃更强调边缘和动态感所以高光与折射这两层不能省。3.2 AE 中实现玻璃质感的核心图层结构下面是一个最基础的玻璃卡片合成结构后续所有案例都可以在此基础上扩展合成LiquidGlassCard ├── 背景层图片/视频/图形 ├── GlassShape圆角矩形形状层纯色填充透明度约 20% ├── BlurLayer复制背景层添加快速方框模糊用 GlassShape 作为 Alpha 遮罩 ├── Highlight白色半透明形状层位于玻璃边缘内侧 └── Shadow玻璃下方的投影模拟悬浮这个结构的核心思想是模糊层决定玻璃区域的内容模糊程度形状层决定玻璃的范围高光层决定玻璃的质感。3.3 折射效果的最小实现折射是让玻璃看起来“有厚度”的关键。最简单的做法是利用 AE 的“湍流置换”效果给背景副本加一个极小的置换效果扭曲 - 湍流置换 数量10 ~ 20 像素 大小80 ~ 120 演化表达式 time * 20这样背景内容在玻璃范围内会有一种轻微的流动感但它不会单独占用图层而是直接添加在 BlurLayer 上。4. 13 个液态玻璃 UI 动画案例概览下面这 13 个案例是我按照“从简单到复杂”的顺序整理的覆盖了 UI 动画中最高频的交互场景。序号案例名称核心技法难度1玻璃解锁滑块扫光高光 弹性回弹低2玻璃卡片悬浮景深模糊 位置弹性低3毛玻璃弹窗弹出背景虚化 缩放淡入低4异形玻璃按钮多边形遮罩 边缘高光中5玻璃 Tab Bar 切换选中滑块弹性过渡中6通知中心下拉模糊层级联动中7侧边栏展开透明面板滑入 背景压暗中8播放器进度滑块圆头玻璃滑块 进度填充中9加载玻璃环旋转描边 渐变扫光低10玻璃图标 3D 翻转透视变化 反射模拟高11控制中心模块多卡片拼接 独立阴影中12下拉刷新回弹弹性动画 跟随运动中13玻璃文字标题文字质感 背景模糊联动中接下来我会选取其中 4 个代表性案例做完整实战演示。掌握了这 4 个案例其余案例的核心逻辑是相通的。5. 完整实战案例5.1 案例一玻璃卡片悬浮动画这是一个最基础也最常用的案例。先创建玻璃卡片再让它做一个“悬浮 轻微回弹”的入场动画。5.1.1 创建合成与背景新建合成1920 x 108030fps持续时间 5 秒名称 LiquidGlassCard在合成中新建一个纯色层作为背景然后给背景添加渐变效果模拟一个较丰富的画面内容效果生成 - 渐变渐变Gradient Ramp 起始颜色深蓝色 RGB(18, 32, 58) 结束颜色紫色 RGB(96, 58, 130) 渐变形状径向渐变如果想让背景更丰富可以再加几个圆形形状层位置分散一些。为了让后面的玻璃模糊有内容可“糊”背景最好有一定对比度不要用纯色。5.1.2 创建玻璃形状在图层窗口右键选择“新建 - 形状图层”然后绘制一个圆角矩形大小800 x 500 圆角半径60 填充颜色白色 填充不透明度15% 描边无不要直接给这个图层加模糊它只负责定义玻璃范围。5.1.3 创建模糊层选中背景图层按Ctrl DMac 为Cmd D复制一份命名为 BlurLayer放在背景层和玻璃形状层之间。给 BlurLayer 添加模糊效果效果模糊与锐化 - 快速方框模糊 模糊半径30 迭代次数2然后把 BlurLayer 的轨道遮罩设置为“Alpha 遮罩 GlassShape”将 BlurLayer 的 Track Matte 改为 Alpha Matte GlassShape这一步完成后只有玻璃形状范围内的背景会变模糊形成磨砂玻璃区域。5.1.4 添加边缘高光为了让玻璃边缘更透亮再复制一个形状层命名为 Highlight修改如下填充无 描边颜色白色 描边宽度4 描边不透明度60%然后给 Highlight 图层添加“快速方框模糊”模糊半径设为 2让描边稍微扩散模拟光线透出的柔和感。5.1.5 悬浮动画选中 GlassShape、BlurLayer、Highlight 三个图层按Ctrl Shift C预合成为一个合成命名为 Card。然后给 Card 图层的“位置”属性设置关键帧动画第 0 帧位置向下偏移 200 像素透明度 0% 第 15 帧位置回到原始位置透明度 100%最后选中位置关键帧右键选择“关键帧辅助 - 缓动”并打开图表编辑器把曲线调成“先快后慢后回弹”的形状。如果不想手动调曲线也可以直接用后面的惯性回弹表达式。5.2 案例二玻璃 Tab Bar 切换动画Tab Bar 是移动端 UI 中最常见的组件。液态玻璃版本的关键在于选中背景的弹性滑动。5.2.1 搭建 Tab Bar新建合成大小为800 x 120。创建三个文字图层首页、发现、我的。再画一个圆角矩形作为 Tab Bar 底栏大小800 x 100 圆角半径30 填充颜色白色 填充不透明度20%5.2.2 创建选中滑块再画一个小一点的圆角矩形作为选中项的玻璃背景大小220 x 80 圆角半径40 填充颜色白色 填充不透明度35% 描边颜色白色 描边宽度2 描边不透明度50%选中滑块需要放在三个 Tab 文字下层位置初始对齐“首页”。5.2.3 滑块切换动画给滑块的位置属性添加三个关键帧分别对应三个 Tab 的位置第 0 帧首页位置 第 15 帧发现位置 第 30 帧我的位置然后给这组位置关键帧添加惯性回弹表达式。选中位置属性按Alt 鼠标左键点击码表打开表达式编辑器输入// 惯性回弹表达式添加到位置属性 const amp 20; const freq 2; const decay 4; n 0; if (numKeys 0) { n nearestKey(time).index; if (key(n).time time) n--; } if (n 0) { t time - key(n).time; v velocityAtTime(key(n).time - thisComp.frameDuration / 10); value v * amp * Math.sin(freq * t * 2 * Math.PI) / Math.exp(decay * t); } else { value; }这段表达式的含义是当位置关键帧变化时滑块会先冲向目标位置然后以衰减振荡的方式停下形成类似“液体惯性”的效果。5.2.4 Tab 文字切换给三个文字层做透明度切换选中 Tab 时文字不透明度提升到 100%未选中保持 60%。这一步可以用表达式联动选中滑块的位置也可以手动打关键帧根据你的项目复杂度决定。5.3 案例三玻璃按钮高光扫过玻璃按钮往往需要一种“光线从表面滑过”的动效这是体现玻璃质感的重要细节。5.3.1 创建按钮底部新建合成大小为600 x 200。创建一个圆角矩形大小400 x 120 圆角半径60 填充颜色白色 填充不透明度20% 描边颜色白色 描边宽度3 描边不透明度70%5.3.2 创建高光条新建一个形状图层画一个细长条大小120 x 80 旋转-20 度 填充颜色白色 填充不透明度60% 模糊快速方框模糊半径 20把这个高光条放置在按钮左侧外部然后给位置属性打关键帧让它从左侧移动到右侧超出按钮边界第 0 帧位置 x 100 第 20 帧位置 x 5005.3.3 裁剪高光范围高光条不能超出按钮区域。最简单的方法是把高光条放在按钮合成内部然后用按钮的圆角矩形作为轨道遮罩。具体操作1. 先创建按钮底部形状层 ButtonBase 2. 再创建高光条 HighlightBar 3. 将 HighlightBar 的 Track Matte 设为 Alpha Matte ButtonBase这样高光条只会出现在按钮范围内边缘还会严格贴合按钮的圆角过渡非常自然。5.4 案例四玻璃文字标题液态玻璃风格的文字标题适合做开场页和 Banner。原理和卡片一样让文字背后的内容虚化同时文字本身有一定的通透感。5.4.1 准备文字层新建合成输入标题文字例如Liquid Glass UI字体建议选择较粗的字体字形太细会削弱玻璃质感。5.4.2 制作文字玻璃效果将文字层复制一份命名为 TextSolid设置填充色为白色不透明度设置为 40%。回到背景层复制背景添加快速方框模糊模糊半径 25。然后用 TextSolid 作为轨道遮罩使模糊范围严格限制在文字内部。这样文字内部显示的是模糊后的背景文字周围则正常显示背景内容文字就像一块挖空的玻璃。5.4.3 添加文字描边光再复制一个文字层关闭填充只保留描边描边颜色白色 描边宽度2 描边透明度80%并添加一个小半径的模糊让描边看起来柔和发光。这样文字标题就有了玻璃边缘的轮廓感。6. 动画曲线与表达式技巧6.1 为什么 UI 动画必须调曲线AE 默认的关键帧插值是线性插值。线性运动看起来“机械感”很强因为真实世界中的物体移动都有加速和减速。在 UI 动效中我建议统一使用以下两种曲线规则场景推荐曲线元素入场先快后慢Ease Out元素退场先慢后快Ease In滑块、卡片切换惯性回弹曲线无限循环动画关键帧首尾对齐后用 loopOut选中关键帧后按F9可以快速添加缓动然后在图表编辑器里调整贝塞尔曲线的手柄。6.2 常用表达式随机浮动玻璃卡片在做“待机悬浮”时可以使用 wiggle// 位置属性表达式 wiggle(1, 10); // 每秒随机 1 次幅度 10 像素如果不希望 Y 轴也随机可以只作用于 Y 轴// 保持 X 轴不动Y 轴做轻微浮动 x transform.position[0]; y transform.position[1] Math.sin(time * 2) * 5; [x, y];Math.sin方式比 wiggle 更适合精细控制因为它是可预测的周期性运动。无限循环做加载动画或背景流动时常用 loopOut// 位置或旋转属性表达式 loopOut(cycle, 0);这样最后一个关键帧之后会循环播放从第一个关键帧开始的动画适合旋转描边、扫光循环等场景。6.3 图表编辑器实操打开图表编辑器选中图层 - 按 Shift F3 - 点击图表编辑器图标调整曲线时把速度手柄向左上方拖可以让动画更快起步更晚减速向右下方拖则相反。建议每个动画都至少调一次曲线不要直接用线性关键帧。7. 常见问题与排查思路7.1 常见报错与现象问题现象常见原因解决思路玻璃边缘有硬边模糊层没有正确对齐遮罩或模糊半径太小增大模糊半径检查轨道遮罩图层玻璃质感像塑料缺少边缘高光或填充不透明度太高增加描边高光层降低填充不透明度动画预览卡顿模糊效果实时计算占资源降低预览分辨率到 1/2 或 1/4开启 GPU 加速表达式报红色错误中英文标点混用或函数名写错检查引号、分号、括号尽量在英文输入法下编写玻璃颜色溢出底色不透明度太高或背景颜色太暗降低底色不透明度增加背景亮度位置关键帧动画生硬没有调曲线线性插值运动机械使用 F9 添加缓动或用惯性回弹表达式高光条超出按钮范围没有使用轨道遮罩用按钮形状作为高光条的 Alpha 遮罩7.2 排查 checklist[ ] 轨道遮罩是否选择了正确的图层[ ] 模糊效果是加在 BlurLayer 上还是错误地加在了玻璃形状上[ ] 高光层是否放在了玻璃层上方[ ] 是否开启了隐藏图层导致看不到内容[ ] 预览时是否关闭了运动模糊或降低了解析度[ ] 表达式中的标点是否为英文半角8. 最佳实践与工程建议8.1 图层命名规范做液态玻璃动画时图层数量会快速增加。建议统一使用前缀命名BG_xxx 背景层 Blur_xxx 模糊层 Glass_xxx 玻璃形状层 Light_xxx 高光层 Shadow_xxx 阴影层 FX_xxx 特效调整层这样在合成面板中一眼就能识别每个图层的职责尤其是项目交接给同事或一个月后回看时能节省大量时间。8.2 用预合成控制复杂度如果一个动画涉及 5 个以上的图层就考虑把静态部分预合成把动态控制留在外层。例如案例一中玻璃卡片的三层结构GlassShape、BlurLayer、Highlight预合成后外层只需要控制一个 Card 合成的位置和不透明度。这样动画曲线、关键帧都集中在顶层不会出现几十个图层同时打关键帧的情况。8.3 性能优化做玻璃效果时快速方框模糊比高斯模糊的计算速度更快尤其是迭代次数设置为 2 时视觉差异不大但性能差异明显。预览时可以使用以下组合1. 预览解析度调为 1/2 2. 关闭不必要图层的运动模糊 3. 使用 Shift 数字键 0 缓存预览 4. 避免在一个合成中堆积过多高分辨率模糊效果8.4 渲染输出设置最终导出建议使用两种格式成片预览H.264 MP41920x108030fps码率 10 Mbps 后期交付QuickTime ProRes 422保留透明通道则使用 ProRes 4444如果你的动画需要放进其他视频中二次合成建议直接输出带 Alpha 通道的 ProRes 4444如果只是发到网上展示输出 H.264 MP4 即可。8.5 安全边界不要使用来源不明的第三方“滤镜包”或“脚本”AE 脚本有权限访问你的文件系统只安装可信来源的脚本。做商业项目时注意背景素材的授权包括字体和图片。操作前养成备份项目文件的习惯AE 工程文件损坏后很难恢复建议开启自动保存或使用版本管理。9. 总结与下一步学习路线写到这里你应该已经掌握了液态玻璃 UI 动画的核心分层结构和几种关键动效的写法。我们再来回顾一下这套方法论的核心链路定义玻璃范围 - 复制背景并模糊 - 用范围图层做遮罩 - 叠加高光与阴影 - 用曲线控制动态这套链路可以应用在本文列出的 13 个案例中的绝大多数场景中。差异只在于形状不同、模糊半径不同、动画曲线不同而已。下一步建议你按以下顺序练习先做案例一的玻璃卡片悬浮确认自己理解了图层结构与轨道遮罩的用法再做案例二的 Tab Bar 切换重点体会惯性回弹表达式带来的“液态感”最后挑战案例十的 3D 翻转把摄像机景深和反射模拟加进来。在做实际项目时优先关注三点边缘高光是否明显、模糊层次是否自然、动画曲线是否有“弹性”。这三点做好液态玻璃的感觉就出来了。如果这篇教程对你有帮助可以收藏备用也欢迎在实战中多尝试不同的背景内容和光线方向慢慢你会总结出属于自己的玻璃质感参数组合。