如何制作 AI 动效：不用 After Effects 也能做出商业级广告

案例展示

Training Season 动效视频

制作一部配合 "Training Season" 的 25 秒竖版歌词动效影片。
1080×1920，30fps。使用 Three.js + postprocessing，二维叠加层使用 GSAP。

音频
严格使用此 reel 中的 25 秒音频——不要剪切或拼接：
https://www.instagram.com/reel/DczJLScIIuV/
首先提取该片段的完整歌词，建立节拍网格，并为每个唱出的词精确计时。

动效参考
https://www.instagram.com/reel/DerrAaVIxjl/
借用它的骨架：摄像机永不停下，歌词环绕旋转圆环，
关键词在节拍上猛击至全屏宽度，并使用甩镜转场。
它的动效设计很出色，但审美不适合——不要复制单一粉色、
重复的隧道或混用字体。

故事
一名女性在夜晚把自己想要的爱情写在显化板上。
这是她的标准，不是恳求。在 "training season's over" 时，她不再
等待：每个愿望都被打上红色对勾，而此时天已亮。
女性主义、充满希望——"there's still tomorrow"。画面中不要出现男性。
弧线：安静的夜晚 → 写下清单 → 一个脆弱时刻 → 过载 → 宣言 → 清晨。

视觉
拼贴 / 印刷风格：杂志剪贴字母、愿景板、报纸头版。
奶油色 / 粉色 / 银色，配温暖的胶片颗粒；红色仅作点缀。最多使用 2 种字体。
不要使用真人面孔——使用剪影和物体。

动效规则
- 11 个关键词使用挤出的 3D 字体，落下时占屏幕宽度的 85–100%，
  清晰锐利，并至少保持可读 0.3s。
- 其他每个歌词词语都要在唱出时出现，高度至少 90px。
- 每帧最多 3 层，每次只突出一个主角元素。
- 深度来自固定在空间中的环境（网格房间、轨道圆环、
  刻度线），而不是漂浮的装饰。
- 转场：甩镜 + 模糊、单帧白画面，或穿过物体飞行。
- 每个快速动作都使用子帧运动模糊。不要让 bloom 使画面雾化。
- 视觉高峰设在副歌的第一拍。

结尾
在 "over" 时：显示 "manifested ✓"，六个红色对勾逐一勾选，
然后显示 "made with OD Motion"。

先向我展示 3–5 张关键静帧。在我批准前不要制作动画。

IKEA 动效视频

为 IKEA 的全新 PS 2026 系列制作一部 11 秒的产品发布影片。
非官方概念。1920×1080，60fps，HTML + GSAP。

参考
逐镜头复制此 reel 的节奏，但不要复制它的故事：
https://www.instagram.com/reel/DcVTS2exsRR/
（线稿产品卡片逐张推入 → 组成网格 → 收拢为一张画布 → logo）

品牌（第一秒内必须让人认出 IKEA）
- 颜色：IKEA 蓝 #0058A3、黄色 #FFDB00、白色、深灰色 #3C3C3C
- 视觉语言：IKEA 组装说明书式线稿（等距视角、黑色细描边）
- 字体：简洁的几何无衬线体，价格使用粗体

素材（已附加）
- 5 张白底产品照片及价格：
  Stool $69.99 · Folding Chair $59.00 · Side Table $39.99 · Chair Bed $399.00 · Nightstand $69.99
- 3 张官方尺寸图（用它们绘制线稿）
- IKEA logo（SVG）
- 文案："MAKE ROOM FOR PLAY" / "Playful functionality since 1995."
- 卡片关键词：Playful / Flexible / Affordable

镜头
0.0–2.5s  产品卡片在传送带上滑入；每次推进都落在节拍上
          （0.55 / 0.775 / 1.0 / 1.175s）。每张卡片 = 线稿 + 名称 + 价格。
          凳子倾斜落入，然后自动扶正。
          价格标签落下并钉住，带轻微的橡皮筋晃动。
          线稿位于比卡片更深的层级（视差）。
          顶排抬升到半高位置，Chair Bed 从下方升起。
          停留 0.3s，同时让线稿漂浮。
2.5–6.0s  卡片归位形成房间平面图。Chair Bed 卡片展开成自身的
          轮廓，并落在条带上。真实产品阵列从中心向外擦入。
          价格标签从左到右钉在真实产品上。
          "MAKE ROOM FOR PLAY" 逐行显现。
6.0–8.0s  Logo：I-K-E-A 字母逐个猛击进入，擦除为 IKEA 蓝，再向前推进。
结尾卡片  "Unofficial concept · not affiliated with IKEA"

动效规则
- 不使用白色闪帧，不使用硬切。每个转场都必须是连续推进或擦除。
- 元素彼此重叠并相互跟随；任何元素都不能单独突然出现。
- 快速动作使用运动模糊。

声音
先锁定音乐，再把每个关键动作放在节拍上。
每个动作下方加入轻柔的 whoosh，每个价格标签配一个轻微的 "pin"。
混音至 -16 LUFS，不要有刺耳的高频。

先向我展示 3–5 张关键帧。在我批准前不要渲染完整影片。

poppi 动效视频

为益生元汽水 poppi 制作一部 11 秒的品牌影片。
非官方概念。1920×1080，60fps，HTML + GSAP。

参考
逐镜头复制此 reel 的节奏，但使用 poppi 自己的视觉世界：
https://www.instagram.com/reel/DbqR1UxhTvE/

品牌（第一秒内必须让人认出 poppi）
- 每次切换使用一种 poppi 口味颜色。洋红 #EC008C、黄色 #FFF200、
  蓝色 #0667BE、橙色 #F15506、粉色 #FF8CCB、红色 #D4002E
- poppi 字标（SVG，已附加）
- 文案（来自 drinkpoppi.com）："Soda's back, but better" / "THE PREBIOTIC SODA"
- 个性词：FIZZY / BOLD / FRUITY / BUBBLY / FUN

素材（已附加）
- poppi 字标 SVG
- 罐身渲染图：Strawberry Lemon、Orange Cream、Shirley Temple、Cream Soda、
  Ginger Lime、Sour Apple、Alpine Blast、Doc Pop
- 3 张生活方式照片

镜头
0.00–1.85  在节拍上进行 9 次硬切。每次切换 = 一种口味颜色的放射星芒
           （冲击缩放 1.18 → 1.03）+ 对应水果弹入（1.3 → 1）。
           0.285 / 0.785s 的底鼓推动整个画面。
           嵌套星芒：外层缓慢旋转，内层反向旋转并放大。
1.85       字标通过挤压与拉伸弹出，紫色 → 洋红色，并伴随星芒爆发。
2.73       照片窗口从底部以遮罩方式升起，并变为圆角卡片；
           "Soda's back, but better" 从上方向下压入；气泡上升。
3.65       照片在左，巨大草莓在右，"NEW" 贴纸拍上去。
4.56       一个巨大的橙子落到另外两个上面，三个一起下沉。
5.56       个性词带运动模糊垂直滚动；中间一行为亮黄色。
6.60       一罐汽水横向猛砸落下，汽水水洼扩散，"THE PREBIOTIC SODA" 占满画面宽度。
≈7.5       罐子旋转进入（Sour Apple → Orange Cream），每个落地时都出现冲击环。
≈8.3       照片卡片从右向左滑动。
≈9.2       全屏照片，快速眨眼一次。
≈9.8–11    结尾卡片：一罐汽水跳入（Pixar 风格），拉环弹开，一个气泡升起并
           变成字标中 "i" 上方的点。
结尾卡片   "Unofficial concept · not affiliated with poppi"

声音
先锁定音乐，不要剪切。每次硬切都落在节拍上。
主角声音是真实开罐时的 "tss"。混音至 -16 LUFS。

先向我展示 3–5 张关键帧。在我批准前不要渲染完整影片。

Duolingo 动效视频

为 Duolingo 的新功能 Image Flashcards 制作一部 21 秒的发布影片
（发布于 2026 年 10 月 19 日：完成一节课后，你会看到一张图片，没有选项，
并大声说出单词；答错的卡片会再次出现）。
非官方概念。1920×1080，60fps，HTML + GSAP。

参考（仅参考动效——不要参考故事）
https://www.instagram.com/reel/DafsqUut4x1/
借用：叠加在场景上的 UI、逐词出现的大字，以及从不切镜头的摄像机。
故事必须来自 Duolingo 的功能，而不是来自这个 reel。

品牌（第一秒内必须让人认出 Duolingo）
- 第一秒让 Duo 出现在屏幕上
- 绿色 #58CC02、蓝色 #1CB0F6、红色 #FF4B4B、深灰色 #3C3C3C
- 厚实的 3D 按钮；圆润字体（Nunito）
- 尽可能使用官方 Duolingo Lottie 动画（已附加）

脚本（自然的女性旁白）
1. "Easy."  （配合熟悉的点击词块课程）
2. "Remembering it? … Not so much."
3. "So we took the choices away."
4. "Meet Image Flashcards."
5. "A picture… and your voice."
6. "Miss one? It comes back."  → 以 Duolingo 应用图标 + 名称结束

镜头
0.0–5.9   手机课程：手指点击词块；Duo 在 "Easy." 时从手机中跳出。
5.9–8.0   词块掉落；镜头穿过它们，推入一张空白卡片。
8.0       "Meet Image Flashcards"——官方爆发动画。
10.2      出现一张图片，麦克风开启，学习者说出单词。
14.2      Correct!
14.9      一张答错的卡片摆回画面："Miss one? It comes back."
17.3–21   应用图标苏醒，并在 "Duolingo" 时爆发。
结尾卡片  "Unofficial concept · not affiliated with Duolingo"

标志性动作
一个巨大的 Duolingo 3D 按钮被按下，并以色彩漫灌到下一个场景。每次转场都使用这一动作。

动效规则
不使用白色闪帧，不使用硬切。摄像机连续运动，并具有视差深度。快速动作使用运动模糊。

声音
先录制 / 生成旁白，再根据每句台词剪辑画面。
每个动作都有自己的声音：点击、弹出、卡片滑动、麦克风开启、正确、失败、爆发。
音乐置于旁白下方。混音至 -14 LUFS。

先向我展示 3–5 张关键帧。在我批准前不要渲染完整影片。

IKEA 动效视频

设备音量保持不变，先播放 A，再播放 B。A 只有音乐；B 在音乐之外加了一层对应各个动作的音效，其中 whoosh 的峰值和最快的动作对齐。画面完全一样，你可以直接听出音效带来的变化。

100K 与 OpenDesign Logo 动效视频

100K 叙事视频沿用了一支 HyperFrames 发布片的参考，用到推文 UI、真实曲线，以及帖子、图表和计数器的动效片段。音乐改了 15 个版本，才让曲子本身的高潮和画面高潮准确对上。音乐来源为 Pixabay。

先找参考，再按节拍拆解，选一个贯穿全片的标志性动作。渲染之前先确认静帧，排画面节奏之前先定好声音。

像“让它更有活力”这样的要求，仍然有太多问题没说清楚：什么要动？视线该引到哪里？哪个词要卡在节拍上？观众第一秒应该认出什么？

下面的工作流就是把这些问题逐个变成具体的制作步骤。产品发布片、家具概念广告、文字动效视频、品牌故事短片都适用。走完之后，你会得到一份制作需求、一组带时间的分镜、确认过的关键帧、一个可编辑的动效项目，以及检查过的导出视频。

开始前需要准备什么

准备好一个明确的主题、目标受众、交付格式，以及能让作品有辨识度的素材：logo、产品 UI、产品照片，或一小组确认过的图片。音乐和旁白要选你有权用于最终发布场景的。参考作品只用来研究；能看不代表可以重新发布其中的画面或声音。

你还需要能生成或整理素材的方式、动效渲染工具，以及一位能确认视觉方向的评审人。在这些项目里，Claude 负责方向和制作需求，Codex 负责素材生成和实现，重复性的品牌适配可以单独分给别的工具。你可以按这套分工选择顺手的工具。

第 1 步：按结构选参考作品

先想清楚你要怎么把事情讲明白，再去选参考。家具广告和软件发布片可能转场都很漂亮，但要解决的问题不一样。

可以从四种动效类型入手：

记下原始链接、作者署名、收集日期，再用一句话写明你想从中学什么。如果记录点赞数或评论数，也要写上查看日期：这些数字会变，而且说明不了视频为什么好。

可以先从这些参考看起：@studio.ojas 的 Ramp、@vanshika.motion 的 MUJI、@bymyno_ 的 Henki，以及@jordans.archivess 的 Visual Test 01。请打开原帖，看创作者的作品。

做到这一步，你应该：能说清这个参考为什么适合你要讲的信息，并指出你打算研究的具体技巧。

第 2 步：按节拍拆解参考作品

先完整看一遍，了解整个故事；再静音看一遍；最后再看一遍，重点听声音。这样可以把画面结构和声音带来的情绪分开看。接着做一组分镜截图，这样不用来回拖进度条，也能看清视频是怎么推进的。

如果你有可合法使用的本地副本，可以用 FFmpeg 先做一张粗略的分镜截图：

ffmpeg -i reference.mp4 -vf "fps=1,scale=240:-1,tile=5x4" -frames:v 1 reference-contact-sheet.jpg

这个例子每秒取一帧，取前 20 秒。视频更长的话，就多做几张分镜截图。转场很快的地方，要在它发生的时间点前后细看；分镜截图能帮你看清画面变化，但动作是否流畅，还得回到视频里判断。

每个节拍记四项：

1. 目的：观众看到这里会了解什么，或有什么感受？
2. 构图：前景和背景各是什么？视线落在哪里？
3. 动作：什么进入、移动、变化或离开？哪个动作会反复出现？
4. 声音：这个动作是跟着音乐重音、口播词，还是音效走的？

要把视觉手法和它想解决的问题分开看。满墙便利贴也许是在表现“压得喘不过气”；真正要学的，是视频怎么让观众感受到这种压力。你的产品可能需要换一种比喻。

请以动效设计师的视角分析这份参考作品。
针对每个节拍，描述沟通目标、构图、
进入/停留/退出动作，以及声音事件。
指出赋予影片辨识度的唯一一个重复动作。
将可复用的动效原则与创作者的故事、
品牌素材及特色艺术作品区分开来。
不要编造你无法观察到的时间戳。请标明未知项。

做到这一步，你应该：拿到一份带时间的拆解，并能解释标志性动作怎样支撑故事。

第 3 步：写清楚故事和分镜

借鉴动效手法，但故事要围绕你自己的主题重新搭。Duolingo 案例里，早期版本不仅借了 VoiceOS 的动画语言，连故事也一起借了过来，结果这个故事放在新产品上讲不通。后来的一版开场在天空和森林上停得太久，品牌很难认出来。修改办法是在第一秒就放进 Duo、品牌绿和有立体感的按钮。

对品牌视频来说，第一秒能不能认出品牌，是个很实用的方向标准。并不是每支叙事视频都必须这样，但如果目标是让观众马上认出产品，这是个好用的检查点。

写清楚从参考里学什么、舍弃什么。要做完整渲染之前，先把字体、配色、图像处理方式、一个反复出现的动作和情绪推进定下来。

为 [产品或主题] 创建一份动效设计简报。
受众：[观看者是谁]。
核心信息：[他们应该记住什么]。
交付规格：[时长、宽高比、分辨率、帧率]。
品牌素材：[已确认文件]。
参考：[链接或获准使用的本地文件]。
借用：[具体动效原则]。
不要借用：参考作品的故事、措辞、艺术作品或身份特征。

定义视觉规则、情绪弧线、一个标志性动作，
以及一份镜头清单。为每个镜头提供沟通目的、
开始/结束时间、可见元素、动作和声音提示。
实施前先说明缺失的输入。
在完成简报和关键帧方案后停止；暂时不要渲染。

比如一支家具概念短片，可以先介绍一件产品，再展示多件物品如何拼成一个房间，最后停在品牌收尾画面上。标志性动作可以是每件物品吸附进同一个网格的方式。就算观众漏看了某个转场，开头、中段和结尾也应该一目了然。

做到这一步，你应该：让没看过参考作品的人，也能根据分镜清单看懂这支视频。

第 4 步：先定配乐和旁白，再排镜头

先决定视频是音乐驱动还是旁白驱动。音乐驱动的，要留意乐句、强拍、过渡和能用的结尾。旁白视频则应先定文案，录好旁白初稿，再设定每个镜头的时长。

别只看 BPM。节拍网格只能告诉你每一拍落在哪里，看不出某个词从哪里起音、哪里停顿，也看不出歌曲的情绪高点。Training Season 案例的节奏为 122.75 BPM，但文字动效还需要精确到每个词的时间。

做一张简短的音画对照表，记下时间、事件、对应的画面动作和音效。只有音效确实能描述动作时才加。whoosh 音效要让声音最强的部分对上动作最快的部分，不要只是让两段同时开始。

请使用已确认的音频创建一份声音提示表。
标记乐句边界、强重音、口播词语的起音，
以及自然结尾。区分实测事件和估算事件。
将每个已确认镜头映射到这些提示点上。
针对有意义的动作，建议一层克制的音效。
未经确认，不要替换或拼接原声。

两个案例里都遇到过配乐问题。Training Season 里，把不同来源的音乐拼在一起，音色变了。100K 叙事视频里，只有曲子自己的高潮和画面高潮对上，并保留音乐原有的起伏，音乐才真正贴合画面。与其把音乐剪成另一种结构，不如重剪画面。

做到这一步，你应该：确定配乐的起止位置，并安排好关键动作对应的节拍和音效。

第 5 步：生成素材并确认关键帧

做动画之前，先准备三到五张有代表性的静帧：开场、一个信息较多的中段画面、高潮，还有结尾定格的画面。如果某个特殊场景决定了整个创意，哪怕超过五帧也要加；Training Season 就用了八张静帧。

生成图像时，光照、镜头角度、材质和背景的要求要保持一致。商业视频要检查抠图边缘和接触阴影。界面视频要核对文字和产品细节。渲染工具修不好不准确的界面，也救不了一张和整体风格不搭的产品照片。

根据已确认的简报和镜头清单准备关键帧。
使用真实的品牌素材、最终文案和预定宽高比。
展示开场、信息最密集的画面、情绪高峰和最终停留。
针对每一帧，说明其目的和计划中的动作。
检查文字可读性、素材一致性、裁切和品牌识别度。
在这些画面获得确认前，不要制作整部影片的动画。

要按最终的显示尺寸来评审，包括在手机上看。竖版画面别当成大桌面图来判断。检查文字能不能看清、层级是否分明，以及反复出现的视觉概念能不能贯穿各帧。

做到这一步，你应该：拿到构图和素材的确认，而不只是确定了几张风格参考图。

第 6 步：按画面需要选择 2D 或 3D

如果画面问题主要是排版、卡片、抠图产品、界面元素或网格构图，就用二维方案。IKEA、poppi 和 Duolingo 案例都用了 HyperFrames 加 GSAP。

如果深度、透视、镜头运动或空间关系本身就是创意的一部分，就用 3D。Training Season 在迭代中从 HyperFrames 换成了 Three.js，后期用 postprocessing 做景深、辉光和色差，还加了子帧运动模糊。这些只是实现特定效果的选项，不是每支视频都需要。

为每个镜头定好进入、停留和退出。让标志性动作以不同变化反复出现，需要阅读或强调的地方就让画面静一静。在制作需求里确定帧率，渲染和导出时保持一致。

实施已确认的动效项目。
遵循已确认的关键帧和声音提示表。
让同一个标志性动作在各镜头间保持一致。
确保时间逻辑具有确定性，使指定时间戳能够
被反复渲染。素材保持在本地，并明确写出路径。
完整影片渲染前，先渲染一段具有代表性的短片段。
交付可编辑源文件、素材依赖项和导出设置。
不要添加未经确认的效果，也不要更改原声。

代表性片段要包含一个最难的转场，或信息最密集的画面。做完整渲染前，先配上声音看一遍。检查文字在运动时是否还看得清、景深会不会挡住信息，以及渲染结果能不能还原已确认的静帧。

做到这一步，你应该：确认最难的片段能顺利播放，并且重复渲染时结果一致。

第 7 步：检查导出视频，再比较不同版本

带声音把实际导出的视频从头看到尾。再静音看一遍，最后抽查选定的帧。每一轮能发现不同的问题：节奏别扭、画面叙事薄弱、局部渲染错误。

提修改意见要具体。别说“做得更好一点”，而要写明时间点、看到的问题和想要的结果。并排对比时要对齐时间，播放条件也要一致；否则配乐更响或剪辑点错位，都会让对比结果产生误导。

根据已确认的简报审核导出的影片。
检查开场身份、信息、文字可读性、
素材一致性、标志性动作、转场、声音对齐、
自然结尾和最终停留。
针对每个缺陷，报告时间戳、可见或可听证据、
对观众的影响，以及具体的建议修复方案。
按照相同要点比较上一版和当前导出版本。
不要仅凭镜头缩略图表或渲染成功就判定通过。

宣布视频完成之前，先确认：

• 第一帧、所有转场和最后一帧都渲染正确。
• 文字在目标尺寸下清晰可读，并留出足够的阅读时间。
• 音频从头到尾正常，音效和动作对齐，结尾没有突兀的截断。
• 文件能正常打开、拖动进度条，并顺利播到结尾。
• 分辨率、宽高比、帧率和时长都符合制作需求。
• 附上可编辑源文件和所需素材，并完整保留制作署名和使用范围说明。

建立可复用的参考资料库

好用的资料库不能只存好看的缩略图。要记下原作者和链接、收藏的原因、动效类型、目标受众或使用场景、素材要求、分析笔记和当前状态。

状态可以简单分成：创意 → 已分析 → 制作中 → 已完成。刚加入创意时，只填名称、链接和收藏原因三项就够了；等它和真实项目挂上钩，再补更多信息。表格适合做比较，画廊适合浏览画面，状态看板则能看出哪些参考已经可以用了。

常见问题

想做得精致，就一定要用 3D 吗？

不一定。这些项目里，排版、卡片和产品排列通常用二维工具就能完成。只有当透视或空间运动是表达的核心时，再用 3D。只有画面确实需要时，才增加渲染的复杂度。

最终作品是动的，为什么还要先审静帧？

静帧能很低成本地暴露层级错误、素材不统一、文案难读和构图薄弱的问题。但静帧不能代替动效评审。先确认视觉系统，再配上声音测试最难的动效片段。

视频感觉太静怎么办？

先找出节奏在哪里掉下去了。可能是某段停留太长、缓动老是重复、配乐缺少变化，或者某个镜头没有增加任何信息。需要阅读的停顿要保留。到处加动作，反而会让视频更难看懂。

你的第一个练习项目

选一个产品和一个核心信息。从合适的类型里挑一个参考，拆解它的节拍，再围绕一个标志性动作写原创制作需求。选好声音，准备有代表性的静帧，确认最难的片段，然后渲染并检查完整导出的视频。

当信息、画面、声音和交付结果都达到制作需求的要求时，就可以收工了。把源文件和评审笔记放在一起：下次修改时，会比从另一个含糊的提示词重新开始容易得多。