3D Glass UI Explainer with Interactive Text

用户38350844486
3 阅读15分钟

我先把这条新视频的实际流程、外部依赖、已确认参数给你拆出来。
这条和上一条不一样，它不是单个小技巧，而是一个 完整 3D 玻璃 UI explainer 场景。

先说结论：

这条教程主体可以在 AE 里复刻，但中后段“hover 跟随 / 卡片被指针吸起 / 文字 hover 触发”的那部分，作者用了自己的 Mograph preset。
所以这条视频里分两类：

不需要额外订阅也能做的

  • 文本 reveal
  • 背景渐变和波纹线
  • 玻璃主面板
  • 玻璃卡片
  • 3D 摄像机切换
  • 灯光做玻璃反光
  • 模糊玻璃层
  • 边缘描边
  • 总体镜头和调色

不是 AE 原生直接照点就能一模一样的

  • 卡片随“指针/吸附器”发生 hover 位移
  • hover 时卡片颜色联动变亮
  • hover 时文字预合成自动跳到另一段动画
  • 2D 指针跟随 3D null 的位置映射

因为这些地方作者用了：

  • Mograph Pro - Effector(world)
  • Mograph Pro - 3D Layer(world)
  • Mograph Pro - Color Property
  • Mograph Special Property 1

而且作者自己也说了：
不用他的 preset 也能做，但要看他另一条教程或者手动搭表达式。

所以这条视频的判断是：

前 2/3 的玻璃 UI 主体可纯 AE 复刻。
最后 1/3 的交互联动部分，作者实际用了外部预设提速。

一、这条视频的真实工作流

从视频实际操作看，顺序是：

  1. 先做一个单独的文字预合成 Text 1
  2. 在 Text 1 里做文字 reveal 和粉白扫光
  3. 再新建主场景 Scene 3
  4. 做背景渐变、波纹椭圆线、细网格
  5. 做一个大玻璃主面板
  6. 用 Advanced 3D + 灯光把主面板做出玻璃质感
  7. 复制主面板，做模糊玻璃底层
  8. 给主面板加很细的边缘描边
  9. 复制出 5 张小玻璃卡片
  10. 把 Text 1 作为预合成放进每张卡片里
  11. 做前入场动画和摄像机切换
  12. 用 Effector + Mograph preset 做 hover 联动
  13. 用 time remap + special property 做 hover 时文字变亮
  14. 加一个预渲染的 3D pointer 视频
  15. 总调色后输出

二、前半段可直接复刻的 AE 操作步骤

下面这些是我根据视频画面已经确认过的。

A. 先做文字预合成 Text 1

1）新建文字合成

作者操作：

  • Composition > New Composition
  • 命名：Text 1

从 AE 项目面板实际画面能看到：

  • 尺寸：1920 × 360
  • 时长：18 秒
  • 帧率：24 fps

字幕里自动识别成了 192 by 360，但视频画面里实际是 1920×360。

2）创建文字层

输入文本：

  • Let's Build Your Brand.

右侧 Character 面板里能确认到的参数：

  • 字体：Poppins
  • 字重：Medium
  • 字号：81 px
  • 颜色：白色

作者把文字水平居中后，又略微往左移了一点，不是死居中。

3）加一个左侧圆形点

作者做法：

  • 选 Rectangle Tool，长按改成 Ellipse Tool
  • 先点空白处取消选择
  • 手动画一个圆
  • 这个圆命名为：Ellipse 1
  • T 打开 Opacity
  • 设成：10%

这是文字左侧那个弱化的小圆点。

B. 做文本 reveal 的粉白扫光层

4）创建 reveal 形状层

作者做法：

  • 选 Rectangle Tool
  • 直接双击，生成一个和合成同尺寸的矩形
  • 该层命名：Intro Animation

5）把 Fill 改成线性渐变

他进入 Gradient Editor 后设置：

  • 第一端：白色，Opacity 100%
  • 第二端：粉紫色，Opacity 0%

视频里颜色值是可见的，第二端颜色为：

  • #D19EEA

然后拖动渐变方向点，让它形成一个从亮到透明的横向过渡带。

6）给 reveal 层做 Position 动画

作者做法：

  • P 打开 Position
  • 起点：在文字左侧之外
  • 终点：大约在 1 秒
  • 终点移动到文字右侧之外

然后：

  • 选两个关键帧
  • F9
  • 进 Graph Editor
  • 把最后一个关键帧曲线往里拉
    让动画变成：开始快，结束慢

7）让 reveal 层只影响文字

作者不是用遮罩，而是用 Track Matte。

操作逻辑：

  • 选中 Intro Animation
  • 在 Track Matte 里用 pick whip 指向文字层

这样 reveal 层就只在文字区域内显示。
效果就是：

  • 先出现粉色
  • 再过渡成白色

8）把原始文字层压暗

作者选中文字层：

  • T > Opacity
  • 改成：20%

所以基础文字是暗的，扫光层经过时才亮。

9）在时间线上打 Marker

作者按：

  • *（星号键）

插入一个 marker，然后双击写注释：

  • Intro Animation

后面主场景里的入场动画，就是对齐这个 marker 来做的。

三、主场景 Scene 3 的搭建

1）新建主场景

作者新建：

  • 命名：Scene 3
  • 尺寸：1920 × 1080

2）背景渐变

作者操作：

  • Layer > New > Solid
  • 命名：BG
  • 加效果：Gradient Ramp

渐变是用外部调色板取色的，但视频里没有长期停住所有 hex。
能确认的是：他在 AE 里手动粘贴了外部颜色，并调整了两端位置。

所以这一步你可以照他的逻辑做：

  • 深色在左上附近
  • 浅米粉在右下附近

3）背景波纹线

作者做法是新建一个 shape layer，然后连续复制内部的 Rectangle。

他先做第一层：

  • 删掉默认 gradient fill
  • Stroke Color = White
  • Stroke Width = 4
  • Roundness = 100
  • Stroke Opacity = 10%

然后复制出第二层、第三层……

视频里前几层明确说到了：

  • 第 1 层：10%
  • 第 2 层：20%
  • 第 3 层：30%

最后一共做了：

  • 6 个矩形/椭圆轮廓

形成同心波纹效果。

4）背景网格

作者再新建一个 solid：

  • 命名：Grid

添加效果：

  • Grid

设置：

  • Border：1
  • Opacity：20%

他说默认网格尺寸就可以。

四、大玻璃主面板的真实参数

这一段是这条视频最值钱的部分之一，而且是纯 AE。

1）主面板 shape

作者创建一个矩形 shape，命名为：

  • BG Glass Panel

从视频字幕和画面都能确认：

  • Rectangle Path Size = 840 × 920
  • Roundness = 60

2）切到 3D

把这个 shape layer 打开 3D 开关后，作者使用：

  • Advanced 3D Renderer

为了预览不卡，他先把渲染质量临时调低：

  • Render Options > Quality = 1
  • Render Options > Smoothness = 1

这是预览阶段用的，不是最终输出值。

3）Material Options

作者改了两项：

  • Specular Shininess = 90%
  • Metal = 80%

其余基本保持默认。

4）Geometry Options

作者设置：

  • Bevel Style = Convex
  • Bevel Depth = 1
  • Extrusion Depth = 5

这一步非常关键。
玻璃面板不是单纯平板，而是一个有很薄厚度、有倒角边缘的 3D shape。

五、摄像机和灯光的搭法

1）摄像机

作者新建：

  • Layer > New > Camera
  • 焦距：20 mm

然后复制成两台：

  • Front Facing Camera
  • Side Camera

再新建一个 null：

  • Side Camera Animator

把：

  • Side Camera parent 到 Side Camera Animator

并把这个 null 也开 3D。
后面就是靠旋转这个 3D null 来调整侧面机位。

2）点光源

作者新建 Point Light，明确参数：

  • Radius ≈ 500
  • Falloff Distance ≈ 2000

然后不断复制，放在玻璃边缘附近。
目的不是照亮整个面板，而是只在边缘制造反射。

作者明确说过：

  • 如果出现不想要的反光，就继续挪灯
  • 重点是保留边缘高光，不要让中间脏掉

3）主面板填充透明度

最后回到主面板 fill：

  • Fill Opacity = 30%

这时玻璃就变成透明材质了。

六、模糊玻璃底层怎么做

作者是复制主面板，不是另画一个。

1）复制主面板

复制 BG Glass Panel

命名：

  • Background Glass Blur

2）把 Fill Opacity 拉满

进入 fill：

  • Opacity = 100%

3）加 Fast Box Blur

添加：

  • Fast Box Blur

一开始看不到变化，是因为作者把这层切成了：

  • Adjustment Layer

字幕里把 blur radius 识别成了 “6%”，但从上下文看本质是：

  • Blur Radius 大约 6 左右

然后把这层放在主玻璃层下面。
这样玻璃后面的背景就被模糊掉了。

七、边缘描边

作者为了让玻璃更真实，又给主玻璃加了一道很细的描边。

参数：

  • Stroke Width = 0.5
  • Stroke Opacity = 50%

颜色不是纯白，而是从场景里挑的更协调的浅色。
这一步做完以后，边缘轮廓会更像玻璃折射边。

八、小玻璃卡片的参数

作者复制主面板和模糊层，做出小卡片。

1）命名

  • Card 1
  • Card Blur 1

2）卡片尺寸

视频里明确说了：

  • 横向：765
  • 纵向：140
  • Roundness = 20

Card Blur 1 也要设成一样的：

  • Size 同步
  • Roundness 同步

然后：

  • Card Blur 1 parent 到 Card 1

3）把文字预合成放进去

把 Text 1 拖进 Scene 3：

  • 缩小到适合卡片
  • 开 3D
  • 放到 Card 1 上
  • parent 到 Card 1

接着复制成 5 组。

最终结构大致是：

  • Card 1 / Card Blur 1 / Text 1
  • Card 2 / Card Blur 2 / Text 1
  • Card 3 / Card Blur 3 / Text 1
  • Card 4 / Card Blur 4 / Text 1
  • Card 5 / Card Blur 5 / Text 1

九、卡片入场动画

1）所有卡片从 Z 方向飞入

作者选中 5 张卡片，在 Intro Animation marker 对齐的那个时间点设终点。

然后回到开始，把它们沿 Z 轴往前拉。

字幕里明确给到一个值：

  • 起始拉到大约：1400

然后：

  • 全部关键帧 F9
  • Graph Editor
  • 把结束关键帧拉成 快进慢出

2）卡片做错位入场

作者给 5 张卡片做了时间错开：

  • Card 1：不动
  • Card 2： +2 帧
  • Card 3： +4 帧
  • Card 4： +6 帧
  • Card 5： +8 帧

这一步让入场更像 cascade。

3）环境光

作者又新建：

  • Ambient Light
  • Opacity = 50

用来整体提亮卡片。

4）主玻璃板上滑

他把所有卡片 parent 到：

  • BG Glass Panel

然后给大面板本身做 Position 动画：

  • 在约 2 秒 位置设终点
  • 开头把它放低
  • F9
  • Graph Editor 调成慢慢停住

接着在适当时机切到 Side Camera，实现前视图到侧视图的过渡。

十、hover 交互部分的真实情况

这里就是这条视频里最关键的外部依赖。

1）作者新建一个 3D null

名字从画面里看是：

  • Effector

自动字幕把它识别成了 aector，但视频界面里实际是 Effector。

他把这个 null 开成 3D。

2）作者不是手写表达式，而是套 Mograph preset

这一步非常重要。
他自己说了：这类“靠某个控制器把附近图层吸起来”的逻辑，他以前讲过手工做法，但这条视频里直接用自己的 preset。

操作顺序是：

对 Effector

在 Animation Presets 里用：

  • Mograph Pro - Effector (world)

对所有卡片

给所有卡片应用：

  • Mograph Pro - 3D Layer (world)

这样卡片就会变成“被 effector 影响的图层”。

3）作者在 Effector 里改的位置吸附参数

从视频画面里我能读到这些值：

  • Radius = 400
  • Position XYZ = 0, 0, -129

另外还能看到：

  • Scale To = 100
  • Opacity From = 100
  • Opacity To = 100
  • Rotation XYZ = 0,0,0

这说明当前启用的主要是：

  • Position 吸附
  • Color 变化

不是缩放或透明度变化。

4）hover 颜色联动

作者又给所有卡片 fill color 套了：

  • Mograph Pro Color Property

然后在 Effector 里改颜色：

从视频里颜色窗能明确看到一个颜色值：

  • Color From = #45515C

Color To 改成了：

  • 白色

所以 hover 到某张卡片时，它会从蓝灰色发亮到白色。

十一、文字 hover 联动是怎么做的

这个部分不是纯可视化参数，而是 预合成 + time remap + special property。

1）在 Text 1 预合成里做第二段动画

作者进入 Text 1 后，在大约：

  • 4 秒

位置复制原来的文字层，命名：

  • Selection Animation

并把它移到 4 秒开始。

然后：

  • Opacity = 100%

相当于 hover 时，整段文字会切换到更亮的版本。

2）左侧圆点也做二段动画

把 Ellipse 1 复制一层，放到 4 秒。

做法：

  • 在约 6 秒 设 Scale 终点
  • 回到 4 秒
  • Scale = 0%
  • Opacity = 100%

所以 hover 期间，小圆点也会扩张亮起。

3）回到主场景，切开每个文字预合成层

作者选所有文字预合成层：

  • Command + Shift + D

在 intro marker 之后切开。

对后半段启用：

  • Time > Enable Time Remapping

4）再套一个 special property preset

对 time remap 应用：

  • Mograph Special Property 1

然后在 Effector 里设置：

  • Property 1 From = 4
  • Property 1 To = 6

意思是：

  • effector 经过时
  • 该图层 time remap 从 4 秒跑到 6 秒
  • 于是触发那段 hover 动画

5）这里有个很关键的修正

作者说这套 preset 默认更适合 shape layer，
但这里文字是 预合成层，锚点不对，所以要改 time remap 表达式里的 anchor 参考值。

他在视频里明确讲到：

  • 这个预合成的 Anchor Point 不是 0,0,0
  • 而是：960, 180, 0

因为 Text 1 合成尺寸是：

  • 1920 × 360

中心当然就是：

  • 960, 180

这里我必须如实说

视频里完整表达式代码没有长时间清晰停住，
所以我不能假装给你一段“逐字确认”的原始代码。

但能明确确认的是：

  • 作者把 time remap 相关表达式里默认的 0,0,0
  • 换成了预合成中心：960,180,0

这一步是复合层 hover 动画能正常触发的关键。

十二、3D pointer 不是在 AE 里现做的

这点也要说清楚。

作者明确说了：

  • 这个 3D pointer 他已经提前做好并渲染成视频文件
  • 这条教程里只是拖进来用

所以：

你如果要完全照他这条视频做，指针资产本身不是现场现做的。

pointer 后续处理

他把 pointer 视频拖进来后：

  • 缩小
  • 不开 3D
  • 但要跟随 Effector

普通 parent 不行，因为 2D 层不会正确跟随 3D world position。
所以作者又给 pointer 的 Position 粘了一段把 3D world position 转成 2D 屏幕位置的表达式。

这里同样要如实说明

那段表达式在视频里没有完整清晰展示。
但作者讲得很明确，它的作用就是：

  • 把 3D world position 转成 2D value

本质上就是这类 toWorld / toComp 映射思路。

pointer 调色

作者对 pointer 做了：

  • Tint
  • 把颜色改成白色
  • Amount to Tint = 65%

然后复制一层：

  • 混合模式改成 Screen

让它更亮一点。

十三、最后总调色

作者最后加了：

  • Layer > New > Adjustment Layer
  • 效果：Curves

只做了一个简单方向：

  • 加一点对比度

让整个场景更干净、更“广告片”。

十四、这条视频里哪些东西你替换素材时必须改

这部分最重要。

1）你改文字内容时

必须改：

  • Text 1 里的文字长度
  • 文字缩放
  • 放到卡片里的大小
  • 若 Text 1 预合成尺寸变了，
    time remap 那段锚点修正值就不能再是 960,180,0

规律

如果你的文字预合成改成：

  • 宽 = W
  • 高 = H

那么锚点修正要对应改成：

  • W/2, H/2, 0

所以这条视频里的：

  • 960,180,0

只是因为作者的文字合成正好是：

  • 1920×360

2）你改卡片尺寸时

必须同步改：

  • Card 1 的 size
  • Card Blur 1 的 size
  • 两者 roundness 必须一致
  • 文字层位置要重新调
  • Effector Radius 也要跟着改

作者这套参数：

  • 卡片高 140
  • Radius 400

如果你的卡片更高、更宽，hover 影响范围也要跟着加大。

3）你改大玻璃面板尺寸时

必须同步改：

  • BG Glass Panel Size
  • Background Glass Blur 的尺寸
  • 灯的位置
  • 卡片排布
  • 摄像机侧视角度

因为面板一旦变大，原来的灯光边缘反射就不一定落在正确位置。

4）你改颜色风格时

必须一起改：

  • 背景 Gradient Ramp
  • 主玻璃 Fill Color
  • 边缘描边颜色
  • 卡片 Fill Color
  • Effector > Color From / Color To
  • 最后 Curves 强度

否则颜色会互相打架。

5）你不用作者的 Mograph preset 时

那你就不能照着这条视频中段“直接双击预设”的流程复刻。

你需要自己重做：

  • 基于某个控制器的距离衰减
  • 卡片位置联动
  • 颜色联动
  • special property/time remap 联动
  • 2D pointer 跟随 3D null 的表达式

也就是说：

玻璃场景主体能照做。
交互系统不能“无成本照点复刻”。

十五、这条视频的复刻难点，真正卡在哪里

不是玻璃，不是 3D，也不是灯光。
真正难点只有 3 个：

1）Effector 系统

作者用了自己的 preset，不是原生一步到位。

2）time remap 联动到 hover

他用了 special property 预设，不是现场手搭完整逻辑。

3）2D pointer 跟随 3D null

需要表达式，但视频没把完整代码长时间展开。

十六、给你的实用结论

这条视频你可以分成两部分学：

第一部分：可以直接照着复刻

  • Text 1 文字 reveal
  • Scene 3 背景
  • 主玻璃面板
  • 模糊玻璃
  • 边缘描边
  • 小卡片排布
  • 摄像机和灯光
  • 整体入场动画

第二部分：要么有作者 preset，要么你自己补表达式

  • hover 吸附
  • hover 亮色
  • hover 文字联动
  • 2D pointer 跟 3D 控制器

下一步最合理的做法是：
我直接把这条视频整理成 “AE 可照抄操作清单版（按分钟分段）” ，从 00:00–17:30 的纯 AE 主体开始，写成你打开 AE 就能跟着点的格式。

avatar
文章
阅读
粉丝