Skip to content

manim-live标准 Manim 代码,浏览器里实时渲染

把标准 Manim(Python)代码变成网页里的实时动画:无需服务器,无需本地 Python。

一段代码,一幅实时动画 ​

左边是一段标准 Manim CE 代码,没有任何本包特有的写法;把它交给 surface.run(),网页里当场实时渲染出右边的画面——不是预渲染的视频,而是执行这段 Python 绘制的结果。(截图为动画终态;播放过程见本地演示台。)

python
from manim import *


class AxesPlotScene(Scene):
    def construct(self):
        ax = Axes(x_range=[-3, 3, 1], y_range=[-1, 3, 1])
        graph = ax.plot(lambda x: x * x / 3, color=GREEN)
        self.play(Create(ax), Create(graph))
        self.wait(0.3)

上段代码实时渲染的结果

上段代码的实时渲染结果(终态)—— corpus/examples/basic/09-axes-plot.py

与原生 Manim 对比 ​

代码是同一份标准 Manim Python,差别只在在哪里执行、如何产出画面:

原生 Manim(CLI)manim-live
写的代码标准 Manim Python同一份代码,原样可跑
运行环境本机装 Python + manim + ffmpeg(公式还要 LaTeX)浏览器即可,零安装
出画面方式命令行离线渲染成 mp4,播放与嵌入需自行解决网页内实时渲染,代码贴入即播放
嵌入网页 / 产品做不到,只能事后嵌视频文件任意位置嵌入,一个容器元素即可
AI 边讲边画单次渲染需等待整条管线完成,无法配合讲解节奏即写即演;check() 先把有问题的代码拦在渲染之前
部署成本每台机器装一遍环境,或架渲染服务器一个 npm 包;资源可自托管,完全离线也能跑

唯一的取舍:公开 API 437 项实测可用约 90%,主力场景(基础图形、坐标系、文本公式、动画、updater、3D)全部覆盖——逐项清单见支持面。

快速开始 ​

bash
pnpm add manim-live

最小流程三步:createManimRenderer() 建渲染器 → createSurface(容器) 建画布 → surface.run(python) 执行一段 Manim 代码。完整示例见快速开始,各框架的挂载写法见框架集成。

渲染成品 ​

以下均为真机渲染的终态:由 scripts/shot-corpus.mjs 使用真实 Chromium 逐条运行语料生成,非设计稿。源码与图片的对应关系见示例画廊。

截图为终态,不含动画过程

截图截取的是一段动画播放完毕后的那一帧。动画过程本身(物体如何运动、变形)静态图无法呈现——本仓库附带一个本地演示台,pnpm playground 启动后 273 条语料均可逐条播放。该演示台仅用于本地开发,不随文档上线。

MIT licensed · Manim 与 Pyodide 各依其自身许可(见「安装」)