可以。
这条视频本质上是 项目拆解 + 局部屏录演示,不是从头到尾完整录屏的纯教程,所以我下面这份会按两条原则来整理:
- 以视频里实际出现过的 AE 操作为准
- 看得清的数值我就写死,看不清的我会明确说“按成片结果复刻”
我把它整理成一份 可复刻文字版教程。你可以直接按这个顺序在 AE 里搭。
这条片子的核心思路
这是一个 60 秒地产 SaaS 宣传片。
作者的做法不是先把整条片子设计完再动画,而是:
- 先把脚本拆成 8 个 scene comp
- 每个 scene 单独做
- 用 圆形 / 点 / 问号 / 地图 / UI 模块 这些元素做视觉母题
- 再用 match cut、morph、circle wipe、camera push 把场景连起来
所以你复刻时,不要把它当成“一堆独立画面”,而要当成:
8 个场景 + 统一视觉母题 + 场景间过渡
一、项目准备
Step 1:建立项目结构
视频里能看到作者把项目分成这些 comp:
-
SCENE 01 -
SCENE 1 AND 2 -
SCENE 3 -
SCENE 04 -
SCENE 5 -
SCENE 06 -
SCENE 07 -
MAIN - RENDER -
还有一些中间 comp:
TEXT 01TEXT 02BOXMAPMAP 1MAP 2
建议你照着建
最稳的结构就是:
MAIN_RENDERSCENE_01SCENE_02SCENE_03SCENE_04SCENE_05SCENE_06SCENE_07ASSETSTEXT_PRECOMPSMAP_PRECOMPSUI_PRECOMPS
Step 2:合成尺寸
视频里多个场景窗口都清楚显示:
- 1920 × 1080
所以直接统一用:
1920 x 1080
帧率
这里视频里出现过两种读数:
- 有的场景面板看起来像 60 fps
- 后面
SCENE 04 / SCENE 07的信息又明显显示 30 fps
这说明作者工程里可能有混用,或者拆解演示用的场景 fps 不统一。
你实际复刻建议
为了不出麻烦,统一用:
- 30 fps
或者 - 60 fps
二选一,不要混用。
如果你想更接近作者前面那种更丝滑的字和图形运动,选:
- 60 fps
Step 3:背景
作者所有 scene 的底色基本都是:
- 深灰偏黑背景
不是纯黑,而是很深的灰蓝黑。
复刻做法
Layer > New > Solid- 颜色设成很深的灰黑色
- 作为每个 scene 的底板
Step 4:音乐先放进去
作者在视频里明确说了:
- 先选音乐
- 因为音乐决定节奏和整体流动感
复刻做法
- 先把音乐拖到
MAIN_RENDER - 用 marker 标出每句文案的大概入点
- 再把 scene 分配到这些节奏点上
二、Scene 01:your next deal is waiting
这是整条片子最重要的“风格起点”。
Step 1:新建 SCENE 01
Composition > New Composition- 命名:
SCENE 01 - 尺寸:
1920 x 1080
Step 2:加深色背景
- 新建 Solid
- 放到最底层
视频里能看到背景层名字像:
Dark Gray Solid 8
你可以直接命名成:
BG_DARK
Step 3:输入整句标题
作者先打的是完整句子:
your next deal is waiting.
从视频画面看,字体风格接近:
- 粗黑几何无衬线
- 接近
SF Pro / Inter / General Sans / Poppins Bold这一路
复刻建议
用一款粗体无衬线就行,例如:
- Inter Bold
- SF Pro Display Bold
- Poppins Bold
颜色
前面成片里这句字是:
- 亮蓝色
Step 4:把句子拆成单独单词层
视频里后面 TEXT 01 的时间线是清楚的。
能看到它最后不是一整句一个层,而是拆成了:
Yournextdealiswaiting
并且这些词都 parent 到一个总控制层。
实际复刻方式
-
保留一条完整文本作为参考
-
再分别建立 5 个文字层:
Yournextdealiswaiting
-
新建一个空层或文字控制层:
FIRST TEXT
视频里能读到的结构
在 TEXT 01 里,作者的层级大致像这样:
FIRST TEXTYournextdealiswaitingwaiting 2waiting 3
说明他对 waiting 做了额外复制,用于后面的“眼睛 / 点 / 过渡”处理。
Step 5:把各个单词 parent 到总控制层
视频里 TEXT 01 里能看到:
- 各单词层都 parent 到
7. FIRST TEXT waiting 2 / waiting 3又 parent 到12. waiting
你照着搭
- 选中所有词层
- Parent 到
FIRST TEXT - 如果你也做点/眼睛辅助层,把它们 parent 到
waiting
Step 6:摆字间距
视频里中途画面能清楚看到作者把字拆开排成:
Your nextdeal iswaiting
前后关系不是死板逐字排,而是为了给中间点和圆形留空间。
实操建议
- 先让整句在中间
- 然后把
deal is这块拉开一点 - 给右侧留出问号/圆的入场空间
Step 7:把“waiting”做成视觉母题的起点
作者说得很明确:
- 他在排第一句时,注意到了两个点
- 于是把这两个点变成“眼睛”
- 后面又把这两个圆拿去做转场
也就是说这一步的重点不是文字本身,而是:
从字里面提取两个圆点,作为全片的主要视觉母题
复刻做法
- 新建两个小圆
- 放在
waiting附近,像“眼睛” - 让它们做一个轻微的眨眼/缩放动画
最简单的做法
每个圆:
Scale 100 → 20 → 100- 时间 4~6 帧
- Easy Ease
然后让两个圆轻微左右移动,模拟“等待 / 张望”
三、Scene 02:问号场景
作者在视频里说:
- 下一句里有问号
- 他就把问号当成这个 scene 的主元素
Step 1:建立第二句文字
画面里能看到这一句的主体是:
Will you pick up
右边跟一个蓝色问号。
复刻做法
-
新建白色文字:
Will you pick up
-
单独建立一个蓝色:
?
-
再画一个白色描边圆,把问号圈起来
Step 2:问号单独做成主元素
不要把 ? 放在文字层里面一起动。
作者明显把它拿出来当独立视觉元素了。
操作
?单独一个文字层- 白色圆描边单独一个 shape layer
- 把
?和描边圆预合成或一起 parent 到一个 null
Step 3:从 Scene 01 的两个圆过渡到问号
作者说得很清楚:
- 前面两个圆被继续拿来做 scene 之间的连接
复刻方式
最稳的是做一个圆形扩张/聚合过渡:
- Scene 01 结束时,让两个小圆快速靠拢
- 合成一个大圆形遮罩
- 切到 Scene 02 时,这个大圆的位置变成问号外圈那只白圆
这样就有“视觉母题延续”的感觉。
四、Scene 03:圆形转 globe,再转美国地图
这是整条片子里技术性最强的一段。
Part A:先做 globe
Step 1:准备一个地图预合成
作者明确说了:
- globe 是 3D sphere
- 他用一个 pre-comp 作为 texture
复刻做法
- 新建 comp:
MAP 1 - 在里面放美国地图轮廓
- 给它做蓝色渐变
Step 2:作者这里用了 Element 3D
视频里有一帧非常清楚,就是 Element 3D 的 Scene Setup。
能确认这些信息:
-
模型:SphereModel
-
材质类型:Physical Shader
-
Diffuse纹理使用:- Custom Layer 1
-
也就是把 AE 里的地图预合成贴到球面上
所以这段不是纯 AE 原生球体
而是:
- Element 3D + 自定义贴图
Step 3:Element 3D 里设置球材质
能从画面中确认的核心项:
Material Type = Physical ShaderDiffuse = Custom Layer 1- 球体材质是深色高光玻璃/亮面风格
复刻建议
在 Element 3D 的球体材质里设置:
- Diffuse:贴图层
- Glossiness:高
- 颜色偏深灰
- 适当反射
不必追求 100% 一样,只要做到:
- 外球体深色
- 地图发亮蓝色
- 有高光边缘
Step 4:把 globe 放进 AE 里
回到 AE 后,作者的球体场景已经搭好,接着在场景里做 camera 推进。
Part B:globe 切成 flat US map
作者这里用的是:
- match cut
- 圆形/球形视觉连续
- 再把球面切成平面地图
Step 5:做平面美国地图 MAP 2
视频里 MAP 2 的右侧 Effect Controls 有一组值是可以读到的。
明确可见的效果
作者给 MAP 2 加了:
- Optics Compensation
- Gradient Ramp
画面里能读到的值
Optics Compensation
Field of View (FOV) = 178.5- 方向:
Horizontal View Center = 960, 540
这一步就是作者说的:
- 让平面地图看起来稍微弯一点
Gradient Ramp
画面里能读到:
Start of Ramp = 570.1, 679.7End of Ramp = 1063.3, 339.1Ramp Shape = Linear Ramp
Layer Transform(MAP 2)
画面里还能读到:
Anchor Point = 960, 540, 0Position = 976, 586.7, 0Scale = 15.5%, 15.5%, 100%Opacity = 100%
Step 6:地图做成 3D layer
作者口述里明确说了:
- 他把地图变成 3D 图层
- 再在地图上铺很多小圆点
复刻操作
- 选中
MAP 2 - 打开 3D 开关
- 用 camera 看地图有轻微透视感
Step 7:铺美国各地的圆点
视频里这一步能看到很多黄色/青色小圆点分布在地图上。
复刻做法
- 用一个小圆 shape layer 做模板
- 复制很多个
- 分布到美国地图上
颜色
成片里圆点主要是:
- 黄
- 青绿
Step 8:点的入场方式
右侧 Effect Controls 能看到一个非常明确的预设:
AC IN [YRH] Controls
这个明显是 Animation Composer 3 的入场预设。
可见参数
Number of bounces = 2.00Scale = 0.00
复刻方法
你有两种做法:
做法 A:你也有 Animation Composer
直接给每个点套一个带弹跳的入场。
做法 B:纯手动
给每个点:
Scale 0 → 120 → 100- 时间 6~10 帧
- Easy Ease
- 稍微错开时间
Step 9:摄像机横移
作者在视频里说:
- 最后让 camera 横向扫过地图
- 同时文字出现
复刻操作
- 新建 Camera
- 给 Camera Position 打关键帧
- 从左往右轻微平移
不要移动太大,重点是:
- 让文字和地图点看起来有空间感
五、Scene 04:大 dashboard close-up
这是全片最“费工”的一段。
作者原话就是:
- 这段很细
- 他把整个 dashboard 在 AE 里重建了
- 每个 icon、shape、text 都单独做动画
Step 1:先建一个 BOX 预合成
视频里能看到有一个:
BOX
这个 comp 里装的是整个黑色圆角 UI 面板。
复刻做法
- 新建 comp:
BOX - 画一个大圆角矩形
- 做深色半透明描边风格
Step 2:重建 UI 结构
视频里左侧层名能看见大量明确的命名,你可以直接照这个逻辑建:
LOCATION boxhighlight500 totalDistribution[user (1).png][user (2).png]397 (79%)Claimedclaimed box103 (21%)AvailableARROW HEADARROW LINEAVAILABLE BOXARROW UP500LIVE
这说明作者不是把整张 UI 当成一张图
而是全部拆成:
- 标题
- 数字
- 标签
- 方框
- 图标
- 小头像
- 进度条
- LIVE 文本
Step 3:父级结构
视频里还能看到这些层被 parent 到不同控制层:
Claimed相关内容 parent 到claimedAvailable相关内容 parent 到Available- 顶部总标题一些内容 parent 到
Null 3 LIVE相关单独 parent
复刻建议
你也这样分:
- 顶栏组
- Available 模块组
- Claimed 模块组
- 进度条组
- 底部提示条组
每组一个 null。
Step 4:动画顺序
成片里这一段不是一起弹出来,而是:
- 左侧文案先出现
- 右侧 dashboard 面板进场
- 顶栏先亮起
- 两个数据 box 逐个进入
- 进度条延展
- 底部提示条再出现
复刻方法
按模块分组后,逐组做:
- Position 小幅位移
- Opacity 0 → 100
- 必要时加一点 Scale 入场
Step 5:镜头要 close-up
作者特别强调:
- 这段用了 close-up camera
也就是说不是全程正中满屏,而是:
- 摄像机靠近 UI
- 带一点角度
- 让细节更有层次
复刻操作
如果整个 UI 是 3D 预合成或 3D 图层:
- Camera 推近
- 稍微 rotate 一点
- 不要太夸张
六、Scene 05:左文右图的 staging 结构
这段的核心不是复杂技术,而是版式。
作者在视频里专门强调:
- text on the left
- visuals on the right
- 这就是 staging
Step 1:左侧放标题和副标题
视频里成片是:
-
左边大字:
AI-drivenLead Velocity
-
下方小字:
Claim faster, Close smarter
复刻建议
- 左侧文案全部左对齐
- 标题粗体
- 副标题细一点
- 颜色和右边 UI 主色一致
Step 2:右边放视觉主体
右边放的是前面做好的 dashboard 卡片。
操作
- 把 Scene 04 的 UI 预合成拖进来
- 缩小
- 放在右侧
- 稍微给一点角度
Step 3:入场顺序
因为这是 staging,顺序要明确:
- 左边标题先来
- 再带出右边卡片
不要一起出。
七、Scene 06:聊天 → 日历 → 图表 morph
这段是全片最适合拿来学“省时间叙事”的地方。
作者明确说:
- 他先做 agent 和 AI 的聊天
- 然后手机 morph 成 calendar
- calendar 再 morph 成 graph
- 这样一段里就把多个功能讲完了
Part A:先做聊天界面
Step 1:建立一个手机 / 聊天气泡布局
成片里这一段很简洁:
- 左边一个浅色聊天气泡
- 右上一个视频/文件卡片
- 底部一条输入条
复刻做法
用 shape layer 画:
- 聊天气泡
- 文件卡片
- 输入框
再用文字层放:
Looks awesome 😎Draft v1.mp4
Part B:手机 morph 成 calendar
Step 2:把聊天元素简化成几个几何基础件
复刻 morph 时,不要直接拿复杂 UI 去变,先抽象成基础图形:
- 圆
- 竖杆
- 顶部横条
作者在后面讲“反向旋转 trick”的时候,画面里就给了一个简化的结构:
MID CIRCLEPEDALRODMAIN CIRCLE
这其实就是他把复杂图形拆成基本几何件的思路。
Step 3:calendar / graph 也用相似几何件搭
为了能 morph,前后两个图形最好共享:
- 圆形
- 线
- 矩形
最稳的做法
用同一组 shape layer 改:
- Path
- Size
- Position
而不是完全新建另一套。
Step 4:用 trim paths / scale / path keyframes 做变形
作者没有把每一步 Path 动画完整展示出来,但成片很清楚是:
- 手机界面简化
- 变成 calendar 图形
- calendar 再变 graph
复刻建议
用以下 3 种组合就够:
Path关键帧ScaleOpacity- 必要时
Trim Paths
八、Apple typography 那段
作者后面说:
- 然后做了一段简单文字动画
- 他称为 Apple typography 风格
这类做法通常就是:
- 黑底
- 大白字
- 少量字间移动
- 缓慢淡入/位移
- 强留白
复刻建议
-
黑底
-
白字居中
-
每句单独一个 text layer
-
做:
- Opacity 0 → 100
- Position 微移
- Easy Ease
-
句与句之间用圆形母题过渡
九、圆形旋转但物体保持正向:反向旋转 trick
这是这条视频里最值得你记住的一个小技巧。
作者原话意思很明确:
- 如果你把物体直接 parent 到圆上
- 圆一转,物体也会跟着转
- 所以他不是单纯 parent
- 而是把物体的 rotation 链接到圆的 rotation
- 然后前面加一个负号
- 这样圆正转,物体反转,看起来物体保持正立
视频里能看到的层结构
在简化演示里,画面能读到:
MID CIRCLEPEDALRODMAIN CIRCLE
并且:
PEDALparent 到RODRODparent 到MAIN CIRCLE
复刻方法
情况 1:你要让外层圆转,但内部物体保持正
- 选中要保持正立的那个层
- 按
R Alt + 点击 Rotation 秒表- 输入类似:
-thisComp.layer("MAIN CIRCLE").transform.rotation
如果真正驱动旋转的是 ROD,就写:
-thisComp.layer("ROD").transform.rotation
结果
- 圆向前旋转
- 物体反向旋转
- 最终视觉上物体保持正立
十、最后一幕:closing text + logo + CTA
视频最后一段很简单。
Step 1:新建最后一幕 comp
作者最后用的是一句很简洁的收尾文案。
画面里能看到一个版本是:
Built for Closers
复刻方式
- 黑底
- 白字居中
- logo 放后面再进
Step 2:logo 和 CTA
- 导入 logo
- 让 logo 和 CTA 在文案之后进场
- 不要复杂,保持简洁
十一、整条片子的过渡怎么做
这条片子真正高级的地方,不是某一个 scene,而是它们之间连得顺。
作者自己总结的做法其实就 4 种:
1)circle wipe
用圆形扩大/缩小连接下一场景
2)match cut
球体 → 平面地图
同类形状之间切换
3)morph
手机 → 日历 → 图表
4)同一视觉母题重复出现
圆、点、问号、球、UI 圆角框
这些都让片子更统一
十二、这条片子里实际能确认到的插件 / 面板
视频里右侧能清楚看到这些面板开着:
Animation Composer 3Motion Tools ClassicTextExploderTrue Comp DuplicatorMotion ArrayMotion Bro 4.0.4
但就这条视频本身来看,真正能明确看到被用上的主要是:
1)Animation Composer 3
地图点的入场用了它的预设:
AC IN [YRH] ControlsNumber of bounces = 2.00Scale = 0.00
2)Element 3D
globe 段明确用了。
十三、替换素材时,哪些参数必须改
这部分最重要。
A. 你换品牌色时
必须统一改:
- 主蓝色
- 高亮青绿
- 橙色数据色
- 黑底灰度
- 地图点颜色
否则会出问题
因为这条片子很依赖“颜色统一作为母题”。
B. 你换文案时
Scene 01 / Scene 02
如果文字长度变化大:
- 单词拆分位置要重新排
- 问号位置要重摆
waiting这类做眼睛/点的词,如果换成别的词,视觉逻辑就可能不成立
最稳替代思路
如果你的新文案里没有天然的“点”,就自己手动画两个小圆,不一定非得从字里找。
C. 你换地图区域时
如果不是美国,而是别的国家/区域:
必须重做:
MAP 1MAP 2- globe 贴图
- 点位分布
- camera 横移方向
还能保留的
- Optics Compensation 做轻微弯曲
- 圆点入场方式
- globe → flat map 的 match cut 思路
D. 你换 dashboard 内容时
必须重新组织这些层级:
- 主标题
- Available / Claimed 两大模块
- 数字
- 进度条
- 底部提示条
- 头像/用户图标
最好保持的结构
继续按作者这种分组:
- 一个组一个 null
- 数字和标题分层
- box 与文本分离
- 进度条单独一组
这样后面动画最好调。
E. 你换到竖版 9:16 时
这条片子原本是横版 16:9。
如果你改成 9:16:
要重点改:
- 左右分栏的 staging 场景
- dashboard 的 close-up 镜头
- globe 和 flat map 的构图
- 结尾 logo / CTA 的位置
最麻烦的是
Scene 05 那种“左文右图”,到了竖版就不再适合横向排了。
你得改成:
- 上文下图
或者 - 先文后图的分镜式排法
十四、给你一个最稳的复刻顺序
不要一口气做完整条。
按下面顺序最稳:
第 1 轮:只搭结构
- 建 8 个 scene comp
- 全部放黑底
- 每个 scene 先只放文案和占位图
第 2 轮:先做 3 个最关键 scene
- Scene 01:waiting + 两个圆
- Scene 03:globe → map
- Scene 04:dashboard
第 3 轮:补 scene 间过渡
- circle wipe
- match cut
- morph
第 4 轮:再统一节奏
- 对齐音乐
- 调整每个 scene 的长度
- 给最后收尾做 logo / CTA
十五、最重要的实话
这条视频不是那种把鼠标每一步都录给你看的手把手教程,它更像:
- 项目案例拆解
- 局部屏录
- 方法论说明
所以我已经把它整理成了可复刻版本,但你要知道:
视频里能 100% 确认的
- 项目结构
- 场景划分方式
- 视觉母题思路
- globe 段用 Element 3D
- map 段的部分明确数值
- dashboard 的层级拆分方式
- map dots 的入场预设参数
- 反向旋转技巧
视频里没有完整展示到足够逐帧照抄的
- 每个 scene 的所有关键帧具体时间点
- 每个 UI 元件的全部数值
- 每个 morph 的 path 关键帧细节
- 第一幕“眼睛/等待”那部分所有辅助层的完整表达式或全部轨迹
所以你最好的使用方式是:
照着这份教程把结构和逻辑先搭出来,局部节奏和细节再按你的素材微调。
如果你要,我下一条可以继续给你做成一份更适合实操的版本:
“AE 跟做清单版”
格式会变成:
- 第 1 步点哪里
- 第 2 步建什么层
- 第 3 步输入什么文字
- 第 4 步哪些层 parent 给谁
- 第 5 步哪些地方打关键帧
这样你可以直接边开 AE 边照着搭。