gsap video export
1.0.4
Exportieren Sie GreenSock-Animationen (GSAP) fachmännisch und einfach in Videos.
gsap-video-export ist ein einfaches Tool zum Exportieren Ihrer GreenSock (GSAP)-Animationen als Video. Erstellen Sie Videoanimationen mit dem Framework, das Sie kennen und lieben, und verwenden Sie sie in Ihren Videoprojekten oder teilen Sie sie ganz einfach in sozialen Medien.
Der Unterschied zwischen gsap-video-export und anderen Lösungen besteht darin, dass die Animation nicht einfach während der Wiedergabe aufgezeichnet wird, sondern Schritt für Schritt durch den Export geht, um sicherzustellen, dass das Ergebnis nahtlos ist.
Unterstützen Sie dieses Projekt
Unterstützen Sie die Arbeit, die in die Erstellung und Pflege meiner Projekte fließt, und sponsern Sie mich über GitHub-Sponsoren.
gsap-video-export ist ein Kommandozeilentool, das direkt über NPM installiert werden kann.
npm install -g gsap-video-export
Nach der Installation kann das Tool wie im folgenden Beispiel verwendet werden.
gsap-video-export <url>
Bei Verwendung von CodePen-URLs leitet
gsap-video-exportautomatisch zur ganzseitigen Debug-Vorschau weiter.
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"]
Ein großes Dankeschön an @cassiecodes, dass ich ihre unglaublichen GreenSock-Stifte verwenden durfte, um
gsap-video-exportzu demonstrieren.
Wenn Sie gsap-video-export mit einer URL angeben, wird eine 1920x1080 Videodatei des Ansichtsfensters generiert, die mit 60fps pro Sekunde durch das globale GSAP-Timeline-Objekt scrollt.
# Animation by @cassiecodes
gsap-video-export https://codepen.io/cassie-codes/pen/RwGEewq Standardmäßig durchsucht gsap-video-export das globale GSAP-Timeline-Objekt, obwohl es Fälle geben kann, in denen Sie angeben möchten, welche Timeline Sie aufzeichnen möchten.
Im folgenden Beispiel schlägt die globale Zeitleiste aufgrund einer Endlosschleife fehl.
# Animation by @SeeMax
gsap-video-export https://codepen.io/SeeMax/pen/bGoxMwj Mit dem Argument --timeline -t können Sie eine andere Zeitleistenvariable angeben, die stattdessen verwendet werden soll.
# Animation by @SeeMax
gsap-video-export https://codepen.io/SeeMax/pen/bGoxMwj -t tl Mit dem Argument --selector -S können Sie einen DOM-Selektor angeben, um ein bestimmtes Element zu erfassen. Das resultierende Ausgabevideo hat die gleichen Abmessungen wie das ausgewählte Element.
gsap-video-export können Sie außerdem benutzerdefiniertes JavaScript auf der Seite ausführen, bevor die Videoaufnahme mit dem Argument --script -s beginnt. In diesem Beispiel wird eine Datei custom.js mit einem Snippet zum Entfernen des Eckbanners aus dem DOM bereitgestellt.
// 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 Wenn Sie in diesem Beispiel den Stift besuchen, stellen Sie möglicherweise fest, dass die Animation außerhalb des Bildschirms liegt. Dies stellt kein Problem dar, da
gsap-video-exportdas ausgewählte Element automatisch in das Ansichtsfenster scrollt.
Es ist möglich, Videos problemlos für soziale Medien wie Twitter zu exportieren. Mit den Standardeinstellungen gibt gsap-video-export Videos automatisch in einem Format aus, das den Videospezifikationen von Twitter entspricht.
Um Ihr Video mit der gewünschten Auflösung zu rendern, verwenden Sie das Argument --resolution -v mit einer Zeichenfolge <width>x<height> . Für Twitter empfehle ich die Verwendung von 1080x1080 .
# Video by @cassiecodes
https://codepen.io/cassie-codes/pen/mNWxpL -S svg -v 1080x1080 Das obige Beispiel wählt das SVG Element auf der Seite aus, wobei die Größe des resultierenden Videos geändert und automatisch auf 1080x1080 aufgefüllt wird.
Da das SVG Element selbst in keiner Richtung 1080 Pixel hat, wird es letztlich auf die Zielauflösung skaliert und verliert an Qualität.
Mit --scale -z können Sie einen Skalierungsfaktor angeben, der es Ihnen ermöglicht, das Element mit einer viel höheren Auflösung aufzunehmen, was zu einer besseren Videoqualität führt.
# Video by @cassiecodes
https://codepen.io/cassie-codes/pen/mNWxpL -S svg -v 1080x1080 -z 2 gsap-video-export erkennt automatisch die Hintergrundfarbe, mit der die Animation automatisch aufgefüllt wird.
Es verwendet das erste Pixel des ersten Frames, um die Farbe des Hintergrunds zu bestimmen. Sie können dies mit
--color-püberschreiben und einen benutzerdefinierten Hexadezimalwert angeben.
# Video by @cassiecodes
https://codepen.io/cassie-codes/pen/VwZBjRq -S svg -z 2 -v 1080x1080*Beim Erstellen eines Videos mit der echten verlustfreien Einstellung
-crf 0bleibt der Farbraum der Quell-PNGs erhalten und ist mit einigen Mediaplayern nicht kompatibel.
Aus Kompatibilitätsgründen reicht es aus, einfach die beste verlustbehaftete Einstellung-crf 1festzulegen, um ein nahezu verlustfreies Video zu erstellen, das mit den meisten Mediaplayern kompatibel ist.
Das Argument --output-options -E nimmt eine in doppelte Anführungszeichen gesetzte Zeichenfolge von FFmpeg-Ausgabeargumenten an, um beim endgültigen Rendern viel Flexibilität zu ermöglichen.
# 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" ' Warum schlägt mein Video mit dem Dauerfehler INFINITE fehl?
Dies kann bei einigen Videos passieren, bei denen sich die ausgewählte Zeitleiste unendlich wiederholt und GSAP eine Dauer von mehreren Tausend Stunden meldet.
gsap-video-export versucht nicht, Videos aufzunehmen, die länger als eine Stunde dauern, und meldet den INFINITE Fehler.
Wie kann ich andere Elemente auf dem Bildschirm deaktivieren?
Sie können eine benutzerdefinierte .js-Datei mit dem Argument --script bereitstellen, das vor Beginn der Erfassung ausgeführt wird und Ihnen die Möglichkeit gibt, das DOM zu manipulieren.
Warum wird mein Video nicht wie erwartet gerendert?
gsap-video-export funktioniert, indem es manuell durch die angegebene Zeitleiste geht und jedes einzelne Bild exportiert. Als Faustregel gilt, dass Sie keine Probleme haben werden, wenn Sie Ihre Zeitleiste manuell durchsuchen können.
Wenn Sie Animationen auslösen, die nicht an die Timeline gebunden sind, ist dies möglicherweise nicht das richtige Werkzeug für die Aufgabe.
Warum schlägt meine Zeitleiste fehl?
gsap-video-export kann auf blockbasierte let und const Variablen sowie auf Variablen im globalen Bereich zugreifen. Wenn Ihre Timeline-Variable auf dieser Ebene nicht verfügbar ist, kann gsap-video-export nicht darauf zugreifen.
Erwägen Sie, Ihre Zeitleiste in einen Bereich zu verschieben, auf den das Tool zugreifen kann.
Wenn Sie dieses Projekt nützlich finden, denken Sie bitte darüber nach, mich auf GitHub Sponsors zu sponsern und die Arbeit zu unterstützen, die in die Erstellung und Pflege meiner Projekte fließt.
Sponsoren können die Projektunterstützungsnachricht aus allen meinen CLI-Projekten entfernen und auf andere zusätzliche Vergünstigungen zugreifen.
Chris Johnson – defaced.dev – @defaced
