gsap video export
1.0.4
Exportez de manière experte et facile l’animation GreenSock (GSAP) vers la vidéo.
gsap-video-export est un outil simple pour exporter vos animations GreenSock (GSAP) vers la vidéo. Créez des animations vidéo avec le framework que vous connaissez et aimez et utilisez-les dans vos projets vidéo ou partagez-les facilement sur les réseaux sociaux.
Ce qui différencie gsap-video-export des autres solutions, c'est que plutôt que de simplement enregistrer une animation pendant sa lecture, il procède plutôt à l'exportation image par image pour garantir la transparence du résultat.
Soutenez ce projet
Aidez-moi à soutenir le travail nécessaire à la création et à la maintenance de mes projets et parrainez-moi via les sponsors GitHub.
gsap-video-export est un outil de ligne de commande qui peut être installé directement via NPM.
npm install -g gsap-video-export
Une fois installé, l'outil peut être utilisé selon l'exemple suivant.
gsap-video-export <url>
Lors de l'utilisation des URL CodePen,
gsap-video-exportsera automatiquement redirigé vers l'aperçu de débogage pleine page.
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"]
Un immense merci à @cassiecodes de m'avoir permis d'utiliser ses incroyables stylos GreenSock pour faire la démonstration
gsap-video-export.
Fournir à gsap-video-export une URL générera un fichier vidéo 1920x1080 de la fenêtre d'affichage, parcourant l'objet de chronologie globale GSAP à 60fps .
# Animation by @cassiecodes
gsap-video-export https://codepen.io/cassie-codes/pen/RwGEewq Par défaut, gsap-video-export parcourra l'objet de chronologie GSAP global, bien qu'il puisse y avoir des cas où vous souhaitez spécifier la chronologie que vous souhaitez enregistrer.
Dans l'exemple ci-dessous, la chronologie globale échoue en raison d'une boucle infinie.
# Animation by @SeeMax
gsap-video-export https://codepen.io/SeeMax/pen/bGoxMwj En utilisant l'argument --timeline -t , vous pouvez spécifier une autre variable de chronologie à utiliser à la place.
# Animation by @SeeMax
gsap-video-export https://codepen.io/SeeMax/pen/bGoxMwj -t tl Avec l'argument --selector -S vous pouvez spécifier un sélecteur DOM pour capturer un élément spécifique. La vidéo de sortie résultante aura les mêmes dimensions que l'élément sélectionné.
gsap-video-export vous permet également d'exécuter du JavaScript personnalisé sur la page avant le début de la capture vidéo avec l'argument --script -s . Dans cet exemple, un fichier custom.js est fourni avec un extrait pour supprimer la bannière de coin du 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 Dans cet exemple, si vous visitez le stylo, vous remarquerez peut-être que l'animation est hors écran. Ce n'est pas un problème car
gsap-video-exportfera automatiquement défiler l'élément sélectionné dans la fenêtre.
Il est possible d'exporter facilement des vidéos pour les réseaux sociaux tels que Twitter. En utilisant les paramètres par défaut, gsap-video-export produira automatiquement la vidéo dans un format conforme aux spécifications vidéo de Twitter.
Pour restituer votre vidéo à la résolution souhaitée, utilisez l'argument --resolution -v avec une chaîne <width>x<height> . Pour Twitter, je recommande d'utiliser 1080x1080 .
# Video by @cassiecodes
https://codepen.io/cassie-codes/pen/mNWxpL -S svg -v 1080x1080 L'exemple ci-dessus sélectionnera l'élément SVG sur la page, avec la vidéo résultante redimensionnée et automatiquement complétée à 1080x1080 .
Comme l'élément SVG lui-même ne fait pas 1080 pixels dans les deux sens, il sera finalement mis à l'échelle pour atteindre la résolution cible, perdant en qualité.
En utilisant --scale -z vous pouvez fournir un facteur d'échelle vous permettant de capturer l'élément à une résolution beaucoup plus élevée, ce qui entraîne une meilleure qualité vidéo.
# Video by @cassiecodes
https://codepen.io/cassie-codes/pen/mNWxpL -S svg -v 1080x1080 -z 2 gsap-video-export détectera automatiquement la couleur d'arrière-plan avec laquelle remplir automatiquement l'animation.
Il utilise le premier pixel de la première image pour déterminer la couleur de l'arrière-plan. Vous pouvez remplacer cela avec
--color-pet fournir une valeur hexadécimale personnalisée.
# Video by @cassiecodes
https://codepen.io/cassie-codes/pen/VwZBjRq -S svg -z 2 -v 1080x1080*Lors de la création d'une vidéo avec le véritable paramètre sans perte
-crf 0cela préservera l'espace colorimétrique des PNG sources et ne sera pas compatible avec certains lecteurs multimédias.
Pour des raisons de compatibilité, il suffit de définir le meilleur paramètre avec perte-crf 1pour créer une vidéo presque sans perte, compatible avec la plupart des lecteurs multimédias.
L'argument --output-options -E prendra une chaîne d'arguments de sortie FFmpeg entre guillemets pour permettre une grande flexibilité sur le rendu 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" ' Pourquoi ma vidéo échoue-t-elle avec l'erreur de durée INFINITE ?
Cela peut se produire sur certaines vidéos où la chronologie sélectionnée se répète à l'infini et GSAP signale une durée en milliers d'heures.
gsap-video-export ne tentera pas de capturer de vidéo pendant plus d'une heure et signalera l'erreur INFINITE .
Comment puis-je désactiver d'autres éléments à l'écran ?
Vous pouvez fournir un fichier .js personnalisé avec l'argument --script qui s'exécute avant le début de la capture, vous donnant la possibilité de manipuler le DOM.
Pourquoi ma vidéo ne s'affiche-t-elle pas comme prévu ?
gsap-video-export fonctionne en parcourant manuellement la chronologie spécifiée en exportant chaque image individuelle. En règle générale, si vous pouvez parcourir votre chronologie manuellement, vous n'aurez aucun problème.
Si vous déclenchez des animations qui ne sont pas verrouillées sur la chronologie, cet outil n'est peut-être pas adapté à votre travail.
Pourquoi mon calendrier échoue-t-il ?
gsap-video-export peut accéder aux variables let et const de portée bloc et aux variables sur la portée globale. Si votre variable de chronologie n'est pas exposée à ce niveau, gsap-video-export ne pourra pas y accéder.
Pensez à déplacer votre chronologie vers une portée à laquelle l'outil peut accéder.
Si vous trouvez ce projet utile, envisagez de me parrainer sur GitHub Sponsors et aidez à soutenir le travail nécessaire à la création et à la maintenance de mes projets.
Les sponsors peuvent supprimer le message de support du projet de tous mes projets CLI, ainsi qu'accéder à d'autres avantages supplémentaires.
Chris Johnson - defaced.dev - @defaced
