液态玻璃用户界面动画最近在 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 默认的关键帧是线性插值所有属性匀速变化动画会显得很机械。正确做法是给关键帧套用F9Easy 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 个案例就不再是任务列表而是一套可以被替换的素材。液态玻璃用户界面动画看起来炫但它和技术圈里很多问题一样难点不在“找到正确参数”而在“建立正确的图层协作方式”。从你开始理解“玻璃是一组图层互相配合的结果”那一刻起后面所有的教程都只是在帮你验证流程。把案例做完不是终点能从案例里提炼出一套属于自己的控件模板才算是真正学到了。