1. 从写代码到做视频为什么这条路值得走用大模型写代码做视频这个方向我第一次接触的时候也觉得有点绕——视频不是应该用剪辑软件做吗但真正上手之后才发现这条路解决的是一个非常具体的痛点当你需要批量生成、参数化控制、或者把视频生成嵌入到自动化流程里时传统剪辑软件的手工操作就变成了瓶颈。Claude Opus 5.5 在这件事上的价值在于它对 Canvas 2D、WebGL、动画时序、缓动函数这些前端图形编程的理解已经到了你说人话它就能写出能跑的代码的程度。你不需要是图形学专家只要能把想要的视觉效果描述清楚它就能帮你把代码骨架搭出来剩下的就是调参和微调。这篇文章适合三类人看一是想用代码做视频但不知道从哪下手的前端开发者二是需要批量生成营销视频、数据可视化视频的运营或产品同学三是已经会用 AI 写代码但还没试过把它用在视频生成场景的同行。我会把 7 类技术路线拆开讲清楚各自的适用场景和坑再用 5 个实际案例展示从提示词到成片的完整链路最后给出一套可以直接复用的提示词框架。先说一个反直觉的结论用代码做视频最难的不是写代码而是想清楚哪些东西该用代码控制哪些东西该交给后期。我见过太多人一上来就想用 Canvas 画所有东西结果做到一半发现文字排版、音频同步、编码导出这些环节全是坑。正确的做法是先明确视频的可控维度再选择对应的技术路线。2. 七类技术路线的适用边界与选型逻辑2.1 Canvas 2D 逐帧绘制最直接但也最容易踩性能坑Canvas 2D 是最容易上手的路线。核心思路很简单用requestAnimationFrame驱动一个时间轴每一帧根据当前时间t计算出所有元素的位置、透明度、缩放然后重绘整个画面。Claude Opus 5.5 写这类代码非常熟练你只要告诉它我要一个圆形从左侧移动到右侧用时 2 秒带缓动它就能给你写出带easeInOutQuad的完整实现。但这里有个性能陷阱如果你每帧都调用clearRect然后重绘所有元素当元素数量超过 200 个时帧率会明显下降。我的经验是静态背景用离屏 Canvas 预渲染一次动态元素才逐帧绘制。另外ctx.save()和ctx.restore()的配对使用一定要严格否则变换矩阵会累积画面会莫名其妙地偏移。// 典型的逐帧绘制骨架 const duration 3000; // 毫秒 let startTime null; function render(timestamp) { if (!startTime) startTime timestamp; const elapsed timestamp - startTime; const progress Math.min(elapsed / duration, 1); const eased easeInOutQuad(progress); ctx.clearRect(0, 0, width, height); drawBackground(); // 静态部分 drawMovingCircle(eased); // 动态部分 if (progress 1) requestAnimationFrame(render); } function easeInOutQuad(t) { return t 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t 2, 2) / 2; }这段代码里easeInOutQuad是缓动函数决定了动画的手感。线性运动看起来很机械加了缓动之后就有加速再减速的自然感。Claude 对这类函数的理解很到位你可以直接说我要一个先快后慢的缓动它会给你easeOutQuad或easeOutCubic。2.2 WebGL 着色器路线适合粒子、流体、光效类视觉当你要做的是粒子系统、流体模拟、光线追踪这类效果时Canvas 2D 就不够用了必须上 WebGL。这条路线的核心是片元着色器——你写一段 GLSL 代码GPU 会对每个像素并行执行它算出这个像素的颜色。Claude Opus 5.5 写 GLSL 的能力让我挺意外的。你描述我要一个从中心向外扩散的波纹效果颜色从青色渐变到紫色它能直接给你写出带smoothstep和mix的片元着色器。但要注意GLSL 的调试非常痛苦因为报错信息往往只有编译失败四个字不告诉你哪一行错了。我的做法是先用最简单的着色器跑通再逐步加复杂度每加一步就验证一次。// 片元着色器中心扩散波纹 precision mediump float; uniform float u_time; uniform vec2 u_resolution; varying vec2 v_uv; void main() { vec2 uv v_uv; float dist distance(uv, vec2(0.5)); float wave sin(dist * 20.0 - u_time * 3.0) * 0.5 0.5; float fade smoothstep(0.5, 0.0, dist); vec3 color mix(vec3(0.0, 0.8, 0.8), vec3(0.6, 0.2, 0.9), wave); gl_FragColor vec4(color * fade, 1.0); }这里u_time是每帧更新的时间 uniformv_uv是插值后的纹理坐标。smoothstep用来做边缘淡出避免波纹在边界处突然截断。这套代码在 1080p 下跑 60 帧毫无压力因为 GPU 并行计算的能力远超 CPU。2.3 SVG CSS 动画适合图表、文字排版类视频如果你的视频主要是数据图表、文字动画、图标变换这类矢量风格的内容SVG CSS 动画其实是效率最高的路线。原因是 SVG 的路径、文字、渐变都是声明式的你改一个属性就能改变视觉效果不需要像 Canvas 那样手动重绘。Claude 在这条路线上的优势是它能直接生成结构清晰的 SVG 代码并且知道stroke-dasharray和stroke-dashoffset配合可以做出线条逐渐画出的效果。这个技巧在做流程图、时间线动画时特别有用。svg viewBox0 0 400 100 path dM10,50 L390,50 stroke#333 stroke-width2 stroke-dasharray380 stroke-dashoffset380 animate attributeNamestroke-dashoffset from380 to0 dur2s fillfreeze/ /path /svgstroke-dasharray设为路径总长度stroke-dashoffset从总长度变到 0视觉上就是线条从左到右逐渐画出来。这个技巧我用了很多次做数据增长动画、流程演示都很稳。2.4 纯 JavaScript 时序控制把动画逻辑和渲染解耦不管用哪种渲染方式时序控制层都是独立的。我的做法是写一个简单的Timeline类管理所有动画片段的开始时间、持续时间和缓动函数。这样渲染层只需要问当前时间 t 下这个元素的属性是什么不需要关心动画逻辑。class Timeline { constructor() { this.tracks []; } add({ start, duration, from, to, ease t t, onUpdate }) { this.tracks.push({ start, duration, from, to, ease, onUpdate }); } seek(time) { for (const track of this.tracks) { const local (time - track.start) / track.duration; if (local 0 || local 1) continue; const eased track.ease(Math.min(Math.max(local, 0), 1)); const value track.from (track.to - track.from) * eased; track.onUpdate(value); } } }这个类只有 20 行但它是整个视频生成系统的骨架。你可以往里面加任意多条轨道每条轨道控制一个属性。Claude 写这种工具类代码几乎不会出错你只要把接口描述清楚就行。2.5 音频驱动动画用 Web Audio API 做可视化做音乐可视化视频时需要从音频里提取频谱数据来驱动画面。Web Audio API 的AnalyserNode可以实时给出频率数据但在离线渲染场景下你需要用OfflineAudioContext预先分析整段音频把每帧的频谱数据存成数组渲染时直接查表。async function analyzeAudio(buffer) { const offlineCtx new OfflineAudioContext(1, buffer.length, buffer.sampleRate); const source offlineCtx.createBufferSource(); source.buffer buffer; const analyser offlineCtx.createAnalyser(); analyser.fftSize 256; source.connect(analyser); analyser.connect(offlineCtx.destination); source.start(); const frames []; const data new Uint8Array(analyser.frequencyBinCount); // 按帧采样每帧取一次频谱 for (let t 0; t buffer.duration; t 1/30) { analyser.getByteFrequencyData(data); frames.push([...data]); } return frames; }这里fftSize决定了频率分辨率256 对应 128 个频段。帧率我用的 30fps和视频输出帧率保持一致。这个方案的好处是渲染时不需要实时分析音频性能稳定。2.6 离屏渲染 编码导出把 Canvas 变成 MP4前面五条路线都是在浏览器里播放动画但你要的是视频文件。导出环节有两个方案一是用MediaRecorder录制 Canvas 流二是用CCapture或Whammy这类库逐帧编码。MediaRecorder的优点是简单缺点是它录制的是实时流如果动画卡顿录出来的视频也会卡。更可靠的做法是逐帧渲染 编码虽然慢但每一帧都是精确的。const stream canvas.captureStream(30); const recorder new MediaRecorder(stream, { mimeType: video/webm;codecsvp9, videoBitsPerSecond: 8000000 }); const chunks []; recorder.ondataavailable e chunks.push(e.data); recorder.onstop () { const blob new Blob(chunks, { type: video/webm }); // 下载或上传 }; recorder.start(); // 播放动画... recorder.stop();videoBitsPerSecond设成 8Mbps 是我实测下来 1080p 比较平衡的值再低会有明显压缩痕迹再高文件太大。2.7 服务端渲染路线用 Node.js FFmpeg 批量生成如果你要批量生成几百条视频浏览器方案就不合适了得上服务端。核心思路是用node-canvas或puppeteer在服务端渲染每一帧然后用fluent-ffmpeg把帧序列编码成 MP4。这条路线最重但也是唯一能支撑批量生产的方案。Claude 写fluent-ffmpeg的调用代码很熟练你只要告诉它输入帧序列的路径模式和输出参数就行。const ffmpeg require(fluent-ffmpeg); ffmpeg() .input(frames/frame_%04d.png) .inputFPS(30) .outputOptions(-c:v, libx264, -pix_fmt, yuv420p) .output(output.mp4) .on(end, () console.log(done)) .run();-pix_fmt yuv420p这个参数一定要加否则某些播放器会显示黑屏。这是我踩过的坑当时排查了半天才发现是像素格式的问题。3. 五个案例拆解从提示词到成片的完整链路3.1 案例一数据增长柱状图动画需求是做一个季度销售额增长的柱状图动画柱子从底部升起数字从 0 滚动到目标值。我给 Claude 的提示词是用 Canvas 2D 写一个柱状图动画5 根柱子高度分别是 120、200、150、280、320柱子从底部升起用时 1.5 秒带 easeOutCubic 缓动每根柱子延迟 0.15 秒开始柱子顶部显示数字数字从 0 滚动到对应值。Claude 返回的代码基本可以直接用我只改了两个地方一是把颜色从默认的蓝色改成了品牌色二是加了柱子的圆角用roundRect实现。整个案例从提示词到成片大概花了 20 分钟其中 15 分钟是在调颜色和间距。这个案例的关键经验是数字滚动要用Math.floor取整否则会出现小数闪烁。另外数字的字体要用等宽字体不然滚动时宽度会跳。3.2 案例二粒子汇聚成 Logo需求是几百个粒子从随机位置飞向中心最终拼成一个 Logo 形状。这个案例必须用 WebGL因为 Canvas 2D 跑 500 个粒子就开始掉帧了。我给 Claude 的提示词是用 WebGL 写一个粒子系统500 个粒子初始位置随机分布在画布内目标位置是 Logo 的采样点粒子在 2 秒内从初始位置移动到目标位置带 easeInOutQuad 缓动粒子颜色从随机色渐变到白色。Claude 给出的方案是用gl.POINTS绘制粒子顶点着色器里做位置插值。这里有个细节Logo 的采样点需要预先从图片里提取我用了一个离屏 Canvas 读取像素每隔 4 个像素取一个点最终得到约 500 个目标位置。这个案例的坑在于粒子的初始位置如果完全随机会有一些粒子从画布外飞进来视觉上很突兀。我的做法是把初始位置限制在画布内并且让粒子的初始透明度为 0前 0.3 秒淡入。3.3 案例三文字逐字打出 光标闪烁需求是模拟打字机效果文字逐字出现末尾有光标闪烁。这个用 SVG CSS 动画最合适因为文字排版交给 SVG 处理动画交给 CSS。我给 Claude 的提示词是用 SVG 和 CSS 做一个打字机效果文字是Hello World每个字符间隔 0.1 秒出现光标用竖线表示闪烁频率 1Hz。Claude 给出的方案是用stroke-dasharray控制每个字符的显示但这样有个问题中文字符的路径长度不一致用 dasharray 会导致显示速度不均匀。后来我改成了用opacity控制每个字符一个tspan用 CSS animation 的animation-delay逐个显示。这个案例的经验是做文字动画时能用 opacity 就别用路径动画因为路径动画在不同字体下的表现差异很大。3.4 案例四音频频谱可视化需求是把一段音乐做成频谱可视化视频频谱条随音乐跳动。这个案例用了 Web Audio API Canvas 2D。我给 Claude 的提示词是用 Web Audio API 分析音频频谱用 Canvas 2D 绘制 64 根频谱条每根条的高度对应频段能量颜色从绿色渐变到红色帧率 30fps。Claude 给出的代码里用了getByteFrequencyData这个是对的。但有个细节它没考虑到频谱数据需要做平滑处理否则条会跳得很厉害。我的做法是每帧的新值和上一帧的值做加权平均权重 0.7 给新值0.3 给旧值。const smoothed data.map((v, i) v * 0.7 prevData[i] * 0.3); prevData smoothed;这个平滑处理让视觉效果从抽搐变成了律动差别非常大。3.5 案例五3D 旋转立方体需求是做一个 3D 旋转立方体六个面不同颜色。这个案例用 WebGL 或者 Three.js 都行。我选的是原生 WebGL因为不想引入额外依赖。我给 Claude 的提示词是用原生 WebGL 写一个 3D 旋转立方体六个面不同颜色绕 Y 轴旋转每秒转 90 度带透视投影。Claude 给出的代码里包含了顶点着色器和片元着色器以及矩阵变换的代码。这里的关键是透视投影矩阵的计算Claude 用的是标准的perspective矩阵参数是fov45度, aspectwidth/height, near0.1, far100。这个案例的坑在于立方体的面需要正确的深度测试否则会出现面片穿插。需要在 WebGL 里开启gl.enable(gl.DEPTH_TEST)并且在每帧开始时gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)。4. 可复用提示词框架让 Claude 稳定输出可用代码4.1 提示词的四段式结构经过几十次尝试我总结出一个稳定的提示词结构分四段第一段技术栈声明。明确告诉 Claude 用什么技术比如用 Canvas 2D、用 WebGL 原生 API、用 SVG CSS。不要让它自己选否则它可能给你一个你不熟悉的方案。第二段视觉描述。描述你想要的画面包括元素、颜色、位置、大小。这里可以用左上角、居中、占屏幕 80% 宽度这类相对描述Claude 能理解。第三段动画参数。这是最关键的一段要明确时间、缓动、延迟。比如用时 2 秒、easeOutCubic 缓动、每根柱子延迟 0.15 秒。第四段输出要求。告诉它你要什么形式的代码比如输出单个 HTML 文件、输出一个函数接收 canvas 元素作为参数、不要用外部库。4.2 缓动函数的命名约定Claude 对缓动函数的命名很敏感你用标准命名它就能给出正确的实现。常用的有缓动名称效果适用场景linear匀速进度条、旋转easeInQuad慢起快终元素入场easeOutQuad快起慢终元素出场easeInOutQuad慢起慢终位置移动easeOutCubic更快的减速弹入效果easeOutBack超出再回弹强调效果我实测下来easeOutCubic是最通用的大部分入场动画用它都不会错。4.3 让 Claude 自己检查代码的三个追问Claude 第一次给出的代码往往有 bug我通常会用三个追问让它自己修第一个追问这段代码在 60fps 下跑 10 秒有没有性能问题它会检查是否有每帧创建对象、是否有内存泄漏。第二个追问如果画布尺寸变成 1920x1080这段代码还能正常工作吗它会检查是否有硬编码的坐标。第三个追问这段代码在 Safari 上能跑吗它会检查是否有兼容性问题比如roundRect在旧版 Safari 上不支持。这三个追问能解决 80% 的常见问题。4.4 提示词模板下面是我常用的模板你可以直接套技术栈[Canvas 2D / WebGL / SVGCSS] 画面描述[元素、颜色、位置、大小] 动画参数 - 总时长[X] 秒 - 缓动[easeOutCubic] - 延迟[每元素延迟 X 秒] - 循环[是/否] 输出要求 - 输出单个 HTML 文件 - 不使用外部库 - 画布尺寸 1920x1080 - 帧率 30fps这个模板我用了很多次Claude 的输出质量很稳定。5. 实操中的性能陷阱与兼容性处理5.1 Canvas 2D 的三个性能杀手第一个是每帧创建渐变对象。createLinearGradient是有开销的如果每帧都创建帧率会掉。正确做法是在初始化时创建好存成变量。第二个是频繁的save/restore。这两个操作会操作状态栈虽然开销不大但如果每帧调用几百次累积起来也很可观。我的做法是只在必要时用比如需要临时改变换矩阵时。第三个是大尺寸的drawImage。如果你把一张 4K 图片每帧绘制到 1080p 画布上GPU 的上传带宽会成为瓶颈。正确做法是预先缩放图片到目标尺寸。5.2 WebGL 的上下文丢失问题WebGL 上下文在某些情况下会丢失比如系统休眠、GPU 驱动更新。如果不处理webglcontextlost事件页面会直接白屏。canvas.addEventListener(webglcontextlost, e { e.preventDefault(); // 停止渲染循环 cancelAnimationFrame(rafId); }); canvas.addEventListener(webglcontextrestored, () { // 重新初始化所有资源 initBuffers(); initShaders(); startRenderLoop(); });这个处理在桌面浏览器上可能一年都遇不到一次但在移动端很常见。如果你的视频生成工具要在移动端跑这个必须加。5.3 导出视频的编码参数选择导出 MP4 时编码参数直接影响文件大小和兼容性。我常用的参数组合是参数值说明编码器libx264兼容性最好像素格式yuv420p必须否则部分播放器黑屏码率8Mbps1080p 的平衡值帧率30fps和渲染帧率一致CRF18质量优先文件稍大如果文件太大可以把 CRF 调到 23文件大小能减少一半画质损失在可接受范围内。5.4 中文字体在 Canvas 里的渲染问题Canvas 里渲染中文时如果字体没加载完就绘制会 fallback 到默认字体导致排版错乱。正确做法是用document.fonts.ready等待字体加载完成。await document.fonts.ready; // 现在可以安全地绘制中文了 ctx.font 48px Noto Sans SC; ctx.fillText(你好世界, 100, 100);这个坑我在做中文视频时踩过当时排查了很久才发现是字体加载时序的问题。6. 从单次生成到批量生产的工作流6.1 参数化模板的设计思路当你需要生成几十条相似但数据不同的视频时把可变部分抽成 JSON 配置是最有效的做法。比如柱状图动画柱子高度、标签、颜色都是可变的把这些抽出来{ title: 季度销售额, bars: [ { label: Q1, value: 120, color: #4A90D9 }, { label: Q2, value: 200, color: #50C878 }, { label: Q3, value: 150, color: #F5A623 }, { label: Q4, value: 280, color: #D0021B } ], duration: 3.0, easing: easeOutCubic }渲染代码读取这个配置生成对应的动画。这样你改数据不用改代码批量生成时只需要替换 JSON 文件。6.2 用 Puppeteer 做批量截图批量生成的核心是用浏览器渲染每一帧截图然后编码。Puppeteer 可以精确控制渲染时机const browser await puppeteer.launch(); const page await browser.newPage(); await page.setViewport({ width: 1920, height: 1080 }); await page.goto(file:///path/to/animation.html); for (let frame 0; frame totalFrames; frame) { await page.evaluate((t) window.seek(t), frame / 30); await page.screenshot({ path: frames/frame_${String(frame).padStart(4, 0)}.png }); }这里window.seek(t)是页面里暴露的一个函数用来把动画定位到指定时间。这个方案比MediaRecorder慢但每一帧都是精确的不会丢帧。6.3 批量任务的队列管理当你要生成几百条视频时不能一次性全部启动否则内存会爆。我的做法是用一个简单的队列同时只跑 2-3 个任务const queue [...tasks]; const concurrency 2; const running new Set(); async function runNext() { if (queue.length 0) return; const task queue.shift(); const promise processTask(task).finally(() { running.delete(promise); runNext(); }); running.add(promise); if (running.size concurrency) runNext(); }这个模式我用了很多次稳定可靠。并发数设成 2 是因为每个 Puppeteer 实例占内存不小设太高反而会拖慢整体速度。6.4 失败重试与日志记录批量任务一定要有重试机制因为 Puppeteer 偶尔会因为内存问题崩溃。我的做法是每个任务最多重试 3 次每次重试前重启浏览器实例。日志记录到文件方便排查。async function processWithRetry(task, maxRetries 3) { for (let i 0; i maxRetries; i) { try { return await processTask(task); } catch (err) { console.error(Task ${task.id} failed (attempt ${i 1}):, err.message); if (i maxRetries - 1) throw err; await restartBrowser(); } } }这套机制让我在跑 500 条视频的批量任务时最终成功率达到了 99.8%。7. 一些踩坑之后的个人体会用 Claude Opus 5.5 写代码做视频这件事我最大的体会是它把写代码的门槛降到了很低但做视频的门槛并没有降低。你还是需要理解动画的时序、缓动的感觉、颜色的搭配、排版的节奏这些是代码之外的东西。另一个体会是不要指望一次提示词就能得到完美的代码。我的平均情况是第一次生成能跑通 70%剩下 30% 需要 2-3 轮追问和手动调整。这个比例已经很高了比我自己从零写快得多。最后分享一个小技巧当你不知道某个效果该怎么描述时直接把你想要的画面用文字描述给 Claude然后问它这个效果用什么技术实现最合适。它给出的建议往往比我自己的第一直觉更合理。比如我想做文字逐渐模糊消失的效果第一反应是用 Canvas 逐帧改透明度Claude 建议用 CSS 的filter: blur()配合transition实现起来简单得多效果也更平滑。
