[Tutorial] Criando GIF´s animados a partir do terminal

Tradução do meu post no dev.to

Eu preciso gerar alguns vídeos para demonstrar aplicações rodando no console.

gif

source

Capturar tela por vídeo é chato e gera arquivos grandes. Então eu encontrei duas ferramentas de linha de comando para resolver o problema.

Primeiro, precisamos capturar a interação do console, e isso é feito usando o Terminal SessionRecorder asciinema. As instruções de instalação podem ser encontradas aqui.

Estou usando ubuntu, então a instalação é muito fácil.

❯ sudo apt install asciinema
[sudo] senha para guionardo: 
A ler as listas de pacotes... Pronto
A construir árvore de dependências 
A ler a informação de estado... Pronto
Serão instalados os seguintes NOVOS pacotes:
 asciinema
0 pacotes actualizados, 1 pacotes novos instalados, 0 a remover e 0 não actualizados.
É necessário obter 35,0 kB de arquivos.
Após esta operação, serão utilizados 125 kB adicionais de espaço em disco.
Obter:1 http://br.archive.ubuntu.com/ubuntu focal/universe amd64 asciinema all 2.0.2-1 [35,0 kB]
Obtidos 35,0 kB em 7s (4.877 B/s) 
A seleccionar pacote anteriormente não seleccionado asciinema.
(A ler a base de dados ... 435184 ficheiros e directórios actualmente instalados.)
A preparar para desempacotar .../asciinema_2.0.2-1_all.deb ...
A descompactar asciinema (2.0.2-1) ...
A instalar asciinema (2.0.2-1) ...
A processar 'triggers' para man-db (2.9.1-1) ...

Para nosso primeiro teste, podemos executar:

❯ asciinema rec first.cast
asciinema: recording asciicast to first.cast
asciinema: press <ctrl-d> or type "exit" when you're done

Após isso, você pode interagir normalmente e todas as suas digitações e saídas de console serão gravadas no arquivo first.cast.

Para finalizar a captura, pressione CTRL+D ou digite exit. Verifique a documentação oficial para mais opções.

Agora, tendo o arquivo first.cast com as informações de interação, vamos gerar o GIF animado. A ferramenta para este trabalho é a agg - asciinema gif generator.

É uma aplicação feita em rust e você pode clonar o repositório e fazer o build, ou fazer o download do binário compatível com seu ambiente acessando o último release. Faça o download do arquivo correto, coloque-o em um diretório que você possa acessar (visível ao PATH) e execute.

Se você já tem o RUST instalado, é mais fácil ainda instalar o agg:

cargo install --git https://github.com/asciinema/agg

Verifique se a instalação está OK.

❯ agg --version
agg 1.1.0

Se o seu shell tem alguns caracteres unicode especiais definidos, você pode referenciar a fonte para renderizar o GIF. Eu gosto da "JetBrains Mono", e você pode baixá-la daqui, ou usar outra fonte dev da sua preferência.

No meu caso, eu salvei os arquivos TTF em uma pasta (./fonts) para utilizar no próximo passo.

Vamos gerar um GIF do arquivo first.cast criado anteriormente.

❯ ./agg --font-dir ./fonts --font-family "agave Nerd Font" first.cast first.gif
31 / 31 [=================================================================] 100.00 % 47.71/s 

E agora, temos nosso first.gif na pasta corrente.

first