用 Codex + HyperFrames，把角色设定表做成 15 秒动漫 PV：从分镜到成片的完整实战

lrt369805210

198人浏览 · 2026-08-26 22:14:34

lrt369805210 · 2026-08-26 22:14:34 发布

摘要：角色设定表做好后，怎样把它变成一支真正能看的动漫 PV？本文用原创角色林澈，完整复盘 15 秒竖屏成片的分镜、动效、音效、转场排错和验收流程，并附可复制提示词。

关键词：Codex、HyperFrames、动漫PV、AI动画、角色设定、AIGC

上一篇文章里，我用原创角色“林澈”做了一整套角色资产：三视图、表情、动作、服装细节和场景测试。

设定表完成以后，一个更现实的问题来了：这些图怎么继续往下用？

如果只是把正面、侧面、动作图依次放进剪辑软件，加几个推拉和淡入淡出，当然也能导出视频。但这种做法很容易变成“会动的设定表”，人物出现了，故事却没有发生。

所以这一次，我没有从特效开始，而是先给 15 秒写了一条完整的因果链：城市断联，异常信号出现；系统确认角色身份；林澈从设定状态进入行动；最后在雨夜节点接通任务。

最终做出的是一支 1080×1920、30fps、总长 15 秒的竖屏角色先导 PV。

![](https://i-blog.csdnimg.cn/direct/6bf2548b0323426aadd5a2f682cb46b5.png)
在这里插入图片描述](https://i-blog.csdnimg.cn/direct/bc48605afb21428989b8642e057a154b.png)

先把边界讲清楚：**这不是逐帧作画的传统动画，也不是输入一句话后自动生成的整段视频。**它更接近一支动漫概念 PV：角色图由前期角色资产提供，Codex负责整理素材、写页面和时间线、执行检查与渲染，HyperFrames负责把 HTML、GSAP 动画、音频和时间轴组织成视频。分镜取舍、节奏和最后是否能发，仍然需要人来判断。

一、成片先看：15 秒里发生了什么

故事钩子只有一句：

城市断联后的第七分钟，她收到了来自未来的求救。

这句话同时解决了三个问题：世界发生了什么、信号为什么异常、观众为什么要继续看。角色的职业、装备和最终行动，都可以围绕它展开。

15 秒被拆成四段：

时间	段落	这一段必须完成的任务
0—2.5s	异常信号	建立世界危机，抛出“未来七分钟”的钩子
2.5—5.58s	身份识别	让观众记住林澈、职业和三个稳定识别点
5.58—10.92s	转面与行动	把三视图和动作表从制作资料变成节奏证据
10.92—15s	任务启动	进入雨夜检修场景，兑现前面的故事承诺

00-林澈-断点信使-15秒PV

这张时间线比“先做几个好看的镜头”更重要。15 秒太短，一个镜头如果既不能推进故事，也不能建立角色，就应该删掉。

二、角色设定表为什么不能直接变成 PV

角色设定表的任务是回答“这个人长什么样”。PV 还要回答另外三个问题：

她现在遇到了什么；
她为什么必须行动；
观众应该在什么时候获得哪条信息。

两者使用的是同一批素材，组织方式却完全不同。

设定表适合并排比较，方便核对正面、侧面、背面和装备。视频需要控制信息出现的顺序：先让观众看到异常，再给角色名字；先确认身份，再展示动作；最后才进入故事场景。

如果一开场就把三视图、动作表、角色编号全部铺满，信息虽然多，观众却不知道先看哪里。短视频的关键不是把素材塞完，而是决定哪些信息暂时不出现。

这也是我这次最明显的调整：三视图没有从头展示到尾，只占约 2 秒；动作表先给完整横条建立上下文，再用视窗按节拍切换四个动作；真正的故事场景则留到最后四秒。

三、Codex、图像素材和 HyperFrames 分别做什么

这个流程里最容易被写错的一句话是：“Codex帮我生成了一支动漫。”

实际分工更具体：

环节	主要职责	不负责什么
图像素材	提供已经确认的角色锚点、三视图、动作表、细节图和雨夜场景	不决定视频节奏，也不保证每次生成都一致
Codex	阅读素材和设计规范，整理工程，编写 HTML/CSS/GSAP，运行检查、渲染和关键帧复核	不替人决定故事是否成立，也不是逐帧动画师
HyperFrames	把页面、动效、音频和时间数据组织成可预览、可检查、可渲染的视频合成	不会自动把静态角色变成骨骼动画
人	选择故事钩子、镜头顺序、审美方向、可接受偏差和发布标准	不能只看最终一帧就宣布整条视频通过

这种分工看起来没有“一键生成”那么刺激，但更接近真实制作。尤其是需要修改时，你能知道应该改素材、改分镜、改时间线，还是改验收标准。

四、先整理素材，再初始化视频工程

这次没有把所有图片直接丢进一个目录。输入素材按用途分成几类：

source/
├── character-anchor.png      # 角色3/4锚点
├── turnaround-front.png     # 正面
├── turnaround-side.png      # 侧面
├── turnaround-back.png      # 背面
├── action-sheet.png         # 四个动作
├── detail-sheet.png         # 通信器、肩部、工具包细节
└── rainy-node-scene.png     # 雨夜检修场景

同时先锁定一份设计规范：

画布：1080 × 1920
帧率：30fps
时长：15s
安全区：左右72px，上120px，下180px

石墨黑：#111719
深绿：#0B5B4C
薄荷信号：#62E0B4
信号橙：#FF8A24
冷白：#F4F7F5

颜色也不是随便选的。橙色只表示异常、警报和任务触发；薄荷色表示识别通过、通道建立。这样即使不看文字，颜色变化也能帮助观众理解状态。

工程里的每个场景都是全屏片段，并带有明确的开始时间和持续时间：

<div id="root"
     data-composition-id="main"
     data-start="0"
     data-duration="15"
     data-width="1080"
     data-height="1920">

  <section id="scene-signal"
           class="clip scene"
           data-start="0"
           data-duration="2.6">
    <!-- 异常信号 -->
  </section>

  <section id="scene-identity"
           class="clip scene"
           data-start="2.5"
           data-duration="3.2">
    <!-- 身份识别 -->
  </section>
</div>

这里有意保留了少量时间重叠。上一场还没有完全结束，下一场已经进入，转场才能同时覆盖两边，而不是先退成一张空白页再开始下一幕。

五、动画不要平均分配，先给每一段一个“主动作”

很多短视频看起来不够利落，不是动画数量少，而是所有元素都用同一种淡入、同一种速度、同一种缓动。

这支 PV 给四段安排了不同的主动作：

异常信号：扫描线、节点圆环和波形建立不稳定感；
身份识别：角色从斜切色块中锁定，装备细节按顺序出现；
转面与行动：三个平面交错进入，动作视窗按节拍横移；
任务启动：雨幕斜切，节点从橙色故障切换为薄荷确认。

时间线使用绝对时间，不靠多个互相嵌套的延迟猜节奏：

const tl = gsap.timeline({ paused: true });

tl.from("#scene-signal .s1-title", {
  opacity: 0,
  y: 54,
  duration: 0.58,
  ease: "expo.out"
}, 0.76);

tl.from("#scene-identity .s2-character", {
  opacity: 0,
  x: -110,
  scale: 1.06,
  duration: 0.76,
  ease: "power4.out"
}, 2.46);

tl.from("#s3-action-safe", {
  y: 1920,
  duration: 0.58,
  ease: "expo.inOut"
}, 7.48);

tl.to("#scene-mission .mission-node", {
  color: "#62e0b4",
  borderColor: "#62e0b4",
  duration: 0.22
}, 11.78);

写成这种形式有一个直接好处：当你发现第 8.4 秒动作切换太迟，可以直接修改这个时间点，不用顺着五层时间线计算前面每个动画的累计时长。

还有一个容易忽略的细节：能用 transform 和 opacity 完成的动画，就不要频繁改布局属性。视频预览里的掉帧，很多时候并不是电脑性能不够，而是动画每一帧都在触发布局和重绘。

六、静态角色怎么做出“进入行动”的感觉

这支 PV 没有假装静态图片已经变成完整人物动画。动作段采用的是一种更适合设定资产的处理方法：

先给完整动作表，让观众知道后面四个姿势来自同一组设定；
再建立一个固定尺寸的竖向视窗；
把四个动作按等宽位置排在横向轨道上；
每次只平移一个动作宽度，同时更新动作编号；
用橙色和薄荷色边线、速度拖影和音效增强切换感。

核心代码并不复杂：

tl.to("#action-sheet-rail", {
  x: -680,
  duration: 0.34,
  ease: "power4.inOut"
}, 8.44);

tl.to("#action-sheet-rail", {
  x: -1360,
  duration: 0.34,
  ease: "power4.inOut"
}, 9.10);

tl.to("#action-sheet-rail", {
  x: -2040,
  duration: 0.34,
  ease: "power4.inOut"
}, 9.78);

这种做法适合角色预告、世界观先导、作品集展示和正式制作前的动态预演。它不适合替代对话口型、连续打斗、复杂表演或需要严格空间连续性的正片动画。选对使用范围，比在标题里把它包装成“AI一键做番剧”更重要。

七、声音怎么处理：没有配音，也不能让画面裸奔

这版成片使用了原创的低频电子氛围、脉冲、故障、扫描和确认音，没有从外部下载一首音乐直接铺满 15 秒。

声音按画面事件落点：

1 秒内建立异常信号；
2.5—5 秒给身份锁定和细节确认音；
6.1、7.0、8.0、9.1 秒附近形成动作切换节拍；
11.8 秒进入雨夜；
13 秒给任务确认的低频冲击。

原本还准备了四句旁白：

城市断联后的第七分钟，我收到了，来自未来的求救。
目标坐标，节点零四七。
身份确认。林澈，节点维护员。
通道已建立。任务，启动。

但本机的 VoxCPM 服务当时不可用，所以最终预览版没有擅自换用其他外部 TTS。这个处理反而说明了一件事：旁白是一个可以独立替换的轨道，不应该因为 TTS 暂时不可用就阻断整个视频。

先把画面、节奏和音效做到无配音也能看懂；后续补真人或固定音色时，只需要围绕已经锁定的脚本调整局部停顿。

八、真实踩坑：0.2 秒的空白页，足以让整条视频显得廉价

第一轮导出以后，在 2.35 秒和 5.5 秒附近各出现了一次短暂空白。

单看每个场景都没有问题，按时间截帧才发现：下一场的纯色背景提前进入，但角色和文字的入口动画还没开始；转场遮罩又没有完整盖住这个间隙，于是画面闪出一张几乎空白的页面。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

修复分两步：

把场景起点延后到转场真正覆盖的时刻，让上一场退出、转场和下一场入口发生在同一个重叠区间；
给转场本身加入“SIGNAL FOUND”“CHARACTER TURN / 03”等可读信号，避免转场只是一块没有信息的纯色遮罩。

另一个问题出现在首帧：右下角的 PV 标签最初落在白底区域，文字对比不足。最终改成深色实底加薄荷描边。抖音横版封面也出现过标题末字孤行，后来通过调整文本宽度、字号和不换行规则解决。

这些问题在编辑页面里很容易被忽略，因为你知道下一幕会发生什么，眼睛会自动补全。真正验收时，应该按固定时间抽帧，而不是从头播放两遍、凭感觉说“差不多”。

九、我最后怎样验收这支 15 秒 PV

最终版不是“能导出”就结束，而是过了下面这组检查：

文件层

分辨率：1080×1920；
帧率：30fps；
时长：15 秒，共 450 帧；
编码：H.264 High；
音频：AAC，48kHz 双声道；
文件约 10MB，完整解码通过。

画面层

首帧不是黑屏或加载页；
四个场景入口、发展、停留和退出阶段均抽帧检查；
字体正确加载，没有被默认字体替换；
文字没有越过安全区，没有遮住人物面部、手部和关键设备；
36 项文字对比度检查全部通过；
第一轮发现的两处空白转场在第二轮不再出现。

动效层

HyperFrames工程检查为 0 错误、0 警告；
动态元素没有造成画面边界外的异常溢出；
雨线、波形和脉冲都有明确次数，不做无限循环；
转场覆盖前后两个场景，不留下纯色空档；
音效落点和动作切换在同一时间线上。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

两轮视觉检查以后就停止继续主观打磨。因为“再改一点”没有结束，只有事先写清楚的验收标准才有结束。

十、把这套流程复制到自己的角色上

如果你已经有一套角色设定图，可以按下面的顺序做：

1. 先选视频类型

角色介绍、世界观钩子、剧情先导和动作展示需要的素材不同。15 秒只选一个主目标，不要既讲世界观又塞完整履历。

2. 盘点可用资产

至少确认一张角色锚点、一组三视图或动作、一张能兑现故事的场景图。缺哪一项就先补哪一项，不要用模糊截图硬撑满画面。

3. 写一句剧情钩子

它要能直接决定开头和结尾。这次的钩子是“收到来自未来七分钟的求救”，所以开头必须是异常信号，结尾必须是任务接通。

4. 拆成四段时间线

给每一段写“必须完成的任务”，再分配素材和时长。只写“这里放角色图”还不够。

5. 为每段选择一个主动作

扫描、锁定、横移、斜切、推进都可以，但不要让所有场景都使用同一种淡入淡出。

6. 先做无配音也能看懂的版本

旁白可以增强信息，不能替画面解释全部逻辑。先用画面、标题和音效跑通，再补音色。

7. 按时间点抽帧验收

至少检查 0 秒、每个场景入口、转场中点、动作切换点和最后一帧。整段播放只适合看节奏，不能代替逐项检查。

十一、一段可以直接交给 Codex 的任务说明

下面这段不是万能 Prompt，但它能让任务从一开始就有明确交付物和停止条件：

我要把一套原创动漫角色设定素材制作成15秒、1080×1920、30fps的竖屏概念PV。

请先读取素材目录，不要立刻写动画。先输出：
1. 素材清单与缺失项；
2. 一句剧情钩子和四段时间线；
3. 每段的叙事任务、使用素材、主动作、转场和音效落点；
4. 画面安全区、颜色语义和字体规范；
5. 验收时间点与停止条件。

确认计划后，再使用HyperFrames组织HTML/CSS/GSAP时间线。

制作约束：
- 不把角色设定表当成图片轮播；
- 不伪装成逐帧人物动画；
- 不让图像模型直接生成中文标题；
- 每个场景必须有明确开始时间和持续时间；
- 转场要覆盖上一场退出和下一场入口；
- 优先使用transform和opacity做高频动画；
- 首帧、转场中点、场景入口和最后一帧必须抽帧检查；
- 没有依据的素材、配音服务或授权信息不要编造。

最终交付：
- 可继续编辑的HyperFrames工程；
- 15秒H.264 MP4；
- 首帧海报；
- 一张关键帧总览；
- 检查结果和仍需人工判断的问题。

如果素材规模更大，可以先让 Codex 生成 STORYBOARD.md、VISUAL_PLAN.json 和 DESIGN.md，确认后再进入编码。这样返工发生在文字阶段，不会等渲染完成才发现故事方向错了。