视频生成这件事很多人第一反应是模型直接吐出 mp4 文件。但真去拆解 Claude Opus 5.5 这类模型做视频的过程你会发现它压根不碰视频编码——它干的是写代码用 JavaScript 加 Canvas 把每一帧画出来再交给 FFmpeg 合成。我第一次看到这个链路的时候也愣了几秒原来所谓AI 做视频本质是AI 写了一个逐帧渲染程序。这篇就把这条链路从头到尾拆开讲清楚包括 Canvas 逐帧绘制、GSAP 做时间轴、FFmpeg 合成与编码参数、以及实际跑起来会踩的那些坑。不管你是前端、做自动化内容还是单纯好奇模型怎么画出视频看完都能自己复现一套。1. 先搞清楚模型输出的不是视频是渲染脚本1.1 为什么是写代码而不是生成像素要理解 Claude Opus 5.5 做视频的方式得先接受一个前提当前这类模型最擅长、最稳定的输出形式是结构化文本也就是代码。让它直接生成视频像素序列等于让它在一个它并不擅长的模态里做高维连续预测结果往往是模糊、抖动、时长不可控。而让它写一段 JavaScript用 Canvas 的 2D API 把画面一帧一帧画出来它就能把创意翻译成可执行的确定性指令。这个思路的妙处在于可控性。视频本质是时间 × 画面的函数而代码天生就是描述函数的工具。你告诉模型做一个 10 秒、60fps、带缓动动画的标题卡它写出来的是一段循环第 n 帧对应时间 t n/60根据 t 计算元素位置、透明度、缩放然后ctx.fillRect/ctx.fillText画上去。整个过程没有任何猜测像素的成分全是确定性的数学计算。我实测下来这种方式的画面清晰度、文字锐利度远超直接生成像素的方案。因为文字是fillText画的矢量级清晰图形是路径绘制的边缘干净。代价是模型得会写动画代码而这恰好是它训练数据里海量的东西。1.2 整条链路的分工把链路拆开大致是这么几段每一段职责非常清晰阶段负责方产出物关键点创意理解Claude Opus 5.5分镜描述、时间轴规划把自然语言需求转成结构化脚本渲染脚本生成Claude Opus 5.5JavaScript Canvas 代码逐帧绘制逻辑、缓动函数逐帧渲染Node.js CanvasPNG 序列帧每帧一张图命名有序视频合成FFmpegMP4 文件帧率、编码器、像素格式音频/字幕可选FFmpeg带音轨的成片混流、字幕烧录注意这里有个关键认知Canvas 负责画FFmpeg 负责合。两者职责绝不重叠。Canvas 不关心视频编码FFmpeg 不关心画面内容。中间用PNG 序列帧这个通用格式做交接简单粗暴但极其可靠。1.3 为什么不用浏览器录屏有人会问既然 Canvas 能在浏览器里跑为什么不直接录屏我试过问题一堆。录屏受实时性影响帧率不稳掉帧是常态分辨率受窗口限制而且录屏本质是实时捕获一旦渲染卡顿画面就跟着卡。而离线逐帧渲染是想画多久画多久第 100 帧和第 1 帧耗时一样输出绝对稳定。这就是为什么专业管线都走序列帧 合成这条路而不是录屏。2. Canvas 逐帧绘制把动画拆成第 n 帧画什么2.1 帧循环的基本骨架Canvas 做视频的核心是把动画重写成给定时间 t画出这一帧。浏览器里我们习惯requestAnimationFrame驱动但离线渲染不需要它——我们直接用一个 for 循环遍历所有帧const { createCanvas } require(canvas); const fs require(fs); const W 1920, H 1080; const FPS 60; const DURATION 10; // 秒 const TOTAL FPS * DURATION; const canvas createCanvas(W, H); const ctx canvas.getContext(2d); for (let frame 0; frame TOTAL; frame) { const t frame / FPS; // 当前时间单位秒 ctx.clearRect(0, 0, W, H); drawScene(ctx, t); // 根据时间画这一帧 const buffer canvas.toBuffer(image/png); fs.writeFileSync(frames/frame_${String(frame).padStart(5, 0)}.png, buffer); }这段代码是整个管线的地基。几个细节必须注意帧文件名用padStart(5, 0)补零因为 FFmpeg 按字典序读序列帧frame_1.png会排在frame_10.png后面补零后frame_00001.png才是正确顺序。这个坑我踩过合成出来的视频帧序全乱排查了半天。2.2 用时间 t 驱动一切动画drawScene(ctx, t)是整个渲染的灵魂。所有动画效果本质都是某个属性随时间 t 变化。比如一个标题从下方滑入function drawScene(ctx, t) { // 0~1 秒内完成入场 const progress Math.min(t / 1, 1); const eased easeOutCubic(progress); const y H * 0.5 (1 - eased) * 200; // 从下方 200px 滑到中心 ctx.fillStyle #ffffff; ctx.font bold 96px sans-serif; ctx.textAlign center; ctx.fillText(Claude Opus 5.5, W / 2, y); } function easeOutCubic(x) { return 1 - Math.pow(1 - x, 3); }这里的关键是缓动函数。线性运动看起来机械、廉价而easeOutCubic让动画快进慢出观感立刻高级。模型生成脚本时往往会自动挑选合适的缓动曲线这也是它懂设计的体现。你可以把缓动理解成给时间做非线性映射——输入是线性进度输出是带加速度的进度。2.3 多元素编排与图层顺序真实视频不会只有一个元素。标题、副标题、背景、装饰图形它们各有各的入场时间和动画。Canvas 是后画的盖住先画的所以绘制顺序就是图层顺序function drawScene(ctx, t) { drawBackground(ctx, t); // 最底层 drawDecorations(ctx, t); drawTitle(ctx, t); // 最上层 drawSubtitle(ctx, t); }每个drawXxx内部各自根据 t 计算自己的状态。这种分函数、按层画的结构让模型生成的代码可读性高、也方便你手动微调。我个人的经验是永远先画背景最后画文字因为文字最需要清晰不能被任何东西遮挡。2.4 文字渲染的清晰度陷阱Canvas 画文字有个隐藏坑如果画布尺寸和最终视频尺寸不一致缩放会导致文字发虚。正确做法是画布尺寸直接等于输出分辨率1920×1080 就建 1920×1080 的画布绝不缩放。另外ctx.font里的字体名如果系统没有会静默回退到默认字体导致排版错位。稳妥的做法是显式加载字体文件或者用系统一定有的sans-serif。还有一点高分屏下有人喜欢用devicePixelRatio放大画布但离线渲染不需要这套——我们直接按目标分辨率建画布简单直接。3. GSAP 接管时间轴复杂动画的编排利器3.1 手写缓动 vs 时间轴库前面手写easeOutCubic适合简单场景但一旦元素多起来、动画有先后依赖、还要支持延迟 0.5 秒后开始、持续 2 秒、然后循环手写就会变成一团乱麻。这时候 GSAPGreenSock Animation Platform就派上用场了。它本来是给网页做交互动画的但因为它支持手动推进时间非常适合离线逐帧渲染。核心用法是不启动实时播放而是用gsap.timeline()建一条时间轴然后对每一帧调用timeline.seek(t)把时间轴拨到指定时刻再读取元素状态画到 Canvas 上。3.2 用 seek 驱动离线渲染const gsap require(gsap); const tl gsap.timeline({ paused: true }); const state { titleY: 800, titleAlpha: 0, barWidth: 0 }; tl.to(state, { titleY: 540, titleAlpha: 1, duration: 1, ease: power3.out }) .to(state, { barWidth: 600, duration: 0.8, ease: power2.inOut }, -0.3) .to(state, { titleAlpha: 0, duration: 0.5 }, 1); // 渲染循环里 for (let frame 0; frame TOTAL; frame) { const t frame / FPS; tl.seek(t); // 把时间轴拨到 t 秒 ctx.clearRect(0, 0, W, H); ctx.globalAlpha state.titleAlpha; ctx.fillText(标题, W / 2, state.titleY); ctx.globalAlpha 1; ctx.fillRect(100, 900, state.barWidth, 8); // ... 保存帧 }tl.seek(t)是精髓。它不依赖真实时间流逝你给多少它就跳到多少所以渲染速度完全由 CPU 决定跟视频时长无关。10 秒视频和 100 秒视频单帧渲染耗时一样。3.3 时间轴编排的几个实用技巧用 GSAP 编排时有几个参数特别值得记住-0.3表示比上一个动画提前 0.3 秒开始用来做重叠衔接避免动画之间生硬停顿。1表示上一个动画结束后再等 1 秒用来做留白。ease: power3.outGSAP 内置的缓动power系列比cubic更细腻out表示减速收尾。stagger多个元素依次入场时用stagger: 0.1让它们错开 0.1 秒比手动设延迟优雅得多。我个人的偏好是入场用power3.out出场用power2.in循环用sine.inOut。这套组合出来的节奏最舒服不会太急也不会太拖。3.4 GSAP 与 Canvas 的配合边界要注意GSAP 本身是操作 DOM 的但离线渲染里我们没有 DOM。所以用法是GSAP 只负责算数值Canvas 负责画。你让 GSAP 去 tween 一个普通 JS 对象比如上面的state然后自己读这个对象的属性去画。千万别指望 GSAP 直接操作 Canvas 元素——它不认识 Canvas 的绘制上下文。这个边界划清楚之后整个架构就很干净GSAP 是时间轴引擎Canvas 是渲染后端两者通过一个普通对象通信。4. FFmpeg 合成从序列帧到成片4.1 序列帧合成的基本命令帧都渲染完了接下来交给 FFmpeg。最基础的合成命令ffmpeg -framerate 60 -i frames/frame_%05d.png \ -c:v libx264 -pix_fmt yuv420p -crf 18 \ output.mp4逐项解释-framerate 60告诉 FFmpeg 输入序列帧的帧率是 60-i frames/frame_%05d.png是输入模式%05d匹配 5 位补零的数字-c:v libx264用 H.264 编码-pix_fmt yuv420p是兼容性最好的像素格式几乎所有播放器都认-crf 18是质量参数数值越小质量越高18 基本是视觉无损。注意-pix_fmt yuv420p这个参数千万别省。默认可能是yuv444p在部分播放器和社交平台上会黑屏或无法播放。我第一次导出没加这个本地能放传上去就黑屏查了好久。4.2 编码参数怎么选CRF 和编码速度是两个最常调的参数。下面这张表是我实测总结的常用组合场景CRFpreset说明草稿预览28ultrafast快画质够看常规发布20medium平衡之选高质量存档16slow慢但画质好纯色/文字动画18medium文字边缘锐利preset控制编码器花多少时间做压缩优化。ultrafast最快但文件大slow最慢但同画质文件更小。做文字动画时因为画面大面积纯色压缩效率本来就高用medium就够。4.3 加音轨与混流如果视频要配背景音乐用-i再喂一个音频文件然后-shortest让输出以较短的流为准ffmpeg -framerate 60 -i frames/frame_%05d.png \ -i bgm.mp3 \ -c:v libx264 -pix_fmt yuv420p -crf 18 \ -c:a aac -b:a 192k \ -shortest output.mp4-c:a aac是音频编码-b:a 192k是音频码率。-shortest很关键否则视频放完了音频还在或者反过来会得到一个时长错乱的成片。4.4 逐帧导出与信息查询调试阶段经常需要反向操作——把视频拆回帧看看某一帧到底长什么样# 查询视频信息 ffmpeg -i output.mp4 # 逐帧导出 ffmpeg -i output.mp4 frames_out/%05d.png # 只导出第 3 秒的那一帧 ffmpeg -ss 3 -i output.mp4 -frames:v 1 check.png-ss 3是定位到第 3 秒-frames:v 1表示只取一帧。这个技巧在排查某一帧画面异常时特别好用比一帧帧翻快得多。5. 实际跑起来会踩的那些坑5.1 帧序错乱补零不够前面提过序列帧命名必须补零。但补零位数也要够。如果你有 10 万帧以上约 28 分钟 60fps%05d就不够了得用%06d。判断标准很简单补零位数要大于总帧数的位数。总帧数 99999 以内用 5 位超过就用 6 位。这个错误很隐蔽因为 FFmpeg 不会报错只是默默按错误顺序合成。5.2 内存泄漏Canvas 复用问题在 Node.js 里用node-canvas时如果每帧都createCanvas新建画布内存会迅速飙升。正确做法是全局建一个画布每帧clearRect复用。我见过有人每帧新建渲染到几百帧就 OOM 崩了。复用画布不仅省内存还快因为省去了反复分配显存/内存的开销。5.3 字体缺失导致排版崩坏服务器上跑渲染经常遇到系统没装字体fillText画出来全是方块或者默认字体。解决方案有两个一是用registerFont显式注册字体文件二是把字体文件随项目一起打包。我推荐后者因为可移植性最好换台机器不用重新配环境。const { registerFont } require(canvas); registerFont(./fonts/NotoSansSC-Bold.otf, { family: NotoSansSC }); // 之后 ctx.font bold 96px NotoSansSC 就能用了5.4 渲染速度与并行单线程逐帧渲染1080p 复杂画面大概每秒能出 10~30 帧。10 秒视频 600 帧可能要跑半分钟到一分钟。如果嫌慢可以把帧区间切分开多个进程并行渲染最后统一交给 FFmpeg。切分时注意每个进程负责的帧号区间不要重叠文件名依然全局唯一。5.5 透明背景的处理如果想让视频有透明背景比如做叠加素材H.264 不支持透明通道得用支持 alpha 的编码比如 VP9 的 webm 或者 ProRes 4444。但兼容性会下降。我的建议是如果最终要叠在别的画面上导出带 alpha 的 webm如果要直接发布老老实实用不透明背景 H.264。6. 把这套链路用起来几个真实场景6.1 批量生成数据可视化短视频这套链路特别适合数据驱动的视频。比如每天把销售数据喂给脚本用 Canvas 画柱状图动画GSAP 做增长缓动FFmpeg 合成自动产出一条日报视频。因为画面是代码画的数据一变视频就变完全不用手动改。我帮朋友做过一个类似的跑通之后每天定时任务自动出片省了大量剪辑时间。6.2 文字动画与字幕卡纯文字的视频比如金句卡、知识卡片用这套方案效率极高。文字矢量清晰动画可控改文案就是改一个字符串。配合 GSAP 的stagger多个词依次浮现的效果几行代码就搞定。6.3 与模型协作的正确姿势回到 Claude Opus 5.5。用它做视频时最有效的提示方式是分两步先让它输出分镜脚本每个镜头几秒、画什么、什么动画确认后再让它把分镜翻译成 Canvas GSAP 代码。一步到位往往得到结构混乱的代码分两步则清晰可控。另外明确告诉它输出分辨率、帧率、时长它生成的代码会直接带上这些常量省得你手动改。6.4 一个容易忽略的细节时间基准FFmpeg 里有个概念叫time_base它决定了时间戳的精度。序列帧合成时-framerate会正确设置输入的时间基准一般不用手动干预。但如果你做的是变帧率或者帧时长不等的视频就得手动控制setpts滤镜了。常规场景下固定帧率 序列帧是最省心的组合别给自己找麻烦。7. 关于模型做视频这件事的一点个人看法拆完这条链路我最大的感受是所谓AI 生成视频很多时候不是模型在生成像素而是模型在生成生成像素的程序。这个区别很重要。前者是黑盒、不可控、难调试后者是白盒、可读、可改。Claude Opus 5.5 走的是后一条路用 JavaScript Canvas 把创意翻译成确定性代码再用 FFmpeg 做工业级的合成。这套方案的门槛其实不高核心就三件事会用 Canvas 画图、会用 GSAP 编排时间、会用 FFmpeg 合成。三样都是成熟工具文档齐全。真正难的是把创意拆成逐帧逻辑的思维方式——一旦你习惯了给定时间 t画出这一帧的思考方式做视频就和写普通程序没什么区别了。最后分享一个小技巧调试阶段先把帧率降到 10fps、分辨率降到 640×360快速跑通整条链路确认帧序、编码、音轨都没问题再切回 60fps 和 1080p 出正式片。这样能把渲染慢和逻辑错两类问题分开排查效率高很多。我早期就是直接上 1080p 60fps一个 bug 要等一分钟才能看到结果改起来极其痛苦。