Interactive UI Text Animation in After Effects可以，下面我按视频实际操作顺

可以，下面我按视频实际操作顺序整理成可复刻教程。
这条视频不是一个单一小技巧，而是 4 段内容：

竖排列文字靠近指针自动位移 + 变色：前半段主要是 AE 手动搭，但位移表达式是从外部 PDF 复制进来的。
环形文字排布：这段大部分是纯 AE，作者手动输入了一个很短的表达式。
环形文字的“靠近指针自动反应”高级版：这里作者明确改用自己的 Mograph preset，不是纯手动。
UI 按钮 hover 动画：按钮造型本身是 AE 手做，最后用 Time Remap + 外部 PDF 里的表达式 做触发。

所以先说清楚：

这条视频里，不能仅靠视频 100% 还原的部分

有两类。

1）外部 PDF 里的表达式

视频里作者是直接复制粘贴，画面没有完整、清晰、长时间停留在全文上。
我可以准确告诉你：

表达式粘到哪里
作者添加了哪些控制器
控制器名称要怎么命名
作者后面把哪些数值调成了多少

但我不能假装把那两段完整表达式逐字还原出来。

2）22:14 之后的 Mograph preset

作者明确用了自己的：

Mograph Pro - Effector (world)
Mograph Pro - 3DLayer (world)
Mograph Pro - ColorProperty (world)
之类的 preset。

所以这部分如果你没有作者的 preset，不能按视频中的“双击预设”原样复刻。

一、Scene 1：竖排列文字 + 指针靠近时自动位移和变色

对应视频前半段，大约 00:58–09:30。

Step 1：先做背景上的柔光

作者进入 Vertical Text 合成后，先优化背景。

操作

选择 Rectangle Tool
长按切换为 Ellipse Tool
在合成中间按住 Shift 画一个正圆
在顶部工具栏点 Fill
改成 Radial Gradient

参数/结果

中心颜色：偏粉紫色
外圈颜色：同色系，但 Opacity = 0%
形状层重命名为：BG Light 或 Background Light

后续调整

拖动渐变外圈控制点，把光晕拉大
把它放到画面偏下方
Scale 调到大约 120%
按 T 打开透明度
Opacity = 20%

这一步的目的就是给深蓝背景加一个柔和底光。

Step 2：做第一条文字

操作

选择 Text Tool
在画面中间输入：Text

文字参数

从画面里能确认的值：

字体：Inter
字重：Regular
字号：60 px
段落对齐：Right Align / 右对齐

布局

作者让文字整体位于画面中轴附近，形成一列。

Step 3：复制成整列文字

操作

把这条文字复制约 9 次
最上面那条往上拖
最下面那条往下拖
选中全部文字层
到 Align
点击 Distribute Layers Vertically

结果

得到一列均匀排布的文字。
从时间线看，最终大约是 10 条文字层。

Step 4：做白色指针点

操作

再用 Ellipse Tool 画一个很小的圆
在顶部 Fill 上按住 Alt/Option 连点，直到切到纯色填充
颜色改成白色
重命名为：Pointer

这个小白点就是后面的“靠近触发器”。

Step 5：先给一条文字做颜色渐变测试

作者不是一上来给所有文字加效果，而是先挑中间某一条，视频里选的是大概 Text 5。

操作

选中一条文字层
到 Effects & Presets
搜索 Gradient Ramp
拖到该文字层

调整

作者把这两个点横向摆放：

End of Ramp 拖到文字右端
Start of Ramp 拖到靠近 pointer 的位置

然后他为了保证这条渐变是严格水平的，手动改了两个点的 Y 值：

Start of Ramp Y = 550
End of Ramp Y = 550

视频里一个清晰画面能读到的示例坐标是：

Start of Ramp = 618.5, 550.0
End of Ramp = 1022.9, 550.0

这是他当时那一条测试文字的位置，不是通用固定值，但你照着“两个点 Y 一样”这个原则做就对。

Step 6：把黑白渐变映射成彩色

操作

给同一条文字再加一个效果：CC Toner
先回到 Gradient Ramp
点击 Swap Colors

CC Toner 设置

画面能看出他用的是：

Tones = Pantone

颜色上他做的是一套暖亮、冷暗的映射：

Highlights：偏橙
Brights：偏黄
Midtones：偏青蓝
Darktones：深蓝
Shadows：更深的蓝

这里我不写十六进制，是因为视频中颜色框有显示，但没有长时间停在可无误逐字读取的 hex 上。
能确定的是：亮部暖色，暗部蓝色。

然后

把这条文字上的：

Gradient Ramp
CC Toner

一起复制到其他文字层上。

作者中间把某一条临时改成更长的单词，只是为了让你更容易看出渐变效果，之后又改回普通 Text。

Step 7：建立控制 Null：Effector

操作

Layer > New > Null Object
重命名为：Effector
选中 Pointer
把 Pointer 的 Parent 指向 Effector

这样以后拖 Effector，白色指针点会一起走。

Step 8：给 Effector 加 3 个控制器

操作

在 Effector 上添加：

Slider Control
- 重命名：Radius
复制一个 Slider Control
- 重命名：Radius Strength
再添加 3D Point Control
- 画面中实际可见名称更像：Position XYZ

自动字幕把这个名字识别得不准，但从画面里能看出最终控制器名是 Position XYZ。
这几个名字要尽量和作者一致，否则表达式可能报错。

Step 9：给第一条文字的 Position 粘表达式

操作

选中一条文字
按 P
Alt/Option + 点击 Position 秒表
从外部 PDF 粘贴作者的“基于距离的 Position expression”

这里必须如实说

这段表达式在视频里只露出了前几行，没有完整展示。
我能确认的开头是这种结构：

var p1 = thisLayer.transform.position;
var p2 = thisComp.layer("Effector").transform.position;

但后面的完整距离计算和插值逻辑，视频没有清晰给全。
所以这一步你要么：

使用作者视频配套 PDF 里的原表达式
要么
自己用等效的“距离驱动位移”表达式代替

Step 10：把文字层切成 3D

作者粘完表达式后，AE 报错了。
原因不是表达式错，而是文字层还不是 3D layer。

操作

打开这条文字层的 3D 开关
然后把其他文字层也全部开成 3D

报错就会消失。

Step 11：调 Effector 的控制值

作者接着回到 Effector 的效果面板开始试值。
视频里能清晰看到一帧：

Radius = 300.00
Position XYZ = -500, 0, 0

字幕里对应的口述也是：

Radius 调到大约 300
Position XYZ：
- Y 先设为 0
- Z 先设为 0
- X 往负方向拉，作者试到 -500 左右

结果

当 Effector 靠近某条文字时，这条文字会向左/向指针方向偏移，同时颜色渐变也会发生变化。

关于 `Radius Strength`

视频里作者确实创建了 Radius Strength，但在这一段清晰画面中，它显示还是 0.00。
说明：

要么这个值在后续表达式里不重要
要么作者的表达式主要靠 Radius + Position XYZ 驱动

所以这一段按视频实际结果来说，真正确定被调动的，是 Radius 和 Position XYZ。

Step 12：把 Position 表达式复制给所有文字层

操作

在已经成功工作的那条文字层上
右键 Position
选择 Copy Expression Only
选中其余所有文字层
Command/Ctrl + V

这样整列文字都拥有同一套“靠近指针自动位移”的逻辑了。

二、Scene 2：做环形文字排布

对应大约 10:15–14:00。
这一段大部分是纯 AE，而且是本视频里最容易直接照做的一段。

Step 1：新建一条文字并摆到圆环上的起点

操作

新建一条 Text
先大致放在画面中间偏上/偏左的位置
用 Anchor Point Tool
按住 Ctrl/Cmd 吸附到文字中心
再把锚点对齐到场景中心附近的旋转中心

作者的思路是：

文本本身放在圆环边缘
锚点放在圆心上

这样旋转就能绕圆心转。

Step 2：给 Rotation 加最短表达式

操作

选中文字层
按 R
Alt/Option + 点击 Rotation 秒表
输入：

index*15

意思

index 是图层序号
每往后一层，多转 15°

Step 3：大量复制

操作

直接复制约 24 次

这样 15° × 24 ≈ 360°，很快就铺成一圈。

Step 4：把表达式“烘焙”为关键帧

作者不想一直保留 index*15，而是把当前结果固化下来。

操作

在时间线区域按 ~（波浪号） 最大化
选中所有这些文字层
按 R 展开 Rotation
Option/Alt + Command/Ctrl + A 选中全部 Rotation 属性
右键
Keyframe Assistant > Convert Expression to Keyframes

然后再：

Alt/Option + 点击 Rotation 秒表 关闭表达式
再点一次秒表，清除动画状态

结果

文字保持在当前圆环位置不变，但已经不再依赖表达式了。

三、Scene 2 后半段：让环形文字跟着指针反应

对应 22:14 之后。
这里作者明确切换成自己的 Mograph preset 工作流。

也就是说，这里不是“原生 AE 菜单一步一步手搭”的纯教程，而是：

选 Effector
打开 User Presets
用作者的 Mograph Presets

作者实际点击的是这些 preset

在 User Presets > Mograph Presets > Mograph Pro > World 里，大概使用了：

Mograph Pro - Effector (world)
Mograph Pro - 3DLayer (world)
以及后面的颜色属性类 preset

注意

作者自己也说了：

这部分如果不用 preset，可以去看他别的视频
这条里为了快，直接用 preset

他在这段里做了什么

1）给 Effector 套 `Mograph Pro - Effector (world)`

选中 Effector，双击对应 preset。

2）把环形文字层全部改成 3D

这一步是必须的。

3）给所有文字层套 `Mograph Pro - 3DLayer (world)`

4）调 Affected Properties

视频里他示范了：

Scale To = 120
靠近 Effector 的文字会放大
远处文字先统一降透明度到 20%
近处文字保持到 100%

5）演示还可以控制

Opacity
Rotation X / Y
Position
Color

6）Layer Specific Control

Pro 版还能给某一条文字单独 override。
视频里某一帧可见一个单层 override 示例值：

Scale To = 100
Opacity To = 100
Rotation XYZ = 74, 0, 0
Position XYZ = 0, 0, 0

这只是作者示范 override 的例子，不是全局必须值。

四、UI Button hover 场景

对应 27:00 之后。
这一段分两部分：

按钮本体的制作与入场动画：大部分纯 AE
hover 触发按钮动画：最后又接回外部 PDF 表达式 / preset 逻辑

Part A：先做按钮本体

对应 27:35–32:30 左右。

Step 1：删除旧文字，只保留 Effector / Pointer / BG Light

作者回到第一场景，把竖排列文字删掉，只保留：

Effector
Pointer
BG Light

Step 2：新建居中文字并预合成

操作

新建文字：Button
水平垂直居中
Layer > Pre-compose
命名：Button 1

Step 3：进入 `Button 1` 预合成，先改合成高度

操作

Composition Settings
锁定比例
把高度改成约 200

作者字幕里明确说的是：

Height ≈ 200

Step 4：做按钮背景

操作

选择 Rounded Rectangle Tool
双击生成一个圆角矩形
重命名：Background
放到文字下方
按 UU 展开属性
手动缩小到合适尺寸

画面里能确认的值

顶部工具栏里能看到背景边框最后是 Stroke 5 px
填充颜色是很深的黑灰色
具体 hex 画面没停稳，不建议伪造

Step 5：画底部那根发光线

操作

选 Pen Tool
点一下起点
按住 Shift
点终点，画一条水平线
重命名：Line

线条样式

Stroke 改成 Linear Gradient
作者最终用了 3 色渐变
- 左侧偏蓝紫
- 中间偏亮青
- 右侧偏橙黄

Step 6：给背景加阴影

操作

选 Background
右键
Layer Styles > Drop Shadow

这里有一个“口述与截图不完全一致”的地方

字幕里作者说的是：

把阴影 Opacity 降到 20%

但我截到的一帧里，Layer Style 面板显示还是：

Opacity = 75%
Angle = -120°
Distance = 5
Size = 50
Blend Mode = Multiply

所以这一步我给你的建议是：

先按作者口述，阴影 Opacity 用 20%
如果你想更接近我截到的中途画面，就把阴影调强一点
但从成片观感判断，20% 更合理

Step 7：给背景加 `CC Light Sweep`

操作

选中 Background
搜索 Light Sweep
添加 CC Light Sweep

这一步视频里有“中途值”和“最终值”两套

中途值（较早）

清晰画面能看到：

Center = 178, 50
Direction = -30°
Shape = Sharp
Width = 50
Sweep Intensity = 25
Edge Intensity = 50
Edge Thickness = 4
Light Reception = Add

最终值（后面又改过）

后面一帧能看到作者把它改成了更柔和的最终版本：

Shape = Linear
Width = 90
Sweep Intensity = 25
Edge Intensity = 25
Edge Thickness = 1
Direction = -30°
Light Reception = Add

所以你真正复刻时，用后面这套最终值。

Step 8：把背景透明度压低

作者按 T 打开背景图层透明度，然后说：

Opacity ≈ 40%

这个是按钮底板最后的透明感来源。

Step 9：给按钮文字也加渐变

操作

选中文字层 Button
加 Gradient Ramp

视频里清晰可读的一帧

Start of Ramp = 106, 99
End of Ramp = 247, 101

颜色

起点偏蓝紫
终点偏橙黄

这个和底部那条线是一套配色逻辑。

五、按钮本体的入场动画

对应 30:45–32:30 左右。

作者是在 2 秒 位置先打“最终关键帧”，然后回到 0 秒 做“初始状态”。

在 2 秒处打这些终点关键帧

1）文字渐变终点

Button > Gradient Ramp > End of Ramp

2）按钮文字图层透明度

Button > Opacity

3）背景图层透明度

BG > Opacity

4）底部线条显现

给 Line 添加 Trim Paths
End = 100%
给 End 打终点关键帧

5）背景 light sweep 的位置

BG > CC Light Sweep > Center

6）按钮文字渐变的颜色

作者还给文字渐变的 End Color 打了颜色关键帧。

回到 0 秒设置初始状态

作者回到起点后，按视频口述逐项改：

Line > Trim Paths > End = 0
把文字渐变的终点位置拖到左边，让高亮还没扫出来
Button 文字透明度降到 30
BG 透明度降到 0
CC Light Sweep > Center 移到更左边
文字渐变终点色改成较暗的颜色

结果

0→2 秒内会出现：

文字从暗到亮
背景从无到有
底部线条被“画出来”
light sweep 划过按钮
文本颜色渐亮

六、把按钮复制成一列

对应 32:40 左右以后。

操作

回到上一级合成
复制 Button 1 预合成约 6 次
上下拉开
选中全部
Align > Distribute Vertically

这样就得到多按钮列表。

七、让按钮在鼠标靠近时自动位移

这一段又回到“靠近 Effector 自动反应”的逻辑。

Step 1：给按钮预合成层的 Position 粘同类表达式

操作

选一个按钮预合成层
按 P
Alt/Option 点 Position 秒表
粘外部 PDF 中的 Position expression
把按钮预合成层切成 3D

然后把这个表达式复制给其他按钮层。

结果

按钮会随着 Effector 靠近而产生位移。

Step 2：反向调整 Effector 位置

作者发现按钮“被吸过去”的方向不是他要的，于是去调 Effector：

把 Effector 往另一边推
再稍微抬高一点

直到按钮朝正确方向偏移。

八、让按钮在 hover 时触发“自己的内部动画”

这是最后一段最关键也最依赖外部表达式的部分。

作者做的实际流程

1）给 Effector 增加额外属性控制

字幕里能看出，他在已有属性基础上又做了一组：

Property 1 From
再复制一个
改名成类似：Property 1 2

但自动字幕把这两个名字识别得不太稳定，
而画面没有停足够久让我逐字确认最终命名。

2）在某一个按钮层上启用 Time Remap

操作：

右键按钮预合成层
Time > Enable Time Remapping

3）作者演示 Time Remap 的含义

0 秒 = 取按钮动画起点
2 秒 = 取按钮动画终点

因为这个按钮预合成本身前面已经做了一个 0→2 秒的入场动画。

4）给 Time Remap 粘“Property 1 adjustment”表达式

也是从外部 PDF 复制进来。

5）在 Effector 上设置区间

作者口述里给的是：

Property 1 From = 0
Property 1 2 = 2

也就是当鼠标接近时，Time Remap 在 0–2 秒 之间被自动驱动。

6）复制这个 Time Remap 表达式到其他按钮

这样每个按钮都能被 hover 触发。

九、这条视频里最值得你记住的“作者真实流程逻辑”

1）位移不是打关键帧，而是“距离驱动”

这一点贯穿全片。

2）视觉层本体单独做，交互触发单独做

比如按钮本体先在预合成里做好，
再在外层用 Time Remap 调用它。

3）越往后越依赖作者自己的外部资源

前半段：AE + PDF expression
中段：AE + Mograph preset
结尾：AE + PDF expression + Time Remap

十、替换素材时，哪些数据必须改

这是你实操时最重要的部分。

A. 你改文字长度时

竖排列文字

要改：

Gradient Ramp 的起止点
尤其是 End of Ramp 的 X
两个点的 Y 仍然要保持相同

长词比短词更容易看出渐变，
短词时渐变区间不能拉太长。

按钮文字

要改：

Button 文字的 Gradient Ramp
底部线 Line 的长度
Background 的宽度
Light Sweep 的 Center

因为按钮宽度一变，下面那根线和扫光中心都会偏。

B. 你改字体、字重、字号时

必须重调：

Scene 1 文字层的垂直间距
环形文字的 index*15 中的角度值
按钮预合成的高度和背景尺寸
底部线的位置

尤其是环形文字

index*15 不是万能值。
如果字体更宽、字数更长，你要把它改小，比如：

index*12
index*10

否则文字会重叠。

C. 你改按钮尺寸时

必须同步改：

Background 的 size
Line 的长度
Button 文字的 Gradient Ramp 起止点
CC Light Sweep > Center
CC Light Sweep > Width

按钮更宽时，光扫宽度要加大，
不然会显得扫光太窄。

D. 你改画布尺寸时

比如从 1920×1080 改成竖屏：

必须重调：

整列文字的分布
环形文字的半径
Effector 的位置路径
Gradient Ramp 的坐标值
CC Light Sweep 的中心点

因为视频里很多数值，例如：

550 的 Y
178,50 的 Center
106,99 / 247,101 的文字渐变坐标

都是基于作者当时那个合成尺寸的。

E. 你把素材改成中文时

要特别注意：

1）中文字宽变化更大

同样 60 px，中文视觉占宽通常和英文不一样。
所以 Scene 1 的渐变距离要重新试。

2）环形中文更容易挤

index*15 往往会太密。
中文环形建议先试：

index*18（更稀）
或者
减少总复制数量

F. 你想把按钮 hover 做得更明显时

优先改这些：

Button 初始 Opacity：30 → 20
BG 最终 Opacity：40 → 50
Line 颜色对比再拉大
Light Sweep > Width
Light Sweep > Edge Intensity

这样 hover 的反馈会更明显。

十一、我建议你实际复刻时的顺序

不要照视频顺序一口气全做，最稳的是：

先做 Scene 1 的竖排文字和 pointer
把 Scene 1 的颜色和位移效果调通
再做 Scene 2 的环形排布
不急着碰 Mograph preset
先把按钮本体完整做出来
最后才处理 Time Remap 和 hover 触发

这样最不容易乱。

十二、最后给你一个最实用的结论

这条视频里真正可以“稳定、独立复刻”的，是这三块：

竖排列文字视觉样式
环形文字排布
按钮本体 + 2 秒入场动画

而这两块属于“作者外部资源驱动”，你要提前有心理预期：

距离驱动的完整 Position 表达式：作者从 PDF 粘贴
Mograph world preset 那一大段：作者直接用自己的 preset

所以如果你的目标是复刻最终成片视觉效果，完全可行。
如果你的目标是逐个按钮、逐个 hover 逻辑都 100% 按作者的自动化系统来搭，那就需要他的 PDF / preset。

你先按这版做最稳。表达式和 preset 这两块，我已经替你准确标成“视频可确认”和“视频不可无误还原”的边界了。

Interactive UI Text Animation in After Effects