液态玻璃用户界面动画，最近在 UI 动效圈子里越来越常见。圆角卡片缓缓浮起，边缘滑过一道细亮的高光，背后模糊的色块被轻微折射，像是隔着水滴看屏幕。很多人看完 After Effects 教程后觉得不难，真正动手时才发现：卡片做出来了，半透明也做了，但效果不像液态玻璃，更像一块没擦干净的塑料板。
问题不出在参数，也不出在人。液态玻璃这类视觉风格，本质上不是某一个“玻璃滤镜”能搞定的。它和普通毛玻璃 UI 的区别在于，它不仅要“透出背后”，还要有液体般的边缘、流动感和折射畸变。这意味着在 AE 里，你必须把一个材质问题拆成很多层来分别解决。标题里那套写着“13个苹果液态玻璃用户界面高级创建动画”的中文字幕教程，看起来是一连串案例，但真正值得带走的，其实是这套图层协作的工作流。
1. 先搞清楚“液态玻璃 UI”到底难在哪里
1.1 它不是一种滤镜，而是一组图层的协作
在 AE 里做玻璃效果，很多人第一反应是搜“玻璃插件”或“Glass Effect”。确实有 CC Glass、Bevel Alpha 等内置效果，也有第三方材质插件。但苹果界面里那种液态玻璃，和产品渲染里的固态玻璃不一样。它更依赖“合成”而不是“材质”。单个效果只能提供其中一维信息：模糊能模拟透光，高光能模拟反光，置换能模拟折射，阴影能模拟高度。把这几个信息叠在同一块形状上，玻璃感才会出现。
如果你只是用一个半透明白色形状，然后加高斯模糊，结果就只是一个模糊的半透明矩形，没有材质反馈。因为人眼判断“玻璃”，靠的是多个线索同时出现：边缘高光、底部阴影、背后内容的扭曲、光线的方向性。少一条线索，材质感就会降一级。这也是为什么很多新手把教程里的半透明参数抄得一模一样，最后效果依然不像。
所以在开始做之前，要先想清楚：你的合成里，由哪一层负责定义“玻璃的边界”，由哪一层负责定义“玻璃的材质”，由哪一层负责后期“玻璃的动效”。
1.2 苹果界面里的玻璃感，拆开看通常有四层
一张常见的苹果液态玻璃卡片，大致可以拆成四个识别层：
- 背景层：卡片后面的渐变、噪波或实际界面内容。玻璃是透明的，如果背景是一张纯色图，玻璃感会立刻消失。背景越有信息量，玻璃感越明显。
- 玻璃主体层：一个形状或者素材，负责定义卡片的边界与透明度。通常用白色或浅灰色填充，配合 20% 到 50% 不透明度。
- 光照层：包括顶部高光、边缘亮线、内部阴影。这一层负责定义材质。光源方向统一时，卡片才有“实体感”。
- 内容层：图标、文字、按钮，放在玻璃层上方。这里的关键是内容不能被玻璃模糊掉，但可以保留玻璃折射带来的轻微错位。
这四层不是死规矩。有的设计会把内容层压在玻璃层下面，利用轨道遮罩做“玻璃内刻字”。有的设计会省略背景层，因为界面上本身就是真实内容。但不管怎么调整，逻辑是一样的：先有可透的内容，再有玻璃体，再给光照，最后放交互内容。这个框架，就是后面 13 个案例里反复出现的底牌。
2. 13 个案例的正确刷法：先建立工作流，再谈花样
2.1 第一遍：用一条最短路径跑通玻璃卡片
拿到一套 13 个案例的教程，最不应该做的事是打开第一集，跟着一步步做完，再打开第二集。因为这类教程最值钱的不是案例本身，而是一遍又一遍地演示同一个底层工作流。如果你能先自己搭一个最简玻璃卡片，再回头去看案例，你会发现自己是在“查漏”，而不是“初学”。
最短路径我建议这样做：
- 新建一个 1920×1080 的合成，时长 5 秒。
- 背景层放三个不同颜色的圆形渐变，互相错开，加一个快速模糊。
- 用圆角矩形工具画一个卡片，填充白色，不透明度先设成 30%。
- 给卡片加高斯模糊或快速方框模糊，让背景在卡片区域变得柔和。
- 复制一个卡片形状，去掉填充，加 2 像素描边，模拟边缘高光。
- 在卡片上方放一个图标或者一行文字，加上入场动画。
- 直接预览，看整体像不像一块玻璃。
关键不在参数，而在第 4 步和第 5 步。没有背景模糊，玻璃感会弱很多；没有边缘高光，卡片会变成半透明塑料。这一步的目的不是做出完美成品，而是建立“背景—玻璃—高光—内容”的最小闭环。
2.2 第二遍：挑 2 到 3 个案例做变体练习
13 个案例通常不会都是同一个类型，常见会包括玻璃卡片入场、时钟或天气控件、底部弹窗、列表滚动、按钮切换、进度环、玻璃面板上的数字变化等。
最有价值的做法是挑 2 到 3 个“你最不可能直接做出来”的案例。比如做不到复杂控件，就做它；做不到列表滚动时的折射跟随，就做它。变体练习的最大价值是逼你跳出形状库和参数表，去理解“同样的玻璃结构，换一种界面就换一种组织方式”。
这一遍仍然不要追求一次看完。一个案例做两遍，比两个案例各做一遍效果要好得多。做第一遍的重点是还原，做第二遍的重点是改：把卡片改成弹窗，把白色改成浅灰色，把圆角改成大圆角，看工作流哪里会断掉。哪里断掉，哪里就是你还没真正理解的地方。
2.3 别陷入“参数抄写”陷阱
教程里经常会出现一组参数：模糊半径 35、不透明度 28%、缩放 0.82、关键帧曲线 38%。这些数字的成立前提有很多：合成分辨率是多少、字体多大、卡片多大、背景噪波密度是多少。在 1920×1080 下合适的模糊半径，放到 1280×720 下可能就太糊。
看教程时，可以顺便记录“作者为什么调这个参数”。如果作者只给了结果，不给原因，就自己试着改一次。把模糊半径从 30 改成 60，看发生了什么；把不透明度从 30 改成 10，看发生了什么。只有亲手试过前后的差异，带走的才是理解，不是数字。
3. AE 里做液态玻璃卡片的可复用制作流程
3.1 图层结构：从背景到内容层依次怎么放
下面是一套常见且稳定的图层顺序，可以作为玻璃卡片模板：
| 层名 | 类型 | 作用 |
|---|---|---|
BG | 形状/素材 | 提供背景信息，是玻璃透光的来源 |
BG_Refraction | 预合成 | 背景的副本，配合置换图产生折射 |
GLASS_Card | 形状层 | 半透明填充，定义玻璃边界 |
GLASS_Highlight | 形状层 | 顶部/边缘高光，定义材质 |
GLASS_Shadow | 形状层/投影 | 底部阴影，建立悬停高度 |
CONTENT_* | 矢量/文字 | 图标、标题、按钮，处于最上层 |
FX_Ambient | 调整层 | 可选，统一调色和光感 |
具体操作时，BG_Refraction通常放在GLASS_Card上方，然后通过一个轨道遮罩把它裁剪到卡片内部，再用置换图调整可见区域的扭曲。这么做是因为真实玻璃只会扭曲玻璃范围内的背景，玻璃范围外不应该有折射。
这里要特别强调“预合成”的作用。GLASS_Card如果是一堆形状层堆在一起，建议先打包成预合成，再放到总合成里。这样只需要控制一个层的位移、缩放、透明度，就能带动整块玻璃。在制作动画时，这个习惯能省下大量反复点选图层的时间。
3.2 关键效果与参数：模糊、置换、高光、阴影
在 AE 里做玻璃卡片，通常会用到以下几类内置效果：
- 背景模糊：可以用“高斯模糊”或“快速方框模糊”。快速方框模糊渲染更快，适合预览；高斯模糊质感更柔，适合最终输出。
- 置换图：用“置换图”效果模拟折射。置换图层可以用“分形杂色”生成，把对比度拉低、模糊加大，让置换更柔和。
- 高光：不一定要用效果。复制形状层，改成描边，或者画一条细长的圆角形状，放在卡片顶部，配合渐变或线性擦除，可以做出流动的液态边缘。
- 内阴影：用“投影”效果把距离设为 0，阴影柔和度加大，可以做出玻璃边缘内部的暗部，增加厚度感。
- 底部阴影：真正让卡片浮起来的是底部阴影，不是描边。可以用一个黑色椭圆模糊后放在卡片下面，不透明度 20% 左右比较自然。
参数不能直接照搬。但有一个经验：模糊半径和玻璃覆盖范围强相关，不要只看玻璃边缘的模糊效果，要看内容透过后的形态。模糊太小像透明塑料，模糊太大会失去边界感。
3.3 最小动效模板：位置、缩放、透明度、背景模糊的关键帧
动效一般从这四组属性开始：
- 位置：卡片从下方或侧面进入。
- 缩放：入场时从 0.85 到 1.0，可以带一点回弹。
- 不透明度：从 0 到 100，配合位置错开时间。
- 背景模糊半径：可以从比较大的模糊慢慢收紧，模拟“对焦”过程。
给这四组属性打关键帧时，注意时间错开。不要同一帧全部开始，错开 4 到 8 帧会自然很多。
如果想让背景噪波动起来，可以给“分形杂色”的演化属性打关键帧，然后添加循环表达式：
loopOut("cycle");这个表达式很常见，作用是让已有关键帧持续循环。适合做背景的液态流动感，让玻璃背后一直有微弱的动态。
4. 决定最终质感的四个细节：光线、折射、节奏和曲线
4.1 高光方向要统一，否则玻璃变成塑料
很多人做玻璃，左边给了一束高光，右边又加了一圈描边，灯光方向完全不一致，最后像一块上面涂了荧光漆的塑料板。
真实光照是有方向的。给玻璃卡片打高光前，先确定光源方向。比如“左上方来光”，那么顶部高光应该偏亮、偏细；右侧或底部的高光偏暗、偏宽；内部阴影出现在左下角。
建议在合成里放一个不可见的形状层，命名为LIGHT_Reference，只用来提醒自己光源方向。做多张卡片时，这个参考层能防止光源乱掉。
4.2 折射感来自背景层和玻璃层之间的位移差异
玻璃态 UI 的灵魂是折射。不是简单模糊，而是背景在玻璃边界处被轻微“推”开。
实现方法很直接：在玻璃层上方放一个背景副本，用“置换图”效果替代原背景。置换图层用“分形杂色”生成，并尽量让噪波频率低一些。再把该层通过轨道遮罩限制在玻璃卡片范围内。这样当背景或玻璃移动时，卡片内部的背景会有一个与其周围不同的偏移，看起来就像光线穿过液体。
这个技巧在动态里更能体现。如果你只是截图看一帧，可能会觉得“不明显”。不要因为不明显就删掉它，因为液态感更多是靠动态反差建立起来的。
4.3 动效不是特效，可以先调速度曲线再打磨细节
做界面动效，最大的问题不是关键帧不够，而是速度曲线太平均。
AE 默认的关键帧是线性插值，所有属性匀速变化，动画会显得很机械。正确做法是：给关键帧套用F9（Easy Ease），然后在曲线编辑器里把入场设为“快进慢出”，把回弹设为“过冲一点再回来”。
建议的参数调整顺序：
- 先只调位置和缩放曲线，不看材质细节。
- 确定整体节奏顺畅后，再回到材质层调高光、模糊、阴影。
- 所有层的入场时间错开 3 到 6 帧，形成层次。
不要一上来就调高光不透明度，结果动画节奏一改，所有细节都要重来。调曲线是这个阶段最值钱的操作。
4.4 回放时的两个关键习惯：切换分辨率预览和关闭运动模糊
做这种多层模糊效果，预览卡顿是正常的。很多人在预览时习惯把分辨率拉到 Full，然后嫌卡，又以为自己设置错了。
更实用的是：预览时用 Full 分辨率的 1/2 或 1/4，先确认动效节奏；最终调材质时再切回 Full，单独看几帧；如果合成里开了运动模糊，会显著增加计算量，预览时可以先关掉，输出前确认效果再打开。
真正决定作品成色的，往往是这些看起来不够“炫”的工作习惯。
5. 做这类效果最容易翻车的不是效果本身，而是卡顿和崩溃
5.1 为什么玻璃效果会让 AE 变慢：缓存、模糊和预合成
液态玻璃效果天然吃性能，因为画面里到处都是半透明模糊，AE 每渲染一帧都要计算大量像素。如果你再叠加多级预合成，预览时会等比放大计算量。
常见的原因有：
- 合成尺寸太大，比如 4K 下做大量模糊。
- 每个模糊效果都开全屏采样，没有考虑区域限制。
- 交叠的半透明层太多，造成反复混合。
- 缓存盘空间不足，或缓存文件被系统清理工具误删。
- 第三方插件或预设版本过旧，和当前 AE 版本冲突。
遇到这些问题，先不要怀疑“电脑不行”。多数是项目组织方式的问题。把背景副本、玻璃层、内容层分别放进预合成，能明显降低主合成的计算压力。
5.2 遇到崩溃日志时，先别急着搜那串乱码
有些朋友在 AE 崩溃后，会看到一段“正在发生崩溃”的提示，末尾带着类似f8357e9d-dde2-46f5-b0d7-a1d59ef04a2e这样的字符串。这种字符串不是普通错误码，更像 Adobe 内部记录的模块或会话标识，在不同机器、不同版本之间往往没有可比性。搜这串字符不一定没有结果，但很难得到准确答案。
更值得做的是回顾崩溃前的操作路径。可以问自己：
- 我刚刚是打开了一个新效果，还是调整了一个关键参数？
- 我是不是同时开了很多个大合成，还都在预览？
- 我最近安装过插件吗？插件是否兼容当前版本？
- 我是在 16 bit 还是 32 bit 色彩深度下做的？
很多崩溃是可复现的。如果关闭某个效果后，再操作就不崩了，那问题大概率出在这个效果本身，或者出在它与显卡驱动的组合上。
5.3 一套从现象到根因的排查链路
如果现在遇到了“卡顿、崩溃、黑屏、渲染失败”中的任意一个，可以按这个顺序排查：
| 步骤 | 检查项 | 典型动作 |
|---|---|---|
| 1 | 现象 | 是卡顿还是直接退出？切换窗口时是否恢复？ |
| 2 | 输入 | 合成尺寸多大？素材是 4K 还是 8K？有多少嵌套预合成？ |
| 3 | 环境 | 磁盘剩余空间、内存占用、显卡驱动版本、AE 版本、插件数量 |
| 4 | 参数 | 模糊半径、置换强度、预览分辨率、运动模糊、缓存清理 |
| 5 | 边界 | 先关闭高层级效果，逐层打开，找到“加了它就开始出问题”的那一层 |
这五步看起来简单，但能解决大部分问题。一定不要没备份就反复重装软件或更换驱动，那样只会让问题更复杂。
建议至少开启 AE 的自动保存，并手动另存为
v01、v02这类版本文件。崩溃最可怕的不是丢失时间，而是丢失那个你还没看清的“成功状态”。
6. 从“跟着教程做”到“随手就能做”的工程化习惯
6.1 命名与分组：让半年后的自己能看懂
在项目里建立一套固定的图层命名规范，比如：
- 以
BG、GLASS、HILITE、SHADOW、CONTENT作为前缀。 - 每个合成内部最多保持 3 到 5 个逻辑层级，其余用预合成收敛。
- 给图层设置颜色标签：蓝色是背景，紫色是玻璃，绿色是内容，红色是特效。
这套规范不需要多复杂，但能让你在两周后回到项目时快速定位。这也是“工程化”的真正含义：不止是项目能跑，还包括别人能接手、未来的你能接手。
6.2 把常用结构存成模板，而不是每次重绘
当你做完第一块满意的玻璃卡片，把它保存成一个模板合成就够了。不需要每次都从零开始画。
具体做法：
- 把玻璃卡片相关层打包成一个预合成，命名为
UI_GlassCard_Template。 - 在模板合成里保留几个可替换的占位图标和文字标签。
- 每次新建项目时，从模板合成复制一份，修改背景、内容和关键帧。
这样做的好处是，13 个案例学到后面，你实际上拥有的是一个“玻璃控件库”。图标不同、文字不同、动画节奏不同，但底层结构一致。之后不管是做弹窗、按钮还是底部导航，都能直接复制修改。
6.3 用预合成隔离复杂度，用版本文件保留后路
预合成是 AE 里最容易被忽略但最有效的工程手段。
- 每个玻璃卡片是一个预合成。
- 玻璃卡片内部的高光、阴影、内容各自再组一层。
- 动画主要加在预合成这个层面，内部尽量保持稳定。
这样在总合成里只需要做“位置、缩放、旋转、透明度”这些宏观动作，不用每次都钻进内部图层里找东西。
版本文件更简单：每完成一个阶段，另存为xxx_v02.aep，而不是原地覆盖。如果改坏了，直接打开上一个版本继续。这比任何撤销操作都可靠。
6.4 什么时候你才算真的掌握了这套技术
我认为判断标准只有一个：把随便打开的一个 UI 设计稿，或者你手机里某张漂亮界面的截图，作为目标，在三十分钟左右用 AE 搭出一个动态玻璃样稿。
如果你能做到“先分图层、再定材质、最后调曲线”，说明你已经掌握了液态玻璃 UI 的工作流。这时候教程里的 13 个案例就不再是任务列表，而是一套可以被替换的素材。
液态玻璃用户界面动画看起来炫，但它和技术圈里很多问题一样，难点不在“找到正确参数”，而在“建立正确的图层协作方式”。从你开始理解“玻璃是一组图层互相配合的结果”那一刻起，后面所有的教程都只是在帮你验证流程。把案例做完不是终点，能从案例里提炼出一套属于自己的控件模板，才算是真正学到了。
