我用 Codex + Remotion 制作唐朝纸片分层动画的完整教程

✍ 季白羽🕐 2026-07-13📦 10.4 KB 🟢 已读 𝕏 文章列表

本教程详解如何利用 Codex、Remotion、Imagegen 和 F5-TTS 构建本地视频流水线，制作具有纵深感的“纸片分层动画”。文章从确定镜头、素材分层、Remotion 动画编排到音频合成进行了全流程拆解，核心在于将背景、主角、配角拆分为独立素材，并通过代码精准控制层级与运动。

Remotion AIGC 视频制作动画教程 Codex TTS 工作流 FFmpeg

# 我用 Codex + Remotion，做了一条唐朝纸片分层动画 **作者**: 季白羽 **日期**: 2026-07-13T04:53:51.000Z **来源**: [https://x.com/vbjby3/status/2076530524110369070](https://x.com/vbjby3/status/2076530524110369070) --- ![Image](/doc/2972/image/img_cb36725600f4.jpg) 我真的调整了好几天才做出来。其实整体做个30秒视频是没问题的，大家可以自己有时间的去测试一下。很多人做“纸片风视频”，只是把一张完整图片放大、缩小，再加一点镜头移动。这样能动，但没有层次。真正的纸片分层动画，核心不是生成一张漂亮的图，而是把背景、建筑、主角、配角和前景分别做成独立素材，再让每一层按照不同节奏运动。这篇教程以我做的唐朝视频为例，把完整操作流程拆开讲清楚。 ![Image](/doc/2972/image/img_df8327dbf7e0.jpg) # 零、这条视频用了哪些工具这不是靠一个软件完成的，而是一条本地视频流水线。实际使用的工具如下： ## 1. Codex：整个流程的操作员 Codex 不直接替代绘图、配音和渲染模型，它负责把这些工具串起来： ``` 文案 → 分镜 → 素材清单 → 生成图片 → 抠图拆层 → 编写 Remotion 动画 → 生成配音 → 加字幕音效 → 渲染 MP4 ``` 在这个项目里，Codex 主要修改： ``` src/ReplicaChapterScene.tsx 人物坐标、大小、层级和动画 src/MainVideo.tsx 配音、背景音乐、音效和字幕 src/script.json 文案、镜头和时长 public/assets/ 图片素材 public/audio/ 旁白、音乐和音效 ``` ## 2. Imagegen：负责生成图片 Imagegen 用来生成背景底板和独立人物。生成时使用纯绿色背景，再通过本地脚本转成透明 PNG。不要让绘图模型直接生成整段动画，它只负责提供可控的独立图层。 ## 3. F5-TTS：负责克隆旁白本机使用 F5-TTS 做零样本声音克隆。它需要一段参考音频和对应文字，然后生成新的中文旁白： ``` { "ref_file": "参考音频.wav", "ref_text": "参考音频对应的文字", "full_text": "需要合成的唐朝口播文案", "full_out": "public/audio/tang-wide.wav" } ``` 参考音频必须干净、单人说话、没有音乐。生成以后再根据需要用 FFmpeg 调整到目标语速。 ## 4. Remotion：负责让所有图层动起来 Remotion 是真正的视频制作引擎。人物的大小、位置、进入时间、前后遮挡、字幕和音效全部由 React 代码控制。它最大的优势是可以逐帧修改，也能把同一套模板批量用于其他历史题材。 ## 5. FFmpeg：负责检查和验收 FFmpeg 不负责主体动画，但负责最后的技术检查： ``` # 查看视频分辨率、时长和音轨 ffprobe -v error -show_streams -show_format out/final.mp4 # 抽取第 5 秒画面检查排版 ffmpeg -ss 5 -i out/final.mp4 -frames:v 1 check-05.png ``` # 一、用 Codex 先确定镜头，不要直接开始画图这条测试片只用了两个核心镜头： 1. 全景镜头：皇帝是最大主体，左右侍女第二，右侧群臣最小，用来交代“盛唐长安”的规模。 2. 特写镜头：中央捧礼盒的人最大，前排跪拜人物第二，后排侍从最小，用来表现“万邦来朝”。 ![Image](/doc/2972/image/img_8826d0dd45b0.jpg) 先定镜头的原因很简单：同一个人物在全景和特写里的大小、位置、朝向都不同。如果先随便生成素材，后面很容易出现人物比例错误、视线方向相反、主次不清的问题。 # 二、用 Codex 把画面拆成四层每个镜头至少拆成下面四层：重点是：人物必须是独立 PNG，不能全部画在同一张图里。 ![Image](/doc/2972/image/img_6b21dc3e9015.jpg) # 三、用 Imagegen 生成没有人物的背景底板背景底板只保留环境： - 红色宣纸底纹 - 水墨山脉 - 长安宫殿和城楼 - 撕纸边缘 - 网点、胶带和印章装饰不要把主要人物画进背景。人物一旦和背景粘在一起，后面就不能独立飞入、摇摆或调整大小。这条视频使用两张背景底板： ``` public/assets/plates/01-tang-wide-bg.png public/assets/plates/02-tang-close-bg.png ``` 全景底板偏米白，方便突出金色皇帝；特写底板使用大面积深红，方便突出中央礼盒人物。 # 四、用 Imagegen 生成角色，再用 Python 抠图拆层生成角色时，不要只写“画一个唐朝人物”。提示词必须同时限制： - 唐代服饰和发冠 - 古籍线描与手工拼贴质感 - 正面或明确的左右朝向 - 完整人物，不裁掉头、手和脚 - 白色剪纸描边 - 纯色背景，方便抠图 - 不要文字、不要水印、不要复杂场景示例提示词： ``` 生成一名唐代皇帝全身人物，坐在雕花龙椅上，身体朝右，右手抬起。中国古籍线描与复古纸片拼贴风，金色龙袍，人物完整，白色剪纸描边。纯绿色背景，不要宫殿，不要其他人物，不要文字，不要阴影。 ``` 人物组最好先生成一张素材表，再拆成多个透明 PNG。项目里的拆分命令是： ``` python scripts/split_sheet.py \ public/assets/tang-10s/source/close-six-alpha.png \ public/assets/tang-10s/layers \ close 6 ``` 拆完以后，每个人物都能单独控制位置和动画。 # 五、在 Remotion 里先排版，再写动画不要一拿到素材就加动画。先把所有人物静止摆好，检查三个问题： 1. 主角是不是最大、最醒目？ 2. 配角有没有挡住主角的脸、手和关键道具？ 3. 人物脚底是不是落在同一个合理地面上？全景镜头的实际层级是： ``` 皇帝：宽 650，主角层左右侍女：宽 235～245，次要层右侧群臣：宽 158～170，后排层 ``` 特写镜头的实际层级是： ``` 中央礼盒人物：宽 575，主角层前排跪拜人物：宽 285～330，次要层后排侍从：宽 165～180，陪衬层 ``` 这一步决定了画面是否自然。人物不是平均分布，也不是全部一样大，而是按照叙事重要性安排大小。 # 六、用 Remotion 给每类图层设置不同动画我把人物分成三种角色：primary、secondary、tertiary。 ``` const roleMotion = { primary: {distance: 78, rise: 55, startScale: 0.86}, secondary: {distance: 58, rise: 38, startScale: 0.90}, tertiary: {distance: 38, rise: 22, startScale: 0.95}, }; ``` - 主角移动距离最大，带轻微缩放和落地感。 - 次要人物从左右两侧进入，幅度中等。 - 后排人物只做小幅移动，避免抢戏。 - 背景只做 1% 左右的慢速推镜。 - 所有人物入场后仍保留极轻微上下漂浮，避免画面完全静止。 ![Image](/doc/2972/image/img_377761714c70.jpg) 人物不要同时出现。实际使用 delay 错开入场： ``` {src: "emperor-1.png", delay: 4, role: "primary"} {src: "wide-left-1.png", delay: 18, role: "secondary"} {src: "wide-right-1.png", delay: 34, role: "tertiary"} ``` 这样画面会按照“主角先出现、配角补充、群像完成”的顺序建立，而不是一下子塞满。 # 七、用前后遮挡制造纵深纸片动画的立体感主要来自遮挡关系，不是复杂的三维效果。正确顺序是： ``` 背景底板后排人物中排人物主角前排人物字幕和装饰 ``` 每个图层都设置独立 zIndex。例如中央捧礼盒人物是 z: 5，前排跪拜人物是 z: 3～4，后排侍从是 z: 1～2。人物还加了统一的白色纸片描边和阴影： ``` filter: ` drop-shadow(4px 0 #f5eedc) drop-shadow(-4px 0 #f5eedc) drop-shadow(0 4px #f5eedc) drop-shadow(0 18px 9px rgba(20,15,12,.32)) ` ``` 白边负责“剪纸感”，深色阴影负责把人物从背景里抬起来。 # 八、用 F5-TTS 生成配音，再加入字幕、音乐和音效画面完成后，再按照配音长度切分镜头。这条视频的音频分为四层： 1. 旁白：每段单独一个 WAV，直接决定镜头时长。 2. 背景音乐：循环播放，音量保持在人声下方。 3. 章节音效：切换镜头时使用 impact 或 riser。 4. 人物入场音效：主角用 impact，次要人物用 whoosh，后排人物用较轻的 tick 或 pops。 ``` const sound = layer.role === "primary" ? "audio/sfx/impact.wav" : layer.role === "secondary" ? "audio/sfx/whoosh.wav" : "audio/sfx/tick.wav"; ``` 字幕只保留一层，固定在底部，逐句跟随旁白，避免重复字幕和画面文字互相打架。 # 九、用 Remotion Studio 预览，用 FFmpeg 抽帧验收先启动 Remotion 预览： ``` cd ~/Desktop/vox-videos/20260711-tang-collage-16x9 npm install npm run start ``` 重点检查： - 人物头、手、脚有没有被裁掉 - 朝向是否符合场景关系 - 主角和配角大小是否拉开 - 前后排有没有错误遮挡 - 人物进入时有没有同时出现 - 字幕是否挡住人物脚部和关键道具 - 音效是否和人物进入的帧对齐最后渲染 MP4： ``` npm run render ``` ![Image](/doc/2972/image/img_516487817a1d.jpg) # 十、整条工作流总结 ``` 确定文案和镜头 → Imagegen 做无人物背景底板 → Imagegen 生成角色素材表 → Python 抠图并拆成独立 PNG → Remotion 静态排版，确定人物主次 → Remotion 设置图层顺序和前后遮挡 → Remotion 按角色类型添加错峰动画 → F5-TTS 生成旁白并切镜头 → Remotion 加字幕、背景音乐和入场音效 → FFmpeg 抽帧检查 → Remotion 渲染 MP4 ``` 这套方法不只适合唐朝题材。历史人物、知识科普、商业故事、人物关系、城市发展，只要画面能拆成“背景、主角、配角、前景”，都能用同样的流程制作。真正让纸片动画变得有层次的，不是多生成几张图片，而是让每一张图片都承担明确的叙事位置。关注我，大家一起拆解AI新玩法呀。 ## 相关链接 - [季白羽](https://x.com/vbjby3) - [@vbjby3](https://x.com/vbjby3) - [14K](https://x.com/vbjby3/status/2076530524110369070/analytics) - [Upgrade to Premium](https://x.com/i/premium_sign_up) - [12:53 PM · Jul 13, 2026](https://x.com/vbjby3/status/2076530524110369070) - [14.7K Views](https://x.com/vbjby3/status/2076530524110369070/analytics) - [View quotes](https://x.com/vbjby3/status/2076530524110369070/quotes) --- *导出时间: 2026/7/13 22:44:33*

🔗 相关文档