gsap video export
1.0.4
Exporte de forma experta y sencilla la animación GreenSock (GSAP) a vídeo.
gsap-video-export es una herramienta sencilla para exportar sus animaciones GreenSock (GSAP) a vídeo. Crea animaciones de vídeo con el marco que conoces y amas y úsalas en tus proyectos de vídeo o compártelas en las redes sociales con facilidad.
Lo que diferencia gsap-video-export de otras soluciones es que, en lugar de simplemente grabar una animación mientras se reproduce, avanza paso a paso para exportar cuadro por cuadro para garantizar que el resultado sea perfecto.
Apoya este proyecto
Ayude a respaldar el trabajo que implica crear y mantener mis proyectos y patrocineme a través de Patrocinadores de GitHub.
gsap-video-export es una herramienta de línea de comandos que se puede instalar directamente a través de NPM.
npm install -g gsap-video-export
Una vez instalada, la herramienta se puede utilizar según el siguiente ejemplo.
gsap-video-export <url>
Al utilizar URL de CodePen,
gsap-video-exportredirigirá automáticamente a la vista previa de depuración de la página completa.
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"]
Muchas gracias a @cassiecodes por permitirme usar sus increíbles bolígrafos GreenSock para demostrar
gsap-video-export.
Al proporcionar una URL a gsap-video-export se generará un archivo de vídeo 1920x1080 de la ventana gráfica, que recorrerá el objeto de la línea de tiempo global de GSAP a 60fps .
# Animation by @cassiecodes
gsap-video-export https://codepen.io/cassie-codes/pen/RwGEewq De forma predeterminada, gsap-video-export recorrerá el objeto de línea de tiempo global de GSAP, aunque puede haber casos en los que desee especificar qué línea de tiempo desea grabar.
En el siguiente ejemplo, la línea de tiempo global falla debido a un bucle infinito.
# Animation by @SeeMax
gsap-video-export https://codepen.io/SeeMax/pen/bGoxMwj Usando el argumento --timeline -t puedes especificar una variable de línea de tiempo diferente para usar en su lugar.
# Animation by @SeeMax
gsap-video-export https://codepen.io/SeeMax/pen/bGoxMwj -t tl Con el argumento --selector -S puedes especificar un selector DOM para capturar un elemento específico. El vídeo de salida resultante tendrá las mismas dimensiones que el elemento seleccionado.
gsap-video-export también le permite ejecutar JavaScript personalizado en la página antes de que comience la captura de video con el argumento --script -s . En este ejemplo, se proporciona un archivo custom.js con un fragmento para eliminar el banner de la esquina del 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 En este ejemplo, si visita el lápiz, podrá notar que la animación está fuera de la pantalla. Esto no es un problema ya que
gsap-video-exportdesplazará automáticamente el elemento seleccionado a la ventana gráfica.
Es posible exportar fácilmente vídeos para redes sociales como Twitter. Usando la configuración predeterminada, gsap-video-export generará automáticamente el video en un formato que cumpla con las especificaciones de video de Twitter.
Para renderizar su video con la resolución deseada, use el argumento --resolution -v con una cadena <width>x<height> . Para Twitter recomiendo usar 1080x1080 .
# Video by @cassiecodes
https://codepen.io/cassie-codes/pen/mNWxpL -S svg -v 1080x1080 El ejemplo anterior seleccionará el elemento SVG en la página, y el vídeo resultante cambiará de tamaño y se rellenará automáticamente a 1080x1080 .
Como el elemento SVG en sí no tiene 1080 píxeles en ninguna dirección, finalmente se ampliará para alcanzar la resolución objetivo perdiendo calidad.
Usando --scale -z puede proporcionar un factor de escala que le permita capturar el elemento a una resolución mucho más alta, lo que resulta en una mejor calidad de video.
# Video by @cassiecodes
https://codepen.io/cassie-codes/pen/mNWxpL -S svg -v 1080x1080 -z 2 gsap-video-export detectará automáticamente el color de fondo para rellenar automáticamente la animación.
Utiliza el primer píxel del primer fotograma para determinar el color del fondo. Puede anular esto con
--color-py proporcionar un valor hexadecimal personalizado.
# Video by @cassiecodes
https://codepen.io/cassie-codes/pen/VwZBjRq -S svg -z 2 -v 1080x1080*Al crear un vídeo con la configuración verdadera sin pérdidas
-crf 0se preservará el espacio de color de los archivos PNG de origen y no será compatible con algunos reproductores multimedia.
Para compatibilidad, simplemente establecer la mejor configuración con pérdida-crf 1es suficiente para crear un video casi sin pérdidas que sea compatible con la mayoría de los reproductores multimedia.
El argumento --output-options -E tomará una cadena entre comillas dobles de argumentos de salida de FFmpeg para permitir mucha flexibilidad en el renderizado 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 qué mi video falla con el error de duración INFINITE ?
Esto puede suceder en algunos videos donde la línea de tiempo seleccionada se repite infinitamente y GSAP informa una duración de miles de horas.
gsap-video-export no intentará capturar ningún video durante una hora e informará el error INFINITE .
¿Cómo puedo desactivar otros elementos en pantalla?
Puede proporcionar un archivo .js personalizado con el argumento --script que se ejecuta antes de que comience la captura, lo que le brinda la posibilidad de manipular el DOM.
¿Por qué mi video no se reproduce como se esperaba?
gsap-video-export funciona avanzando manualmente a través de la línea de tiempo especificada exportando cada fotograma individual. Como regla general, si puedes revisar tu línea de tiempo manualmente, no tendrás ningún problema.
Si está activando animaciones que no están bloqueadas en la línea de tiempo, es posible que esta no sea la herramienta adecuada para el trabajo.
¿Por qué falla mi cronograma?
gsap-video-export puede acceder a variables let y const con ámbito de bloque y variables en el ámbito global. Si su variable de línea de tiempo no está expuesta en ese nivel, gsap-video-export no podrá acceder a ella.
Considere mover su línea de tiempo a un ámbito al que pueda acceder la herramienta.
Si encuentra útil este proyecto, considere patrocinarme en GitHub Sponsors y ayúdeme a respaldar el trabajo relacionado con la creación y el mantenimiento de mis proyectos.
Los patrocinadores pueden eliminar el mensaje de soporte del proyecto de todos mis proyectos CLI, así como acceder a otros beneficios adicionales.
Chris Johnson - defaced.dev - @defaced
