對于經(jīng)常要寫開發(fā)教程和攻略來說,GIF動圖能增強不少說明力耙考。問題是耘斩,錄制視頻再轉(zhuǎn)GIF太麻煩,直接用一些GIF錄屏也躲不過圖片體積太大:動輒好幾MB這一關(guān)枢赔。
所以這時候我們就要讓流行的asciinema
命令上場了澄阳。它能輕松錄制你在終端里的所有操作,把所有動作保存為JSON文檔踏拜,而不是真的錄制視頻碎赢,所以文件都極其小。要播放的話可以直接用它的命令播放速梗。要轉(zhuǎn)換GIF的話有相關(guān)的轉(zhuǎn)換器肮塞,轉(zhuǎn)換后體積都不會比直接錄制屏幕大。
Mac安裝:
$ brew install asciinema
Pip安裝:
$ pip install asciinema
錄屏:
$ asciinema rec <output-file-name>
其中可以指定輸出文件的名字姻锁,擴展名可以是*.json
,*.cast
都行枕赵,隨意。
本質(zhì)上文件是一個JSON格式的數(shù)據(jù)集位隶,記錄了每個步驟細節(jié)烁设。如果不指定文件名也可以,程序會自動生成一個文件钓试,并顯示輸出的文件路徑装黑。
所以,程序制成的格式是不能用視頻播放器或GIF播放器播放的弓熏,只能用asciinema程序播放恋谭。
播放:
$ asciinema play </path/to/file>
按Ctrl-c
退出播放。
附加/覆蓋:
# 在已經(jīng)錄制的文件后附加錄制內(nèi)容:
$ asciinema rec <output-file-name> --append
# 覆蓋已經(jīng)錄制的文件
$ asciinema rec <output-file-name> --overwrite
對Tmux錄屏
對一個Tmux錄屏挽鞠,需要先退出tmux疚颊,然后通過asciinema進入tmux的指定session進行錄制狈孔。
如下:
$ asciinema rec --command "tmux attach -t session-name"
錄制結(jié)束后,不要直接Ctrl-D退出材义,而是先prefix-d
退出Tmux均抽,再Ctrl-c
結(jié)束錄制。
asciinema轉(zhuǎn)換為GIF圖片
有時候我們需要把錄屏結(jié)果顯示到網(wǎng)頁上其掂,那么就需要轉(zhuǎn)換為GIF圖片了油挥。
asciinema程序自身沒有轉(zhuǎn)換功能,但是官方開發(fā)了一個NodeJS版本的程序用來轉(zhuǎn)換:
參考:asciinema/asciicast2gif
前提是本機已經(jīng)安裝:NodeJS
款熬,ImageMagick
和giflossy
(或gifsicle
)深寥。
Mac安裝過程:
brew install ImageMagick gifsicle node
npm install --global asciicast2gif
轉(zhuǎn)換:
$ asciicast2gif </path/to/INPUT.json> </path/to/OUTPUT.gif>
如:
轉(zhuǎn)換過程很慢,但是文件非常小贤牛,遠比自己直接錄屏要小很多惋鹅。
比如下面的GIF,直接視頻錄屏轉(zhuǎn)GIF的文件是7M左右殉簸,通過減少幀率和顯示效果文件在1M左右闰集,而用asciinema轉(zhuǎn)換為GIF超清晰原畫,只有237Kb般卑》凳可見一斑。
有時候如果文件比較大椭微,可以選擇在轉(zhuǎn)換前選擇降低顯示效果洞坑。
asciicast2gif
降低效果的方法是設(shè)置Environment Variable環(huán)境變量GIFSICLE_OPTS
。比如:
$ export GIFSICLE_OPTS="-k 16 -O3"
$ asciicast2gif </path/to/INPUT.json> </path/to/OUTPUT.gif>
# or
GIFSICLE_OPTS="-k 16 -O3" asciicast2gif </path/to/INPUT.json> </path/to/OUTPUT.gif>