Client Paid Me $450 – Here’s Exactly How I Did the Animation

1 阅读18分钟

可以。
这条视频本质上是 项目拆解 + 局部屏录演示,不是从头到尾完整录屏的纯教程,所以我下面这份会按两条原则来整理:

  • 以视频里实际出现过的 AE 操作为准
  • 看得清的数值我就写死,看不清的我会明确说“按成片结果复刻”

我把它整理成一份 可复刻文字版教程。你可以直接按这个顺序在 AE 里搭。


这条片子的核心思路

这是一个 60 秒地产 SaaS 宣传片。
作者的做法不是先把整条片子设计完再动画,而是:

  1. 先把脚本拆成 8 个 scene comp
  2. 每个 scene 单独做
  3. 圆形 / 点 / 问号 / 地图 / UI 模块 这些元素做视觉母题
  4. 再用 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 01
    • TEXT 02
    • BOX
    • MAP
    • MAP 1
    • MAP 2

建议你照着建

最稳的结构就是:

  • MAIN_RENDER
  • SCENE_01
  • SCENE_02
  • SCENE_03
  • SCENE_04
  • SCENE_05
  • SCENE_06
  • SCENE_07
  • ASSETS
  • TEXT_PRECOMPS
  • MAP_PRECOMPS
  • UI_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 的底色基本都是:

  • 深灰偏黑背景

不是纯黑,而是很深的灰蓝黑。

复刻做法

  1. Layer > New > Solid
  2. 颜色设成很深的灰黑色
  3. 作为每个 scene 的底板

Step 4:音乐先放进去

作者在视频里明确说了:

  • 先选音乐
  • 因为音乐决定节奏和整体流动感

复刻做法

  1. 先把音乐拖到 MAIN_RENDER
  2. 用 marker 标出每句文案的大概入点
  3. 再把 scene 分配到这些节奏点上

二、Scene 01:your next deal is waiting

这是整条片子最重要的“风格起点”。


Step 1:新建 SCENE 01

  1. Composition > New Composition
  2. 命名:SCENE 01
  3. 尺寸:1920 x 1080

Step 2:加深色背景

  1. 新建 Solid
  2. 放到最底层

视频里能看到背景层名字像:

  • 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 的时间线是清楚的。
能看到它最后不是一整句一个层,而是拆成了:

  • Your
  • next
  • deal
  • is
  • waiting

并且这些词都 parent 到一个总控制层。

实际复刻方式

  1. 保留一条完整文本作为参考

  2. 再分别建立 5 个文字层:

    • Your
    • next
    • deal
    • is
    • waiting
  3. 新建一个空层或文字控制层:

    • FIRST TEXT

视频里能读到的结构

TEXT 01 里,作者的层级大致像这样:

  • FIRST TEXT
  • Your
  • next
  • deal
  • is
  • waiting
  • waiting 2
  • waiting 3

说明他对 waiting 做了额外复制,用于后面的“眼睛 / 点 / 过渡”处理。


Step 5:把各个单词 parent 到总控制层

视频里 TEXT 01 里能看到:

  • 各单词层都 parent 到 7. FIRST TEXT
  • waiting 2 / waiting 3 又 parent 到 12. waiting

你照着搭

  1. 选中所有词层
  2. Parent 到 FIRST TEXT
  3. 如果你也做点/眼睛辅助层,把它们 parent 到 waiting

Step 6:摆字间距

视频里中途画面能清楚看到作者把字拆开排成:

  • Your next
  • deal is
  • waiting

前后关系不是死板逐字排,而是为了给中间点和圆形留空间。

实操建议

  • 先让整句在中间
  • 然后把 deal is 这块拉开一点
  • 给右侧留出问号/圆的入场空间

Step 7:把“waiting”做成视觉母题的起点

作者说得很明确:

  • 他在排第一句时,注意到了两个点
  • 于是把这两个点变成“眼睛”
  • 后面又把这两个圆拿去做转场

也就是说这一步的重点不是文字本身,而是:

从字里面提取两个圆点,作为全片的主要视觉母题

复刻做法

  1. 新建两个小圆
  2. 放在 waiting 附近,像“眼睛”
  3. 让它们做一个轻微的眨眼/缩放动画

最简单的做法

每个圆:

  • Scale 100 → 20 → 100
  • 时间 4~6 帧
  • Easy Ease

然后让两个圆轻微左右移动,模拟“等待 / 张望”


三、Scene 02:问号场景

作者在视频里说:

  • 下一句里有问号
  • 他就把问号当成这个 scene 的主元素

Step 1:建立第二句文字

画面里能看到这一句的主体是:

  • Will you pick up

右边跟一个蓝色问号。

复刻做法

  1. 新建白色文字:

    • Will you pick up
  2. 单独建立一个蓝色:

    • ?
  3. 再画一个白色描边圆,把问号圈起来


Step 2:问号单独做成主元素

不要把 ? 放在文字层里面一起动。
作者明显把它拿出来当独立视觉元素了。

操作

  1. ? 单独一个文字层
  2. 白色圆描边单独一个 shape layer
  3. ? 和描边圆预合成或一起 parent 到一个 null

Step 3:从 Scene 01 的两个圆过渡到问号

作者说得很清楚:

  • 前面两个圆被继续拿来做 scene 之间的连接

复刻方式

最稳的是做一个圆形扩张/聚合过渡:

  1. Scene 01 结束时,让两个小圆快速靠拢
  2. 合成一个大圆形遮罩
  3. 切到 Scene 02 时,这个大圆的位置变成问号外圈那只白圆

这样就有“视觉母题延续”的感觉。


四、Scene 03:圆形转 globe,再转美国地图

这是整条片子里技术性最强的一段。


Part A:先做 globe

Step 1:准备一个地图预合成

作者明确说了:

  • globe 是 3D sphere
  • 他用一个 pre-comp 作为 texture

复刻做法

  1. 新建 comp:MAP 1
  2. 在里面放美国地图轮廓
  3. 给它做蓝色渐变

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 Shader
  • Diffuse = 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.7
  • End of Ramp = 1063.3, 339.1
  • Ramp Shape = Linear Ramp
Layer Transform(MAP 2)

画面里还能读到:

  • Anchor Point = 960, 540, 0
  • Position = 976, 586.7, 0
  • Scale = 15.5%, 15.5%, 100%
  • Opacity = 100%

Step 6:地图做成 3D layer

作者口述里明确说了:

  • 他把地图变成 3D 图层
  • 再在地图上铺很多小圆点

复刻操作

  1. 选中 MAP 2
  2. 打开 3D 开关
  3. 用 camera 看地图有轻微透视感

Step 7:铺美国各地的圆点

视频里这一步能看到很多黄色/青色小圆点分布在地图上。

复刻做法

  1. 用一个小圆 shape layer 做模板
  2. 复制很多个
  3. 分布到美国地图上

颜色

成片里圆点主要是:

  • 青绿

Step 8:点的入场方式

右侧 Effect Controls 能看到一个非常明确的预设:

  • AC IN [YRH] Controls

这个明显是 Animation Composer 3 的入场预设。

可见参数

  • Number of bounces = 2.00
  • Scale = 0.00

复刻方法

你有两种做法:

做法 A:你也有 Animation Composer

直接给每个点套一个带弹跳的入场。

做法 B:纯手动

给每个点:

  • Scale 0 → 120 → 100
  • 时间 6~10 帧
  • Easy Ease
  • 稍微错开时间

Step 9:摄像机横移

作者在视频里说:

  • 最后让 camera 横向扫过地图
  • 同时文字出现

复刻操作

  1. 新建 Camera
  2. 给 Camera Position 打关键帧
  3. 从左往右轻微平移

不要移动太大,重点是:

  • 让文字和地图点看起来有空间感

五、Scene 04:大 dashboard close-up

这是全片最“费工”的一段。

作者原话就是:

  • 这段很细
  • 他把整个 dashboard 在 AE 里重建了
  • 每个 icon、shape、text 都单独做动画

Step 1:先建一个 BOX 预合成

视频里能看到有一个:

  • BOX

这个 comp 里装的是整个黑色圆角 UI 面板。

复刻做法

  1. 新建 comp:BOX
  2. 画一个大圆角矩形
  3. 做深色半透明描边风格

Step 2:重建 UI 结构

视频里左侧层名能看见大量明确的命名,你可以直接照这个逻辑建:

  • LOCATION box
  • highlight
  • 500 total
  • Distribution
  • [user (1).png]
  • [user (2).png]
  • 397 (79%)
  • Claimed
  • claimed box
  • 103 (21%)
  • Available
  • ARROW HEAD
  • ARROW LINE
  • AVAILABLE BOX
  • ARROW UP
  • 500
  • LIVE

这说明作者不是把整张 UI 当成一张图

而是全部拆成:

  • 标题
  • 数字
  • 标签
  • 方框
  • 图标
  • 小头像
  • 进度条
  • LIVE 文本

Step 3:父级结构

视频里还能看到这些层被 parent 到不同控制层:

  • Claimed 相关内容 parent 到 claimed
  • Available 相关内容 parent 到 Available
  • 顶部总标题一些内容 parent 到 Null 3
  • LIVE 相关单独 parent

复刻建议

你也这样分:

  1. 顶栏组
  2. Available 模块组
  3. Claimed 模块组
  4. 进度条组
  5. 底部提示条组

每组一个 null。


Step 4:动画顺序

成片里这一段不是一起弹出来,而是:

  1. 左侧文案先出现
  2. 右侧 dashboard 面板进场
  3. 顶栏先亮起
  4. 两个数据 box 逐个进入
  5. 进度条延展
  6. 底部提示条再出现

复刻方法

按模块分组后,逐组做:

  • Position 小幅位移
  • Opacity 0 → 100
  • 必要时加一点 Scale 入场

Step 5:镜头要 close-up

作者特别强调:

  • 这段用了 close-up camera

也就是说不是全程正中满屏,而是:

  • 摄像机靠近 UI
  • 带一点角度
  • 让细节更有层次

复刻操作

如果整个 UI 是 3D 预合成或 3D 图层:

  1. Camera 推近
  2. 稍微 rotate 一点
  3. 不要太夸张

六、Scene 05:左文右图的 staging 结构

这段的核心不是复杂技术,而是版式。

作者在视频里专门强调:

  • text on the left
  • visuals on the right
  • 这就是 staging

Step 1:左侧放标题和副标题

视频里成片是:

  • 左边大字:

    • AI-driven
    • Lead Velocity
  • 下方小字:

    • Claim faster, Close smarter

复刻建议

  • 左侧文案全部左对齐
  • 标题粗体
  • 副标题细一点
  • 颜色和右边 UI 主色一致

Step 2:右边放视觉主体

右边放的是前面做好的 dashboard 卡片。

操作

  1. 把 Scene 04 的 UI 预合成拖进来
  2. 缩小
  3. 放在右侧
  4. 稍微给一点角度

Step 3:入场顺序

因为这是 staging,顺序要明确:

  1. 左边标题先来
  2. 再带出右边卡片

不要一起出。


七、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 CIRCLE
  • PEDAL
  • ROD
  • MAIN CIRCLE

这其实就是他把复杂图形拆成基本几何件的思路。


Step 3:calendar / graph 也用相似几何件搭

为了能 morph,前后两个图形最好共享:

  • 圆形
  • 线
  • 矩形

最稳的做法

用同一组 shape layer 改:

  • Path
  • Size
  • Position

而不是完全新建另一套。


Step 4:用 trim paths / scale / path keyframes 做变形

作者没有把每一步 Path 动画完整展示出来,但成片很清楚是:

  • 手机界面简化
  • 变成 calendar 图形
  • calendar 再变 graph

复刻建议

用以下 3 种组合就够:

  • Path 关键帧
  • Scale
  • Opacity
  • 必要时 Trim Paths

八、Apple typography 那段

作者后面说:

  • 然后做了一段简单文字动画
  • 他称为 Apple typography 风格

这类做法通常就是:

  • 黑底
  • 大白字
  • 少量字间移动
  • 缓慢淡入/位移
  • 强留白

复刻建议

  1. 黑底

  2. 白字居中

  3. 每句单独一个 text layer

  4. 做:

    • Opacity 0 → 100
    • Position 微移
    • Easy Ease
  5. 句与句之间用圆形母题过渡


九、圆形旋转但物体保持正向:反向旋转 trick

这是这条视频里最值得你记住的一个小技巧。

作者原话意思很明确:

  • 如果你把物体直接 parent 到圆上
  • 圆一转,物体也会跟着转
  • 所以他不是单纯 parent
  • 而是把物体的 rotation 链接到圆的 rotation
  • 然后前面加一个负号
  • 这样圆正转,物体反转,看起来物体保持正立

视频里能看到的层结构

在简化演示里,画面能读到:

  • MID CIRCLE
  • PEDAL
  • ROD
  • MAIN CIRCLE

并且:

  • PEDAL parent 到 ROD
  • ROD parent 到 MAIN CIRCLE

复刻方法

情况 1:你要让外层圆转,但内部物体保持正

  1. 选中要保持正立的那个层
  2. R
  3. Alt + 点击 Rotation 秒表
  4. 输入类似:
-thisComp.layer("MAIN CIRCLE").transform.rotation

如果真正驱动旋转的是 ROD,就写:

-thisComp.layer("ROD").transform.rotation

结果

  • 圆向前旋转
  • 物体反向旋转
  • 最终视觉上物体保持正立

十、最后一幕:closing text + logo + CTA

视频最后一段很简单。


Step 1:新建最后一幕 comp

作者最后用的是一句很简洁的收尾文案。

画面里能看到一个版本是:

  • Built for Closers

复刻方式

  1. 黑底
  2. 白字居中
  3. logo 放后面再进

Step 2:logo 和 CTA

  1. 导入 logo
  2. 让 logo 和 CTA 在文案之后进场
  3. 不要复杂,保持简洁

十一、整条片子的过渡怎么做

这条片子真正高级的地方,不是某一个 scene,而是它们之间连得顺。

作者自己总结的做法其实就 4 种:

1)circle wipe

用圆形扩大/缩小连接下一场景

2)match cut

球体 → 平面地图
同类形状之间切换

3)morph

手机 → 日历 → 图表

4)同一视觉母题重复出现

圆、点、问号、球、UI 圆角框
这些都让片子更统一


十二、这条片子里实际能确认到的插件 / 面板

视频里右侧能清楚看到这些面板开着:

  • Animation Composer 3
  • Motion Tools Classic
  • TextExploder
  • True Comp Duplicator
  • Motion Array
  • Motion Bro 4.0.4

但就这条视频本身来看,真正能明确看到被用上的主要是:

1)Animation Composer 3

地图点的入场用了它的预设:

  • AC IN [YRH] Controls
  • Number of bounces = 2.00
  • Scale = 0.00

2)Element 3D

globe 段明确用了。


十三、替换素材时,哪些参数必须改

这部分最重要。


A. 你换品牌色时

必须统一改:

  • 主蓝色
  • 高亮青绿
  • 橙色数据色
  • 黑底灰度
  • 地图点颜色

否则会出问题

因为这条片子很依赖“颜色统一作为母题”。


B. 你换文案时

Scene 01 / Scene 02

如果文字长度变化大:

  • 单词拆分位置要重新排
  • 问号位置要重摆
  • waiting 这类做眼睛/点的词,如果换成别的词,视觉逻辑就可能不成立

最稳替代思路

如果你的新文案里没有天然的“点”,就自己手动画两个小圆,不一定非得从字里找。


C. 你换地图区域时

如果不是美国,而是别的国家/区域:

必须重做:

  • MAP 1
  • MAP 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 轮:只搭结构

  1. 建 8 个 scene comp
  2. 全部放黑底
  3. 每个 scene 先只放文案和占位图

第 2 轮:先做 3 个最关键 scene

  1. Scene 01:waiting + 两个圆
  2. Scene 03:globe → map
  3. Scene 04:dashboard

第 3 轮:补 scene 间过渡

  1. circle wipe
  2. match cut
  3. morph

第 4 轮:再统一节奏

  1. 对齐音乐
  2. 调整每个 scene 的长度
  3. 给最后收尾做 logo / CTA

十五、最重要的实话

这条视频不是那种把鼠标每一步都录给你看的手把手教程,它更像:

  • 项目案例拆解
  • 局部屏录
  • 方法论说明

所以我已经把它整理成了可复刻版本,但你要知道:

视频里能 100% 确认的

  • 项目结构
  • 场景划分方式
  • 视觉母题思路
  • globe 段用 Element 3D
  • map 段的部分明确数值
  • dashboard 的层级拆分方式
  • map dots 的入场预设参数
  • 反向旋转技巧

视频里没有完整展示到足够逐帧照抄的

  • 每个 scene 的所有关键帧具体时间点
  • 每个 UI 元件的全部数值
  • 每个 morph 的 path 关键帧细节
  • 第一幕“眼睛/等待”那部分所有辅助层的完整表达式或全部轨迹

所以你最好的使用方式是:

照着这份教程把结构和逻辑先搭出来,局部节奏和细节再按你的素材微调。

如果你要,我下一条可以继续给你做成一份更适合实操的版本:

“AE 跟做清单版”
格式会变成:

  • 第 1 步点哪里
  • 第 2 步建什么层
  • 第 3 步输入什么文字
  • 第 4 步哪些层 parent 给谁
  • 第 5 步哪些地方打关键帧

这样你可以直接边开 AE 边照着搭。