ManimOnline

简介

Manim(Mathematical Animation Engine)是由知名Youtube频道3Blue1Brown的运营者Grant Sanderson开发的一个数学动画制作引擎。它可以让用户通过编程的方式精准的生成解释性的数学动 画，以帮助观众更加直观的理解晦涩难懂的数学概念。

随着Manim功能的扩展，现如今许多科普视频作者都会使用Manim工具制作动画来帮助更直观的解释专 业的知识。然而，使用Manim工具需要通过Python语言编写脚本来控制动画中的一切元素与逻辑，这 就使得该工具具有一定的使用⻔槛。此外，Manim渲染和生成动画需要占用一定的系统资源，当画面中元素较为复杂时，就会对用户的硬件系统造成不小的压力。本项目旨在通过网⻚UI交互的形式，让用户能够直观的创建动画中所需的元素，并通过云端渲染快速得到最终的科普动画。

部署方式

使用UCloud镜像部署

UCloud镜像：

名称	ManimOnline
ID	uimage-d5ups52d
用户名	ubuntu
密码	abcd123456

若要使用镜像部署本项目，请将镜像恢复到一台云主机上，随后输入如下命令启动服务：（服务器镜像中装有screen工具，可创建一个独立的screen使得服务可以在后台持续运行）

> sudo su
> cd /home/ubuntu/manim_backend/
> export FLASK_APP=app.py
> export FLASK_ENV=development
> flask run --host 0.0.0.0 --port 80

自行部署

若要在云主机上部署本项目，请使用Ubuntu或其他带有apt-get工具的系统。

由于本项目使用了Manim作为动画生成工具，因此请先安装必要的系统依赖库：

> apt install sox ffmpeg libcairo2 libcairo2-dev texlive-full

请确保系统中装有python环境及pip工具，并通过pip工具安装Flask环境及Manim库：

> pip3 install Flask
> pip3 install Flask-Cors
> pip3 install manimlib

请使用如下命令启动服务：

> export FLASK_RUN=app.py
> export FLASK_ENV=development
> flask run --host 0.0.0.0 --port 80

使用说明

若要使用交互式方法生成动画，您可以通过界面上半部分的组件来创建动画逻辑。为了演示起见，我们在网页中预设了一组动画生成逻辑，您只需要在对应位置输入画布名称并选择画质即可直接提交生成。随后您需要稍等片刻，网站会自动跳转到视频播放界面（后台可以看到视频生成进度）。

若要直接使用Python代码生成动画，您可以直接在界面下半部分的代码框中输入Python代码，输入画布名称并选择画质即可提交生成（请注意，画布名称需与场景类名一致！）。随后稍等片刻，网站同样会自动跳转到对应的视频播放界面。

您可以使用如下的Python代码进行较为复杂的动画生成测试：（该场景元素较为复杂，在常规云主机上可能需要花费1～2分钟左右进行视频生成，此时前端无任何反应属正常现象，请耐心等待，同时也可以通过后台追踪生成进度）

from manimlib.imports import *

# Test即为画布名
class Test(Scene):
    def construct(self):
        title = TextMobject("Hello World!") # 文字
        basel = TexMobject(                         # 公式
            "\\sigma (x) = \\frac{1}{1+e^{-x}}"
        )
        VGroup(title, basel).arrange(DOWN)          # 集合到一起后排列位置
        self.play(
            Write(title),             # "写"出title文字
            FadeInFrom(basel, UP),    # 将basel公式从上方淡入
        )
        self.wait()  # 停顿一秒

        transform_title = TextMobject("That was a transform")
        transform_title.to_corner(UP + LEFT) # 放到最左上角
        self.play(
            Transform(title, transform_title), # 将title变换为transform_title
            LaggedStart(*map(FadeOutAndShiftDown, basel)), # 将basel公式中的每个字符依次从下方淡出
        )
        self.wait()  # 停顿一秒

        grid = NumberPlane()  # 构建一个坐标平面
        grid_title = TextMobject("This is a grid")
        grid_title.scale(1.5)
        grid_title.move_to(transform_title)

        self.add(grid, grid_title)  # 确保grid_title在grid上方
        self.play(
            FadeOut(title),               # 淡出title
            FadeInFromDown(grid_title),   # 从下方淡入grid_title
            ShowCreation(grid, run_time=3, lag_ratio=0.1), # 创建grid的动画，时长为3，延迟为10%
        )
        self.wait()

        grid_transform_title = TextMobject(
            "That was a non-linear function \\\\"
            "applied to the grid"
        )
        grid_transform_title.move_to(grid_title, UL)
        grid.prepare_for_nonlinear_transform() # 让grid准备进行非线性变换
        self.play(
            grid.apply_function,       # 对grid施加一个函数，实现非线性变换
            lambda p: p + np.array([   # 输入值为一个点，返回值也为一个点
                np.sin(p[1]),
                np.sin(p[0]),
                0,
            ]),
            run_time=3,
        )
        self.wait()
        self.play(
            Transform(grid_title, grid_transform_title)
        )
        self.wait()

开发环境配置

后端

本项目使用Flask作为后端框架，因此仅需使用带有Flask的python3环境打开deploy目录即可构建后端开发环境。其他系统及库依赖与部署环境一致。

前端

本项目使用了Vue Cli作为前端生成框架，frontend文件夹中包含了所有前端构建的源码。若要搭建前端开发环境，请先在系统中安装Vue-Cli 3脚手架及相应的Node JS工具。随后在系统中使用如下命令安装必要的依赖库：

> npm install axios --save-dev
> npm install element-ui -S

如若该vue文件还未部署到服务器上，需把src/components中所有涉及到的地址与axios请求中的url前加上后端地址，这样就可以与后端产生交互。

请使用如下命令生成dist文件夹，并将其中对应的文件放入后端对应的templates及static目录内，即可将构建完成的前端网页部署到网站中：

> npm run build

开发者说明

本项目尚处于开发初级阶段，网站中可能存在些许BUG（尤其是前端交互界面），还请多多谅解！

如有任何问题或建议，请联系我们：

Github：GONGGONGJOHN

WeChat: gonggongjohn