最近用代码做视频的案例非常多，有人靠这个迅速起号，有人拿来做产做宣传。效果都很好。
我看了一圈视频，发现有 3D 小岛、水彩 MV、手绘线条各种风格。
这些效果在挑战我的认知，越看越迷，这些到底是怎么做出来的？
它们只是让模型产出一段代码，就做出了能媲美视频模型的效果。
视频和代码的大概区别我是清楚的：
视频模型直接生成每一帧的像素。
代码模型只写程序，画面由浏览器或渲染引擎一帧一帧算出来。
我们看到的漫剧，都是用 Seedance 2.5 这样的视频模型做的。
代码做出来的效果，可以看我刚搓的这个视频：
那代码模型一个像素都不画，是怎么做到 3D、水彩、手绘、数学板书这些风格的？
带着疑问我去研究了下背后的技术，整理了这篇文章。
1 看完你大概能了解这些动效的制作原理
2 知道一些技术名词，写好提示词，调用模型的能力
3 加以练习，产出市面上任意效果的AI视频。
不同风格，只是这个函数交给了不同的工具去画：
小时候玩过翻页动画书吗？每页画一张，快速翻过去，画面就动起来了。
视频也是这样。一秒 30 帧，就是一秒翻 30 页。用代码做视频，就是让程序替你画这每一帧画面。
你写一个函数，给它一个时间，它还你一张画面：
然后渲染器从第 0 帧开始，一帧一帧地调这个函数，每调一次截一张图，最后用 FFmpeg 把几百张图拼成 MP4，配上声音。
用视频模型生成画面，每次抽卡结果都不一样，想改一个细节很难。
代码不一样，同一份代码渲染 100 次，100 次结果一模一样。想把标题往左挪 20 像素，改一个数字就行。
可复现、能精确修改，这是代码动画相对 AI 视频最实在的好处。
下面我分了四个类型，9 个技术原理，并且配上技术开源地址和教程链接，方便大家获取更多
类型一 HyperFrames、Remotion、Motion Canvas
这一类是现在最主流的路线。画面写成网页，让一个看不见的 Chrome 浏览器去截图。
原因很朴素：模型写网页的能力最强，出错率最低。
1 HyperFrames
HyperFrames 是 Heygen 开源的AI 动画工具，思路是把视频当一个网页来写。文字是 `，卡片是 `，动画交给 GSAP 时间轴。
关键在于这条时间轴是暂停的，渲染的时候框架拨一下，跳到第 n 帧，截图，再拨下一帧。
想看官方怎么用，可以看 HeyGen 的5 分钟入门教程：youtube.com/watch?v=IDkycf5vfhI
2 Remotion
Remotion 用 React 写视频。每一帧是一个组件，组件只认一个输入：现在是第几帧。
比如这两个函数，interpolate 把帧号换算成任何数值，spring 算出带回弹的弹性效果。下面这个数字滚动加柱状图弹起来，就是这两个函数干的：
它比 HyperFrames 门槛高一点，要懂 React。
好处是多场景拼接、字幕逐词对齐、批量模板特别顺手，同一个组件换一份数据，就是另一条视频。
Remotion教程：youtube.com/watch?v=z7Bkf3Vc63U
3 Motion Canvas
Motion Canvas 的写法反过来。Remotion 是给你帧号，你去算画面；Motion Canvas 是让你按时间顺序写剧本：
左边高亮的那一行，就是右边正在执行的动作。它自带代码块组件，很多编程教学视频都用它做。
作者自己做的介绍： youtube.com/watch?v=WTUafAwrunE
类型二 ：手绘线、分层插画、水彩
代码画出来的东西，最容易被吐槽的就是太规整、太像 PPT。这一类技术解决的就是AI 味太浓的问题。
4 rough.js：线条手绘
rough.js 画一条直线的时候，会给端点加一点随机偏移，再用两三条略有不同的曲线叠起来，看着就像铅笔描了两遍。
5 分层插画：一层一层长出来
把一张插画拆成天空、太阳、远山、近山、树、文字几层，每层错开半拍出场。描边像笔一样画出来，靠的是 SVG 的两个属性：虚线长度设成整条路径的长度，再让偏移量从全长减到 0，线就从头画到尾了。
纸拼贴风格的科普视频也是这个原理，每一层换成一张图片。
GitHub 上有个叫 Paper-Cut 的项目：先用图像模型出一张定稿图，把图拆成图层，再用代码让图层动起来，全程不碰视频模型，成本一下就省了。
6 水彩动画：叠 40 层，每层只有 4.5%
数字水彩我研究得最久，原理反而最有意思。先画一个多边形，在每条边的中点加一点随机偏移，再对新的边重复几次，就得到一个边缘坑坑洼洼的形状。
同一个形状生成 40 多个略有差异的版本，每个只用 4.5% 的不透明度叠上去。
中间被盖了几十层，颜色深；边缘只盖了几层，颜色浅。晕开的感觉就出来了。
p5.brush 把这套算法和铅笔、马克笔、炭笔等笔刷打包好了。
类型三：数学板书和地图路线
7 Manim
Manim 是作者 Grant Sanderson 写的开源组件。它把画面里的东西都当成数学对象。一条曲线是一个函数，一个公式由 LaTeX 渲染成矢量路径。
动画就是两个状态之间的插值，曲线从起点画到终点，公式里相同的符号飞到新位置。
强烈推荐看作者本人的演示：youtube.com/watch?v=rbu7Zu5X1zI
8 地图路线：口播讲到哪，线就画到哪
这个效果用 AI 视频模型非常难调。用代码反而很简单：
- 先把配音做好，用TTS打出每句话的时间戳
- 每句话对应路线上的一个点
- 两句话之间，路线进度从上一个点平滑走到下一个点
先有音频，再做画面。上面那张是示意图，城市位置是我随手摆的。
真要做旅行、出行视频，得用真实地图。这块我自己做过一个 skill，叫 map-motion。
原理跟前面讲的一样，只是底图换成了高德地图，路线也是高德算出来的真实驾车、步行、骑行路线。
你让 AI 写一份「镜头表」JSON文件，说清楚先从哪俯冲下来、走哪条路、在哪停，它去高德解析地名、取路线、算镜头，再开一个 Chromium 逐帧画，最后交给 FFmpeg 出 MP4 和 GIF。
比如 Vlog 片头常见的「我在这里」：从地球俯冲到大理双廊，瞄准镜锁定，坐标卡上的经纬度一路滚动。
再比如青海湖环湖骑行，路线一段段描出来，右上角里程表跟着涨，底部是海拔剖面（下面是 2 倍速预览）：
Skill 仓库在这：SpaceZephyr/map-motion。
类型四：3D 视频 three.js 和 Blender
8 three.js
three.js 在网页里搭 3D 场景，场景里就三样东西：物体、灯光、镜头。做视频的关键是镜头。
先用几个点连成一条平滑曲线，第 t 秒的时候，镜头就放在曲线上对应的位置，朝着稍微靠前一点的地方看。
提示词可以按三段写：主体是什么，画面里该有什么，不能出现什么。比如「主体是一条小船；画面里有海、小岛、几棵树；不要出现任何文字和字幕」。
教程可以看这条：youtube.com/watch?v=58k6PLYnOuI
9 Blender
黏土质感、真正的 3D 角色，还是得 Blender。现在不用自己学 Blender 了，有个叫 Blender MCP 的插件，能让 AI 直接操作 Blender：加一个球、换成哑光的黏土材质、在第 1 帧和第 30 帧打关键帧。
AI 还能要一张截图，看看画面对不对再改。教程：youtube.com/watch?v=Ci9Xc-VPc04
最后，如何选择
在上面介绍的开源项目里，都有官方制作的 skill，大家可以保存这些项目关键词，再给模型描述的时候，用对应的技术来制作动效。
也可以搜索关键词，学习更多开源资料。
如果只能挑一个先学，我的建议是 HyperFrames。
它的开源生态最丰富，有大量 skill 可以用，再一个模型写 HTML 最稳； rough.js、p5、three.js 这些库，都可以塞进 HyperFrames 的网页里一起渲染。
我总结了下面这个表格，可以更好选择用哪些技术来制作视频。
我是空格，持续分享 AI 产品的思考与实践
你还用过哪些代码做视频的工具？欢迎评论区分享。如果有用，点赞转发支持一下。
