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"]
非常感謝 @cassiecodes 讓我使用她令人難以置信的 GreenSock 筆來演示
gsap-video-export。
為gsap-video-export提供 URL 將產生視口的1920x1080視訊文件，以60fps擦洗 GSAP 全域時間軸物件。
# 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覆寫它並提供自訂十六進位值。
# 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不會嘗試捕獲超過一小時的任何視頻，並會報告INFINITE錯誤。
如何停用螢幕上的其他元素？
您可以提供帶有--script參數的自訂 .js 文件，該文件在捕獲開始之前運行，使您能夠操作 DOM。
為什麼我的影片沒有如預期呈現？
gsap-video-export工作原理是手動逐步通過指定的時間軸導出每個單獨的幀。根據經驗，如果您可以手動清理時間線，就不會有任何問題。
如果您觸發的動畫未鎖定到時間軸，那麼這可能不是適合該工作的工具。
為什麼我的時間線失敗了？
gsap-video-export可以存取區塊作用域的let和const變數以及全域作用域上的變數。如果您的時間軸變數未在該層級公開，則gsap-video-export將無法存取它。
考慮將時間軸移動到該工具可以存取的範圍。
如果您發現這個專案有用，請考慮在 GitHub Sponsors 上贊助我，並幫助支持創建和維護我的專案的工作。
贊助商可以從我的所有 CLI 專案中刪除專案支援訊息，並獲得其他額外福利。
克里斯約翰遜 - defaced.dev - @defaced
