gsap video export
1.0.4
GreenSock (GSAP) アニメーションを巧みかつ簡単にビデオにエクスポートします。
gsap-video-export GreenSock (GSAP) アニメーションをビデオにエクスポートするためのシンプルなツールです。使い慣れたお気に入りのフレームワークを使用してビデオ アニメーションを作成し、ビデオ プロジェクトで使用したり、ソーシャル メディアで簡単に共有したりできます。
gsap-video-export他のソリューションと異なる点は、再生中のアニメーションを単に記録するのではなく、結果がシームレスになるようにフレームごとにエクスポートすることです。
このプロジェクトを支援する
私のプロジェクトの作成と維持にかかる作業をサポートし、GitHub スポンサーを通じて私をスポンサーしてください。
gsap-video-export NPM 経由で直接インストールできるコマンド ライン ツールです。
npm install -g gsap-video-export
ツールをインストールすると、次の例のように使用できるようになります。
gsap-video-export <url>
CodePen URL を使用すると、
gsap-video-export自動的にページ全体のデバッグ プレビューにリダイレクトされます。
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"]
素晴らしい GreenSock ペンを使用して
gsap-video-exportデモンストレーションできるようにしてくれた @cassiecodes に多大な感謝を申し上げます。
gsap-video-exportに URL を指定すると、ビューポートの1920x1080ビデオ ファイルが生成され、GSAP グローバル タイムライン オブジェクトを60fpsでスクラブします。
# Animation by @cassiecodes
gsap-video-export https://codepen.io/cassie-codes/pen/RwGEewqデフォルトでは、 gsap-video-exportグローバル GSAP タイムライン オブジェクトをスクラブしますが、記録するタイムラインを指定する必要がある場合もあります。
以下の例では、無限ループが原因でグローバル タイムラインが失敗します。
# Animation by @SeeMax
gsap-video-export https://codepen.io/SeeMax/pen/bGoxMwj --timeline -t引数を使用すると、代わりに使用する別のタイムライン変数を指定できます。
# Animation by @SeeMax
gsap-video-export https://codepen.io/SeeMax/pen/bGoxMwj -t tl--selector -S引数を使用すると、特定の要素をキャプチャするための DOM セレクターを指定できます。結果として得られる出力ビデオは、選択した要素と同じサイズになります。
gsap-video-export使用すると、 --script -s引数を使用してビデオ キャプチャを開始する前に、ページ上でカスタム JavaScript を実行することもできます。この例では、 custom.jsファイルには、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 この例では、ペンにアクセスすると、アニメーションが画面外にあることに気づくかもしれません。
gsap-video-export選択した要素をビューポート内に自動的にスクロールするため、これは問題ではありません。
Twitterなどのソーシャルメディア用に簡単に動画をエクスポートすることが可能です。デフォルト設定のgsap-video-export使用すると、Twitter のビデオ仕様に準拠した形式でビデオが自動的に出力されます。
ビデオを希望の解像度でレンダリングするには、 --resolution -v引数と<width>x<height>文字列を使用します。 Twitter の場合は1080x1080使用することをお勧めします。
# Video by @cassiecodes
https://codepen.io/cassie-codes/pen/mNWxpL -S svg -v 1080x1080上の例では、ページ上のSVG要素を選択し、結果のビデオのサイズが変更され、自動的に1080x1080にパディングされます。
SVG要素自体はどちらの方向でも 1080 ピクセルではないため、最終的にはターゲット解像度に達するまでスケールアップされ、品質が失われます。
--scale -zを使用すると、スケール係数を指定できるため、より高い解像度で要素をキャプチャできるため、ビデオ品質が向上します。
# Video by @cassiecodes
https://codepen.io/cassie-codes/pen/mNWxpL -S svg -v 1080x1080 -z 2gsap-video-exportアニメーションを自動埋め込む背景色を自動的に検出します。
最初のフレームの最初のピクセルを使用して背景の色を決定します。
--color-pでこれをオーバーライドし、カスタムの 16 進値を指定できます。
# Video by @cassiecodes
https://codepen.io/cassie-codes/pen/VwZBjRq -S svg -z 2 -v 1080x1080*真のロスレス設定
-crf 0でビデオを作成すると、ソース PNG の色空間が保持され、一部のメディア プレーヤーと互換性がなくなります。
互換性を確保するには、単に最高の非可逆設定-crf 1を設定するだけで、ほとんどのメディア プレーヤーと互換性のあるほぼ無損失のビデオを作成できます。
--output-options -E引数は、二重引用符で囲まれた FFmpeg 出力引数の文字列を受け取り、最終的なレンダリングに多くの柔軟性を与えます。
# 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" 'ビデオが再生時間エラーINFINITEで失敗するのはなぜですか?
これは、選択したタイムラインが無限に繰り返され、GSAP が数千時間の長さを報告する一部のビデオで発生する可能性があります。
gsap-video-export 1 時間を超えるビデオのキャプチャを試行せず、 INFINITEエラーを報告します。
画面上の他の要素を無効にするにはどうすればよいですか?
--script引数を指定してカスタム .js ファイルを指定すると、キャプチャが開始される前に実行され、DOM を操作できるようになります。
私のビデオが期待どおりにレンダリングされないのはなぜですか?
gsap-video-export指定されたタイムラインを手動でステップ実行して、個々のフレームをエクスポートすることで機能します。経験則として、タイムラインを手動でスクラブできる場合は、問題は発生しません。
タイムラインにロックされていないアニメーションをトリガーしている場合、これはそのジョブには適切なツールではない可能性があります。
タイムラインが失敗するのはなぜですか?
gsap-video-exportブロック スコープのlet変数とconst変数、およびグローバル スコープの変数にアクセスできます。タイムライン変数がそのレベルで公開されていない場合、 gsap-video-exportそれにアクセスできません。
ツールがアクセスできるスコープにタイムラインを移動することを検討してください。
このプロジェクトが役立つと思われる場合は、GitHub Sponsors で私をスポンサーすることを検討し、私のプロジェクトの作成と維持にかかる作業のサポートにご協力ください。
スポンサーは、私のすべての CLI プロジェクトからプロジェクト サポート メッセージを削除したり、他の追加の特典にアクセスしたりすることができます。
Chris Johnson - defaced.dev - @defaced
