生成 Terminal SVG 动画

以前网页上的terminal动画多数是录屏后转成gif，放在网页上。但gif 清晰度不够高，而且录制视频后，再通过工具转成gif，过程略微繁琐。

后来看到了CRA官的终端动画，发现竟然是SVG做的，惊觉神奇。

昨天笔者尝试了用 asciinema 和 svg-term-cli 生成svg动画，效果挺好。

安装

# asciinema 可以通过 brew 或 pip 安装
$ brew install asciinema

# svg-term-cli 是npm包，用npm的方式安装
$ npm install -g svg-term-cli

录制

# 开始录制，生成的文件信息存为 local.json
$ asciinema rec local.json

# 运行该命令后，录制即刻开始，随机操作你想要演示的终端操作。
# 想要终止录制，按 Ctrl + D 即可

生成SVG文件

$ cat local.json | svg-term --height=25 --width=90 --out=terminal.svg --window

工程化

为了方便使用，你可以把这两行命令配置成scripts脚本，把svg工具配置在项目里，当然asciinema还是需要全局安装的：

{
  
  "scripts": {
    "start": "rm -rf local.json && asciinema rec local.json",
    "out": "cat local.json | svg-term --height=25 --width=90 --out=terminal.svg --window"
  },
  "devDependencies": {
    "svg-term-cli": "^2.1.1"
  }
}

# 清除旧文件并开始录制
$ npm run start
# 生成 svg 文件
$ npm run out

由于该工具记录的是人类的操作记录和时间，因此操作节奏，包括输入的快慢、停顿时间都会如实反映在录制的动画中，因此在录制操作时需要做好把控。