gsap video export
1.0.4
Exporte animação GreenSock (GSAP) para vídeo com facilidade e habilidade.
gsap-video-export é uma ferramenta simples para exportar suas animações GreenSock (GSAP) para vídeo. Crie animações de vídeo com a estrutura que você conhece e adora e use-as em seus projetos de vídeo ou compartilhe-as nas redes sociais com facilidade.
O que torna gsap-video-export diferente de outras soluções é que, em vez de simplesmente gravar uma animação enquanto ela é reproduzida, ele passa pela exportação quadro a quadro para garantir que o resultado seja perfeito.
Apoie este projeto
Ajude a apoiar o trabalho necessário para criar e manter meus projetos e me patrocine por meio dos patrocinadores do GitHub.
gsap-video-export é uma ferramenta de linha de comando que pode ser instalada diretamente via NPM.
npm install -g gsap-video-export
Depois de instalada, a ferramenta pode ser usada conforme o exemplo a seguir.
gsap-video-export <url>
Ao usar URLs CodePen,
gsap-video-exportredirecionará automaticamente para a visualização de depuração da página inteira.
Options:
--help Show help [boolean]
--version Show version number [boolean]
-s, --script [browser] Custom script [string]
-S, --selector [browser] DOM selector [string] [default: "document"]
-t, --timeline [browser] GSAP timeline object [string] [default: "gsap"]
-z, --scale [browser] Scale factor [number] [default: 1]
-V, --viewport [browser] Viewport size [string] [default: "1920x1080"]
-i, --info [browser] Info only
--frame-start [browser] Start frame
--frame-end [browser] End frame
-p, --color [video] Auto padding color [string] [default: "auto"]
-c, --codec [video] Codec [string] [default: "libx264"]
-e, --input-options [video] FFmpeg input options [string]
-E, --output-options [video] FFmpeg output options [string] [default: ""-pix_fmt yuv420p -crf 18""]
-o, --output [video] Filename [string] [default: "video.mp4"]
-f, --fps [video] Framerate [number] [default: 60]
-v, --resolution [video] Output resolution [string] [default: "auto"]
Um grande obrigado a @cassiecodes por me deixar usar suas incríveis canetas GreenSock para demonstrar
gsap-video-export.
Fornecer um URL ao gsap-video-export gerará um arquivo de vídeo 1920x1080 da janela de visualização, percorrendo o objeto da linha do tempo global do GSAP a 60fps .
# Animation by @cassiecodes
gsap-video-export https://codepen.io/cassie-codes/pen/RwGEewq Por padrão, gsap-video-export irá percorrer o objeto de linha do tempo global do GSAP, embora possa haver casos em que você queira especificar qual linha do tempo deseja gravar.
No exemplo abaixo, a linha do tempo global falha devido a um loop infinito.
# Animation by @SeeMax
gsap-video-export https://codepen.io/SeeMax/pen/bGoxMwj Usando o argumento --timeline -t você pode especificar uma variável de linha do tempo diferente para usar.
# Animation by @SeeMax
gsap-video-export https://codepen.io/SeeMax/pen/bGoxMwj -t tl Com o argumento --selector -S você pode especificar um seletor DOM para capturar um elemento específico. O vídeo de saída resultante terá as mesmas dimensões do elemento selecionado.
gsap-video-export também permite executar JavaScript personalizado na página antes que a captura de vídeo comece com o argumento --script -s . Neste exemplo, um arquivo custom.js é fornecido com um snippet para remover o banner de canto do DOM.
// custom.js
document . querySelector ( 'img[alt="HTML5"]' ) . remove ( ) # Animation by GreenSock
gsap-video-export https://codepen.io/GreenSock/pen/DzXpme -S " #featureBox " -s custom.js Neste exemplo, se você visitar a caneta, poderá notar que a animação está fora da tela. Isso não é um problema, pois
gsap-video-exportrolará automaticamente o elemento selecionado para a janela de visualização.
É possível exportar facilmente vídeos para redes sociais como o Twitter. Usando as configurações padrão, gsap-video-export produzirá automaticamente o vídeo em um formato que esteja em conformidade com as especificações de vídeo do Twitter.
Para renderizar seu vídeo na resolução desejada, use o argumento --resolution -v com uma string <width>x<height> . Para Twitter recomendo usar 1080x1080 .
# Video by @cassiecodes
https://codepen.io/cassie-codes/pen/mNWxpL -S svg -v 1080x1080 O exemplo acima selecionará o elemento SVG na página, com o vídeo resultante redimensionado e preenchido automaticamente para 1080x1080 .
Como o elemento SVG em si não tem 1080 pixels em nenhuma direção, ele será ampliado para atingir a resolução desejada, perdendo qualidade.
Usando --scale -z você pode fornecer um fator de escala que permite capturar o elemento em uma resolução muito mais alta, resultando em melhor qualidade de vídeo.
# Video by @cassiecodes
https://codepen.io/cassie-codes/pen/mNWxpL -S svg -v 1080x1080 -z 2 gsap-video-export detectará automaticamente a cor de fundo para preencher automaticamente a animação.
Ele usa o primeiro pixel do primeiro quadro para determinar a cor do fundo. Você pode substituir isso com
--color-pe fornecer um valor hexadecimal personalizado.
# Video by @cassiecodes
https://codepen.io/cassie-codes/pen/VwZBjRq -S svg -z 2 -v 1080x1080*Ao criar um vídeo com a configuração true lossless
-crf 0ele preservará o espaço de cores dos PNGs de origem e não será compatível com alguns reprodutores de mídia.
Para compatibilidade, simplesmente definir a melhor configuração com perdas-crf 1é suficiente para criar um vídeo quase sem perdas que seja compatível com a maioria dos reprodutores de mídia.
O argumento --output-options -E usará uma string entre aspas duplas de argumentos de saída do FFmpeg para permitir muita flexibilidade na renderização final.
# Video by @cassiecodes
gsap-video-export https://codepen.io/cassie-codes/pen/VweQjBw -S svg -z 2 -v 1920x1080 -E ' "-pix_fmt yuv420p -crf 1" ' Por que meu vídeo falha com o erro de duração INFINITE ?
Isso pode acontecer em alguns vídeos em que a linha do tempo selecionada se repete infinitamente e o GSAP informa uma duração de milhares de horas.
gsap-video-export não tentará capturar nenhum vídeo durante uma hora e reportará o erro INFINITE .
Como posso desativar outros elementos na tela?
Você pode fornecer um arquivo .js personalizado com o argumento --script que é executado antes do início da captura, permitindo manipular o DOM.
Por que meu vídeo não é renderizado conforme o esperado?
gsap-video-export funciona percorrendo manualmente a linha do tempo especificada, exportando cada quadro individual. Como regra geral, se você puder percorrer sua linha do tempo manualmente, não terá problemas.
Se você estiver acionando animações que não estão bloqueadas na linha do tempo, esta pode não ser a ferramenta certa para o trabalho.
Por que minha linha do tempo falha?
gsap-video-export pode acessar variáveis let e const com escopo de bloco e variáveis no escopo global. Se a sua variável da linha do tempo não estiver exposta nesse nível, gsap-video-export não poderá acessá-la.
Considere mover sua linha do tempo para um escopo que a ferramenta possa acessar.
Se você achar este projeto útil, considere me patrocinar no GitHub Sponsors e ajude a apoiar o trabalho necessário para criar e manter meus projetos.
Os patrocinadores podem remover a mensagem de suporte do projeto de todos os meus projetos CLI, bem como acessar outras vantagens adicionais.
Chris Johnson - defaced.dev - @defaced
