企业官网建设流程全解析

苹果在 2025 年系统更新里把“液态玻璃”从概念演示变成了真实交互界面，整个 UI 动效圈瞬间被这个风格刷屏：卡片像水滴一样悬浮在模糊背景之上，点击时边缘高光会流动，松开后它又带着弹性回弹到原位。如果你一直在关注 AE 教程，大概率也收藏过标题带“13个苹果液态玻璃用户界面高级创建动画”的中文字幕教程。这类教程之所以受欢迎，是因为它把苹果设计语言里最难复制的部分，拆成了可以跟着做的一步步操作。

先说一个核心判断：液态玻璃在 AE 中并不神秘，难点不在“像玻璃”，而在“像液体”。很多人以为它只是一组滤镜参数，换个颜色、换张背景就完全失灵；真正的关键在于，它是由背景关系、材质高光和动态弹性共同构成的系统。这篇文章就从一个完整的 AE 制作视角出发，拆解液态玻璃 UI 动画的核心路径，并针对 13 个典型动画案例做分类讲解。读完你能理解哪些技术点决定“玻璃感”，哪些决定“液体感”，并且能用形状图层、效果控件和表达式组合出一套可落地的界面动效方案。

如果你不是特效师，而是一名 UI 设计师、动效设计师，或者正在从视觉设计转向动效开发的开发者，这篇文章可能是你需要的过渡指南。它会绕过晦涩的插件依赖，尽量用 AE 原生能力完成整套效果，因为只有理解底层原理，之后用插件、用 Lottie 导出，或者交给开发团队实现，才不会失控。

1. 这篇文章真正要解决的问题

液态玻璃相关的 AE 教程并不少，但很多资料存在三个明显问题，导致学习者学完仍不会做项目。

第一，碎片化。教程只告诉你“给这个图层加高斯模糊，给那个图层加湍流置换”，却不说为什么加、参数之间怎么联动。换一个场景，比如从卡片变成 Tab 栏，很多人就不知道怎么变通。第二，静态与动态断层。大部分文章只讲“如何做出玻璃质感”，没有深入“如何让它动起来”。液态玻璃最核心的竞争力恰恰是动态：弹性、流动、高光扫过，这些都需要动画能力。第三，插件依赖。很多教程一上来就让安装各种第三方插件，一旦插件版本不兼容，整套工程就崩了。实际上，液态玻璃 UI 的绝大多数效果，都可以用 AE 原生效果和表达式完成。

这篇文章重点做三件事：讲清楚液态玻璃的技术构成，演示从零到一的制作流程，再把 13 个常见动画案例按组件视角分类拆解。读完你会得到一个可复用的方法论，而不是一组死参数。

哪些人最该看？想系统学习 AE 动效的 UI 设计师，需要落地苹果风格界面的产品设计师，以及想理解“动效如何被实现”的前端开发者。如果你已经能熟练使用 AE 的形状图层和关键帧，这篇文章会帮助你把这些能力整合成一套液态玻璃动画工作流。

2. 液态玻璃UI的核心概念与设计特征

“液态玻璃”并不是一个严格的学术名词，而是一种设计语言。从公开信息和行业讨论来看，苹果在 2025 年的系统更新中引入了 Liquid Glass 设计语言，它的核心特征可以概括为：界面元素像液态物质一样，可以流动、弯曲、反射，并且在触摸和滑动时产生细腻的物理反馈。这套设计语言强调的不是静态的“玻璃质感贴图”，而是“动态的玻璃行为”。

要理解它，最容易混淆的概念是“毛玻璃”。毛玻璃通常指 Frosted Glass，也就是 iOS 通知中心那类效果：背景模糊、半透明、色彩被压暗，偏静态。液态玻璃则更进一步，它有更强的光感、更通透的材质变化，并且会随交互产生形变。毛玻璃是在“一块静止的磨砂板”，液态玻璃是一滴“仍在表面张力和重力之间平衡的水”。

设计特征可以拆成四个维度：

这套特征的难点在于：它们不是独立工作的，而是联动配合。高光会随着弹性而运动，折射会随着位移而改变。如果你只做静态“玻璃卡片”，那只是完成了 20% 的工作，剩下 80% 在于让玻璃行为在不同动画状态下保持一致性。

2.1 为什么 AE 适合做液态玻璃 UI

影视合成和 UI 动效是两个领域，但液态玻璃恰好落在它们的交叉点。AE 的图层、遮罩、效果、表达式和图形面板，方便构建“玻璃材质链”；同时它又支持精确的动画曲线控制，方便复现 iOS 那种微妙回弹。尤其对于 UI 设计师，AE 是设计开发交接前最直观的效果验证工具。

这里有个容易被误解的地方：液态玻璃不等于“写实的玻璃球”，它是界面层级上的抽象表达。做 UI 动画时，玻璃元素通常尺寸不大、层级清晰，过度追求物理真实反而会让界面显得沉重。好的液态玻璃 UI 动画，是让用户感知到“这个控件有生命、有反馈”，而不是让用户盯着材质细节看。

3. 环境准备与AE工程规范

在做具体效果之前，先确认基本环境。Adobe After Effects 建议使用 2022 及以上版本，版本号请以实际项目环境为准，本文演示的是通用思路，不依赖某个特定版本。系统方面，macOS 和 Windows 都可以，内存建议 16GB 以上；液态玻璃效果涉及多次模糊和置换计算，预览时如果卡顿，优先降低预览分辨率，而不是关闭效果。

这套流程不需要额外安装第三方插件，全部使用 AE 内置效果和表达式。如果后续要用 Lottie 导出，才需要安装 Bodymovin 插件，但那是最后一步，不是学习阶段的前置条件。

工程规范是从一开始就要养成的习惯。一个液态玻璃动效工程，建议按下图组织：

项目名/ ├── 00_参考/ │ ├── reference_ui.png │ └── 01_源文件.aep ├── 01_素材/ │ ├── bg.png │ └── icon.ai ├── 02_输出/ │ └── preview.mp4 └── 项目名_v1.aep

图层命名也要遵循“类型_名称_状态”的规则，例如：

• BG_BlurLayer：背景模糊层
• Glass_Card_Base：玻璃卡片基础形状
• Glass_Card_Highlight：玻璃卡片高光层
• Control_Global：全局控制层

为什么这么强调规范？因为液态玻璃效果通常有多层叠加，图层多、控制层多，没有命名和归组，两天后再打开工程会完全找不到东西。用预合成把“背景层”“玻璃卡片层”“控制层”分开，这是保证项目可维护性的前提。

3.1 AE 单位和帧率设置

液态玻璃 UI 动画面向界面交付，建议合成设置为 1080p，也就是 1920 x 1080，帧率 30fps 或 60fps。30fps 适合预览，60fps 适合最终交付，但会增加计算量。时长控制在一个交互动作 2 到 5 秒即可，不必做太长。颜色模式采用 8bit 或 16bit 都可以，UI 动效基础项目 8bit 足够，16bit 更适合带有大范围渐变和模糊的重材质效果。

4. 液态玻璃基础形态制作流程

现在进入核心制作。第一个目标是做一个“静止的”液态玻璃卡片，先建立材质感，再为后面的动画打基础。

4.1 创建玻璃卡片基础形状

新建合成，命名为LiquidGlass_Card。使用工具栏的“圆角矩形工具”，在画布中画出一个圆角卡片形状。默认情况下 AE 会创建填充和描边，这里建议先删掉描边，保留填充。填充颜色暂时设为纯白即可，后续会用模糊和透明调整材质。

卡片尺寸可以参考手机 UI 中的卡片比例，比如 640 x 360 像素，圆角半径 80 像素左右。你不需要精确复刻，重点是理解流程。

4.2 玻璃材质链：三层结构的建立

把一个白色形状变成“玻璃”，至少需要三层处理：填充、模糊、高光。

第一层是填充。形状图层默认是“颜色填充”，把它改成“线性渐变填充”，渐变色从白色 85% 透明度渐变到白色 25% 透明度。这个渐变模拟了玻璃表面的厚度变化，顶部更亮、底部更沉。

第二层是背景模糊。真正的 UI 玻璃，会对它后面的内容进行模糊处理。方式是在玻璃卡片下方放置一张背景图，然后复制这一层，添加“高斯模糊”或“快速方框模糊”，再让玻璃卡片去透出这层模糊后的背景。这样背景的色块会像隔着一层半透明介质一样，被柔和地扩散。

第三层是边缘高光。给形状图层添加“描边”，颜色为纯白，不透明度 20% 左右，描边宽度 2 到 4 像素。然后给描边添加一个轻微的“高斯模糊”，让边缘光看起来柔和，而不是一条生硬的白色线条。高光是液态玻璃的灵魂，没有高光的玻璃看起来就是一块灰色塑料。

4.3 背景关系与折射感

真正的液态玻璃，边缘会有“折射”效果。AE 中最常用的是“置换图”效果。做法是：在玻璃卡片内部放入一个内容图层，比如一个圆角矩形或者图标，然后对这个内容图层添加“置换图”效果，置换图层指向背景模糊层。通过调整最大水平置换和最大垂直置换，让内容边缘出现轻微扭曲。

不过这里要提醒一个常见误区：置换幅度不要过大。UI 玻璃的折射是细腻的，1 到 5 个像素的置换量就已经足够明显。如果你做成 50 像素的惨烈扭曲，效果会像水下摄影，而不是 UI 控件。

4.4 让玻璃层具有光感

光感来自两个层面：模糊颜色和混合模式。你可以用“调整图层”在整个卡片上方叠加一层浅白色径向渐变，混合模式设置为“叠加”或“柔光”，从而让卡片在特定位置产生光泽。这部分没有唯一参数，核心原则是：光感层级要少而准，一个高光层加一个渐变层往往比五个模糊层更干净。

做静态底层到这里已经足够。选中所有图层，右键选择“预合成”，命名为Glass_Card_Static，这样后续动画只需要操作这个整体。预合成是 AE 工程管理的重要操作，它能让一个复杂的材质链变成一个独立的可复用组件。

5. 13个动画案例拆解：从UI组件视角看动效系统

“13个苹果液态玻璃用户界面高级创建动画”这类教程的价值，不只是让你照着做 13 个独立案例，而是让你通过这些案例，理解液态玻璃在不同 UI 组件上的通用表达。通常可以把这些动画拆成 4 大类、13 个典型方向。

5.1 容器与反馈类：按钮与卡片的弹性语言

容器类动画最常用，也最能体现“液态”的物理感。以按钮按压为例，典型动作是：手指按下，按钮从 100% 缩小到 85%，边缘高光同时收缩变亮；手指松开，按钮回弹到 105%，再落回 100%。这里的核心不是缩放本身，而是回弹过冲量。如果回弹到 100% 就停止，动效没有生命力；回弹到 105% 再稳定，才符合“液滴落下再弹起”的直觉。

这类动画在 AE 中主要靠“缩放动画 + 弹性表达式”完成。卡片悬浮则在基础缩放之上加入 Y 轴位移和阴影距离变化，让卡片在垂直方向上浮动。弹窗开合还可以结合三角形蒙版路径的透明度过渡，模拟液体从中间“化开”的感觉。

5.2 导航与流转类：路径与遮罩的迁移

导航类动画的核心是“元素从一个位置移动到另一个位置”。Tab 栏滑块滑动是典型代表：一个玻璃胶囊形背景，在几个 Tab 图标之间滑动。关键在于胶囊的移动曲线，它不是匀速，而是先快后慢，接近目标时有一个轻微的气囊感。

菜单展开收起则通常使用“路径动画”。比如一个玻璃圆点，在点击后展开成一个玻璃圆角矩形。通过绘制两个路径，配合“圆角矩形路径”的圆角半径变化，或者“蒙版路径”的关键帧，在 200 毫秒到 400 毫秒内完成形态过渡。这一类动画对关键帧中间的曲线要求很高，建议在“图表编辑器”中调整贝塞尔曲线，而不是依赖默认线性。

5.3 材质与氛围类：高光与折射的变化

材质氛围类动画，往往不是某个控件的位移，而是玻璃内部质感的持续变化。最常用的是“高光扫过”：一道半透明的白色光带，从玻璃卡片左侧移动到右侧。做法就是把高光层做成一个长条形渐变，用位置关键帧让它从左扫到右，不透明度从 0 到 100 再到 0。可以配合loopOut("cycle")表达式，让高光不断循环。

背景折射模糊，则是让玻璃后面的背景层，在不同时间点切换模糊强度。例如页面从普通卡片切换到液态玻璃弹窗时，背景模糊从 0 逐渐升到 30，可以强化层级切换的沉浸感。

5.4 液态物理类：真实的流体观感

这一类最像“真液体”：液滴聚集、水波纹扩散、噪声扰动。液滴聚集可以用圆角矩形路径的角半径和形态关键帧模拟，两个圆互相靠近后合并成一个胶囊。触摸水波纹扩散则可以画一个白色圆环，缩放从 0 到 500%，透明度同步下降，“线性减淡”混合模式之下会有水波光晕。

噪声扰动主要是“湍流置换”效果：给玻璃内容层加湍流置换，把“数量”从 0 到 30 再到 0 做关键帧，能模拟玻璃内部轻微的流动感。这个效果和 2.1 节提到的折射置换不同，它强调动态、随机和持续。

到这里，13 个案例的整体面貌已经清楚。它们并不是 13 套完全不同的技术，而是同一套材质链加上不同动画变量。下面进入最重要的部分：如何用表达式和关键帧把这些静态材质“激活”。

6. 表达式与关键帧进阶：让玻璃真正“流”起来

AE 的表达式基于 JavaScript，是动效控制的核心工具。它能让你摆脱手动打关键帧的重复工作，同时让动画具有物理感和自动化能力。这里给出四个最常用、最实用的表达式，可以直接复制到属性上使用。

6.1 弹性表达式：按钮回弹的标准答案

这是最经典的 AE 弹性表达式，适合放在“缩放”或“位置”属性上。使用前提是你已经打了一组关键帧，比如从 100% 缩到 85% 再回到 100%。表达式会自动读取关键帧处的速度并产生振荡衰减。

// AE 弹性表达式 // 放在缩放或位置属性上，需要先有关键帧 freq = 3; decay = 5; n = 0; if (numKeys > 0) { n = nearestKey(time).index; if (key(n).time > time) n--; } if (n > 0) { t = time - key(n).time; amp = velocityAtTime(key(n).time - 0.001); w = freq * Math.PI * 2; value + amp * (Math.sin(w * t) / Math.exp(decay * t) / w); } else { value; }

参数freq代表振荡频率，数值越大回弹越快；decay代表衰减速度，数值越大振幅消失越快。建议从freq = 3、decay = 5起步，再根据实际观感微调。这个表达式的价值在于，它让“回弹”不再是一组手工关键帧，而是基于运动速度自动计算出的物理效果，换到任何属性上都能用。

6.2 wiggle 表达式：液态表面的自然晃动

wiggle是 AE 最常用的随机抖动表达式，适合模拟液态玻璃的轻微自然晃动，比如悬浮卡片的细微位置变化，或者玻璃高光层的亮度闪烁。

// 液态表面随机晃动 // 参数：频率 2 次/秒，幅度 12 像素 wiggle(2, 12);

放在“位置”属性上，玻璃卡片会像浮在水面一样轻轻摇晃；放在“缩放”属性上，则会有一点呼吸感。需要说明的是，wiggle是连续随机变化，不适合表现“一次点击”这种明确动作，它更适合氛围层。

6.3 滑块控制表达式：用一个控制层调整所有卡片

液态玻璃动画往往需要批量控制，比如多个卡片统一调整悬浮高度。此时可以新建一个“空对象”或“调整图层”，通过“效果 -> 表达式控制 -> 滑块控制”添加滑块，然后在其他图层引用这个值。

// 滑块控制：将滑块值(0-100)映射为缩放(80%-110%) const ctrlLayer = thisComp.layer("Control"); const s = ctrlLayer.effect("Slider Control")("Slider"); const startVal = [80, 80]; const endVal = [110, 110]; linear(s, 0, 100, startVal, endVal);

这样你不用去每一层修改关键帧，只需要拖动Control图层上的滑块，就能整体预览不同状态。对于需要“全局弹性系数”“全局模糊强度”的工程，这是最实用的工作流。

6.4 循环表达式：让高光扫过持续循环

高光扫过、背景流动这类持续动效，用loopOut表达式可以让关键帧自动循环。

// 循环关键帧动画，适合高光扫过、背景流动 loopOut("cycle", 0);

用法是：先给高光层的位置或透明度打好两个关键帧，然后添加这个表达式。第一个参数"cycle"表示循环回来，"pingpong"表示来回反射。对于 UI 场景，"pingpong"常常比"cycle"更自然，因为来回运动更接近气泡反射。

6.5 关键帧曲线的必要性

再强调一次：表达式不是万能的，它替代的是重复劳动，但动画的“节奏感”仍然需要关键帧曲线来约束。在 AE 图表编辑器中，把默认的“线性”关键帧改成“贝塞尔曲线”，让速度先快后慢。很多新手做液态玻璃动画，材质没问题，却因为关键帧曲线太平滑或太线性，最终效果显得机械。表达式负责物理规则，曲线负责叙事节奏，两者缺一不可。

7. 完整示例：制作一个液态玻璃按钮

现在用一个完整的最小示例，把上面所有知识点串起来：一个 3 秒的液态玻璃按钮按压动画。这个示例你可以直接动手做，不需要额外素材。

7.1 创建合成与形状

新建合成GlassButton_Demo，尺寸 1920 x 1080，帧率 30fps，时长 3 秒。在合成内新建一个形状图层，命名为Glass Button。用圆角矩形工具画一个 320 x 100 的胶囊形按钮，填充选择一个中心径向渐变，让中间亮、边缘略暗，作为玻璃材质基础。

再新建一个背景图层，放一张色彩丰富的图片，比如渐变风景或产品图。复制背景层并命名为Background Blur，给它添加“高斯模糊”，半径设为 30 像素，这样按钮下方会自然透出柔和色块。

7.2 搭建玻璃材质链

选中Glass Button图层，添加效果：快速方框模糊，半径为 10 像素，这会弱化内部形状的硬边，产生介质感。再添加“投影”，不透明度 40%，距离 8 像素，柔和度 20 像素，让按钮悬浮在背景上方。最后添加一条白色描边，不透明度 25%，宽度 3 像素，并给描边再加一个 5 像素的快速方框模糊，形成柔和边缘高光。

此时按下空格预览，你会看到一个静止的液态玻璃按钮。如果觉得“玻璃感”不够，可以优先调整渐变填充的透明度和描边亮度，而不是盲目叠加更多模糊。

7.3 添加按压与回弹动画

现在给按钮添加两段动画：按下缩放，以及高光扫过。

先选中Glass Button图层，打开“变换 -> 缩放”，在 0 秒打一个关键帧，值[100, 100]；在 0.3 秒打一个关键帧，值[85, 85]；在 0.7 秒再打一个关键帧，值[100, 100]。然后选中这三个关键帧，按 F9 应用缓动，并在图表编辑器中调整曲线，让回弹阶段略有过冲。

为了让回弹更真实，把缩放属性上粘贴前面 6.1 节的弹性表达式。由于 0.7 秒后已经没有新关键帧，表达式会自动基于最近一次运动速度产生衰减振荡。

最后做高光扫过：在Glass Button上方新建一个形状图层，绘制一个比按钮略窄的白色半透明长条，放在按钮一侧。给它添加位置关键帧，从按钮左侧移动到右侧，时间段覆盖 0.2 到 0.8 秒，透明度从 0 到 100 再到 0。这样当按钮按下并回弹时，高光刚好扫过表面。

7.4 运行与验证

按空格键启动 RAM 预览。预期效果是：第 0 到 0.3 秒，液态玻璃按钮被按下并缩小；第 0.3 到 0.7 秒，按钮回弹并略超过原始大小；第 0.7 秒后，按钮保持原始大小，并伴随轻微弹性衰减；高光在这段时间内从左侧扫过右侧，然后消失。

如果预览卡顿，把预览分辨率改为“三分之一”或“四分之一”。如果玻璃感不够，优先检查背景模糊层是否存在，因为液态玻璃的高度依赖背景色块透出。如果回弹太夸张或太弱，调整 6.1 表达式里的freq和decay。

这个示例只用了原生 AE 功能，没有插件，代码只有一段表达式，非常适合作为第一个动手练习。

8. 常见问题与排查方法

在实际制作中，下面几类问题出现频率最高，整理成排查表可以加快定位。

这里特别提醒“导出到开发”的误区。液态玻璃效果中大量使用高斯模糊、置换图和混合模式，这些在 Web 端或移动端原生实现中并没有完全对应的 Lottie 支持。如果一个动效最终要交付给开发，建议你在 AE 里先确认：哪些是基础形状动画，哪些是依赖效果堆叠的视觉表现。能拆成矢量形状动画的走 Lottie，视觉表现很重的部分导出视频或关键帧序列，这样开发和设计才不会互相拖累。

9. 最佳实践与工程建议

9.1 先做静态拟态，再做动态

这是液态玻璃项目最值得养成的工作顺序。先在静止状态下把材质链调到满意，再开始打关键帧。否则一边调模糊、一边调动画，很容易让问题相互干扰。静态满意意味着背景关系、高光位置、折射幅度都已定稿，动画阶段只需要专注于节奏。

9.2 用控制层统一参数

如果一个项目里有多个液态玻璃组件，不要在每个组件中单独调模糊值。创建一个Control层，用“滑块控制”统一驱动模糊半径、阴影距离和弹性系数。这样客户提出“整体轻一点”“整体弹一点”时，你只需要拖动几个滑块，而不是修改几十个图层的参数。

9.3 颜色管理要克制

苹果液态玻璃界面的高级感，很大程度上来自克制的颜色。玻璃本身大多是白色、灰色、低饱和度色调，真正丰富的色彩来自背景。如果在玻璃材质上叠加高饱和度色块，很容易变成廉价特效。建议玻璃填充的透明度控制在 20% 到 45%，这样背景色能够柔和透出，材质仍然保持通透。

9.4 动画时长符合 UI 节奏

UI 动效不是影视特效，不能用太长的动画时长。一个液态玻璃按钮的按压反馈控制在 0.2 到 0.4 秒，弹窗开合控制在 0.3 到 0.6 秒，页面转场控制在 0.4 到 0.8 秒。太长会拖慢用户操作，太短则感受不到弹性与液态变化。这和影视作品里可以 1 到 2 秒的特效镜头有本质不同。

9.5 导出与交接的三种方式

最终产出要考虑用途：如果只是演示，直接渲染 H.264 的 MP4 即可；如果需要动画资源给前端，矢量形状动画优先考虑 Bodymovin 导出 Lottie JSON；如果效果包含大量模糊和置换，建议导出带透明通道的 ProRes 或 WebM，或者逐帧 PNG 序列，由开发按序列帧方式接入。在选择方案时，向开发确认运行平台是否能承受实时模糊渲染，比单纯追求视觉质感更重要。

10. 总结与后续学习方向

回到最初的问题：这套液态玻璃 UI 动画，和普通玻璃拟态到底差在哪？差的不是材质参数，而是“动态行为”。当你能够把背景关系、边缘高光、弹性表达式这三个要素组合起来，就已经掌握了液态玻璃的核心语法。13 个案例看似很多，但底层的技术栈完全一致：形状图层负责形态，效果控件负责材质，表达式和关键帧曲线负责运动。

如果你想继续深入，建议按下面三个方向顺序学习：一是把基础形态制作流程练到不看教程就能完成，确保任何圆角控件都能快速做出玻璃质感；二是熟练掌握弹性表达式和图表编辑器的配合，这是液态玻璃“液态感”的核心；三是研究每个控件的 UI 场景，尝试把同样的技术迁移到 App 界面、网页落地页和视频包装中。

最后提醒一点：如果想突破静止观感，可以多研究真实液体的运动规律，比如水滴下落、气泡上浮、表面张力失衡等，然后把它们转化为 AE 中的表达式和关键帧参数。设计语言会不断更新，但从物理规律中提炼动画逻辑的能力，永远是可迁移的。

下一步，打开 AE，新建一个合成，画出你的第一个液态玻璃按钮，把 6.1 节的弹性表达式贴进去，然后按下空格键。那个回弹发生的时候，你就会真正理解为什么这套风格会成为 2025 年 UI 动效的最大热门。