入门

简单示例

为了让你对 JAnim 的结构有个大概的认知， 你可以在你的文件夹内新建一个 learn.py 文件

然后将以下代码复制到文件内：

HelloJAnimExample 
from janim.imports import *

class HelloJAnimExample(Timeline):
    def construct(self):
        # define items
        circle = Circle(color=BLUE)
        square = Square(color=GREEN, fill_alpha=0.5)

        # do animations
        self.forward()
        self.play(Create(circle))
        self.play(Transform(circle, square))
        self.play(Uncreate(square))
        self.forward()

接着在命令行中，使用

janim run learn.py HelloJAnimExample

会弹出一个窗口，应当会显示和上面视频一致的内容

这个窗口默认是置顶的，你可以在菜单栏中取消

然后，我们具体看一下这段代码干了什么：

from janim.imports import *

这里，我们引入 JAnim 的主要功能，这样就可以在之后使用

class HelloJAnimExample(Timeline):
    def construct(self):

这两行代码定义了一个继承自 Timeline 的类 HelloJAnimExample， 并且实现了 construct() 方法，动画内容就写在该方法中

HelloJAnimExample 可以写成你想取的名称，随意

小技巧

如果你对这两行感到困惑，可以先背下来，作为一种标准的“起手式”

当然，请将 HelloJAnimExample 替换为你希望的命名

我们继续往下看，便是具体动画的部分

circle = Circle(color=BLUE)
square = Square(color=GREEN, fill_alpha=0.5)

这两行，我们定义了一个圆和一个方形（默认情况下不填充内部）

并且，将圆设置为了蓝色；
将方形设置为了绿色，并且设置内部有 50% 透明度的填充

此时，这两个物件还没有显示出来，我们接着看后面的几行

self.forward()
self.play(Create(circle))
self.play(Transform(circle, square))
self.play(Uncreate(square))
self.forward()

这里便是产生动画的代码，按照顺序来看：

  • self.forward() 向前推进 1s；由于此时没有物件显示，所以这 1s 只有空白的背景

  • self.play(Create(circle)) 播放圆的创建动画

  • self.play(Transform(circle, square)) 播放从圆变换到方形的补间动画

  • self.play(Uncreate(square)) 播放方形消失的动画

  • self.forward() 向前推进 1s，和前一个类似

其中：

  • forward() 将相同的画面持续一段时间，默认是 1s，你也可以填入具体的秒数

  • play() 的基本格式是 self.play(动画对象)，让动画持续一段时间

比如，你可以把变换的那一行加上 duration=2

self.play(Transform(circle, square), duration=2)

那么动画过程就会持续 2s

物件

上面的例子中，涉及到两个物件：Circle 和 Square，它们本质上都是几何图形物件

组件

重要

对于物件，有一个重要的概念是“组件”

每种物件都包含若干的组件，例如，几何图形其实是由“轮廓的描点”所表示的，
因此，对于几何图形物件，这些是它的组件：

  • 轮廓坐标 points

  • 描边粗细 radius

  • 描边颜色 stroke

  • 填充颜色 fill

为了对组件进行操作，你需要 物件.组件名.功能() ，比如：

circle.fill.set(RED, 0.5)

这一行会将圆的填充色设置为红色，并且有 50% 的透明度；你可以把这行插入到上面例子的 circle = Circle(color=BLUE) 的下一行，试试效果

同样的，circle.stroke.set(...) 会设置描边的颜色

提示

如果你想将描边和填充的颜色同时进行设置，不必写：

circle.stroke.set(RED)
circle.fill.set(RED)

作为一种更简便的写法，你可以将上面的两行写成这样：

circle.color.set(RED)

这里提供了一个 color，可以同时对描边和填充进行操作

初始化参数

还记得前面例子的代码吗？

# define items
circle = Circle(color=BLUE)
square = Square(color=GREEN, fill_alpha=0.5)

这里的代码看起来没有对 circle 的组件进行操作，那么是如何设置这些物件的颜色的呢？

你应该注意到了传入 Circle 和 Square 的参数，color=XXX 以及 fill_alpha=XXX

具体来说，在创建物件时对组件属性进行设置，并不需要一行一行地列出来，可以全部作为参数直接书写，这里列出几何图形物件可用的一些属性：

  • stroke_radius: 描边的粗细

  • color: 描边和填充的颜色

  • stroke_color: 描边颜色，会覆盖 color

  • fill_color: 填充颜色，会覆盖 color

  • alpha: 透明度，1 表示完全不透明，0 表示完全透明，0~1 之间的数则为半透明

  • stroke_alpha: 描边透明度，会覆盖 alpha

  • fill_alpha: 填充透明度，会覆盖 alpha

组件动画

通过前面的学习，我们知道，通过

circle.color.set(RED)

可以将圆设置为红色

这种设置是立刻的，但是如果这样写：

circle.anim.color.set(RED)

注意这里的区别是，先写 .anim 再跟上对组件的操作

这种写法，不再是“设置为红色”，而是会产生一个“从原来的颜色过渡到红色”的动画，可以放在 self.play(...) 里面显示动画

比如下面这个例子：

CmptAnimExample 
from janim.imports import *

class CmptAnimExample(Timeline):
    def construct(self) -> None:
        circle = Circle(color=BLUE, fill_alpha=0.5)

        self.show(circle)
        self.forward()
        self.play(circle.anim.color.set(GREEN))
        self.play(circle.anim.fill.set(alpha=0.2))
        self.play(circle.anim.points.scale(2))
        self.forward()

备注

self.show(circle) 是将圆直接显示出来，没有动画过程

希望你没忘记，执行的命令是：

janim run 文件名 动画名

如果上面这段代码也写在了 learn.py 中，那么就是：

janim run learn.py CmptAnimExample

导出视频

警告

若要导出视频，请确保安装了 FFmpeg 并正确地将其添加到了环境变量 PATH 中

上面进行预览是使用：

janim run learn.py CmptAnimExample

如果你想要将这个动画导出为视频，将 run 替换为 write 即可：

janim write learn.py CmptAnimExample

默认情况下，输出的视频会在目录中的 videos/ 文件夹下

如果再传入 -o，会在导出结束后自动打开视频文件：

janim write learn.py CmptAnimExample -o

实时预览

如果每次修改动画都需要关掉窗口、修改代码、重新执行，那么未免有点太麻烦了

因此，你可以在修改并保存代码后，点击窗口左上角“功能”中的“重新构建”（快捷键是 Ctrl+L）， 这样就会更新动画内容，使其和更改后的代码一致

警告

以下的功能需要使用 vscode 作为编辑器

每次修改完都要手动重新构建可能还是有点麻烦了，如果你使用 vscode 开发，可以安装 vscode 插件 janim-toolbox

运行时，在预览动画的命令中加上 -i，比如：

janim run learn.py CmptAnimExample -i

这样，在执行后，输出内容应当多出这样一句：交互端口已在 xxxxx 开启

小技巧

你可能注意到了，预览窗口默认是在右半边屏幕置顶的

这里推荐将 vscode 放在左半边屏幕，关闭侧边栏进行书写

首先，在 vscode 中，默认情况下，需要按下 Ctrl+J Ctrl+C （分别按下，这是组合键），如果成功的话， 会在 vscode 右下角的状态栏中显示 已连接到界面端 xxxxx

接着，对代码进行更改，保存后，就会立即更新预览的内容