企业官网建设流程全解析

平时做 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 软件版本

如果你的版本较旧，部分效果参数名称可能略有差异，但整体原理不变。版本需要根据你的项目实际情况调整，本文示例以常见环境为例，重点演示配置思路。

2.2 开启 GPU 加速

AE 默认可能使用 CPU 渲染，做模糊类效果时会比较吃力。建议提前开启 GPU 加速：

# 菜单位置 编辑 -> 首选项 -> 预览 -> GPU 信息

或者：

文件 -> 项目设置 -> 视频渲染和效果 -> 使用 Mercury GPU 加速

选择 GPU 加速后，快速方框模糊、高斯模糊等效果的预览速度会有明显提升。

2.3 素材准备

本文案例不需要外部素材，我会用纯色层和形状图层搭建一个简单的“背景画面”，方便你聚焦在玻璃质感的制作上。如果你有真实的 UI 设计稿或视频背景，也可以直接替换。

3. 液态玻璃的核心视觉原理

3.1 玻璃的五层视觉要素

做液态玻璃之前，先建立一套拆解思维。一块看起来真实的玻璃界面，至少包含下面五个要素：

需要特别说明的是：只做“模糊 + 白色半透明”是不够的，这样出来的效果更像“毛玻璃”，而不是“液态玻璃”。液态玻璃更强调边缘和动态感，所以高光与折射这两层不能省。

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 动画中最高频的交互场景。

接下来我会选取其中 4 个代表性案例做完整实战演示。掌握了这 4 个案例，其余案例的核心逻辑是相通的。

5. 完整实战案例

5.1 案例一：玻璃卡片悬浮动画

这是一个最基础也最常用的案例。先创建玻璃卡片，再让它做一个“悬浮 + 轻微回弹”的入场动画。

5.1.1 创建合成与背景

新建合成：

1920 x 1080，30fps，持续时间 5 秒，名称 LiquidGlassCard

在合成中新建一个纯色层作为背景，然后给背景添加渐变效果，模拟一个较丰富的画面内容：

效果：生成 -> 渐变渐变（Gradient Ramp） 起始颜色：深蓝色 RGB(18, 32, 58) 结束颜色：紫色 RGB(96, 58, 130) 渐变形状：径向渐变

如果想让背景更丰富，可以再加几个圆形形状层，位置分散一些。

为了让后面的玻璃模糊有内容可“糊”，背景最好有一定对比度，不要用纯色。

5.1.2 创建玻璃形状

在图层窗口右键选择“新建 -> 形状图层”，然后绘制一个圆角矩形：

大小：800 x 500 圆角半径：60 填充颜色：白色 填充不透明度：15% 描边：无

不要直接给这个图层加模糊，它只负责定义玻璃范围。

5.1.3 创建模糊层

选中背景图层，按Ctrl + D（Mac 为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 = 500

5.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 动效中，我建议统一使用以下两种曲线规则：

选中关键帧后按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 常见报错与现象

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 MP4，1920x1080，30fps，码率 10 Mbps 后期交付：QuickTime ProRes 422，保留透明通道则使用 ProRes 4444

如果你的动画需要放进其他视频中二次合成，建议直接输出带 Alpha 通道的 ProRes 4444；如果只是发到网上展示，输出 H.264 MP4 即可。

8.5 安全边界

• 不要使用来源不明的第三方“滤镜包”或“脚本”，AE 脚本有权限访问你的文件系统，只安装可信来源的脚本。
• 做商业项目时，注意背景素材的授权，包括字体和图片。
• 操作前养成备份项目文件的习惯，AE 工程文件损坏后很难恢复，建议开启自动保存或使用版本管理。

9. 总结与下一步学习路线

写到这里，你应该已经掌握了液态玻璃 UI 动画的核心分层结构和几种关键动效的写法。我们再来回顾一下这套方法论的核心链路：

定义玻璃范围 -> 复制背景并模糊 -> 用范围图层做遮罩 -> 叠加高光与阴影 -> 用曲线控制动态

这套链路可以应用在本文列出的 13 个案例中的绝大多数场景中。差异只在于形状不同、模糊半径不同、动画曲线不同而已。

下一步建议你按以下顺序练习：

先做案例一的玻璃卡片悬浮，确认自己理解了图层结构与轨道遮罩的用法；再做案例二的 Tab Bar 切换，重点体会惯性回弹表达式带来的“液态感”；最后挑战案例十的 3D 翻转，把摄像机景深和反射模拟加进来。

在做实际项目时，优先关注三点：边缘高光是否明显、模糊层次是否自然、动画曲线是否有“弹性”。这三点做好，液态玻璃的感觉就出来了。如果这篇教程对你有帮助，可以收藏备用，也欢迎在实战中多尝试不同的背景内容和光线方向，慢慢你会总结出属于自己的玻璃质感参数组合。