gsap video export
1.0.4
Ekspor animasi GreenSock (GSAP) ke video dengan ahli dan mudah.
gsap-video-export adalah alat sederhana untuk mengekspor animasi GreenSock (GSAP) Anda ke video. Buat animasi video dengan kerangka yang Anda kenal dan sukai dan gunakan dalam proyek video Anda atau bagikan di media sosial dengan mudah.
Apa yang membuat gsap-video-export berbeda dari solusi lain adalah bahwa gsap-video-export tidak sekadar merekam animasi saat diputar, melainkan mengekspor frame demi frame untuk memastikan hasilnya mulus.
Dukung proyek ini
Bantu dukung pekerjaan dalam membuat dan memelihara proyek saya dan mensponsori saya melalui GitHub Sponsor.
gsap-video-export adalah alat baris perintah yang dapat diinstal langsung melalui NPM.
npm install -g gsap-video-export
Setelah diinstal, alat ini dapat digunakan seperti contoh berikut.
gsap-video-export <url>
Saat menggunakan URL CodePen,
gsap-video-exportakan secara otomatis dialihkan ke pratinjau debug halaman penuh.
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"]
Terima kasih banyak kepada @cassiecodes karena mengizinkan saya menggunakan pena GreenSock miliknya yang luar biasa untuk mendemonstrasikan
gsap-video-export.
Menyediakan gsap-video-export dengan URL akan menghasilkan file video viewport 1920x1080 , yang menelusuri objek garis waktu global GSAP pada 60fps .
# Animation by @cassiecodes
gsap-video-export https://codepen.io/cassie-codes/pen/RwGEewq Secara default, gsap-video-export akan menelusuri objek linimasa GSAP global, meskipun ada kalanya Anda ingin menentukan linimasa mana yang ingin Anda rekam.
Pada contoh di bawah, timeline global gagal karena loop tak terbatas.
# Animation by @SeeMax
gsap-video-export https://codepen.io/SeeMax/pen/bGoxMwj Dengan menggunakan argumen --timeline -t Anda dapat menentukan variabel timeline lain yang akan digunakan.
# Animation by @SeeMax
gsap-video-export https://codepen.io/SeeMax/pen/bGoxMwj -t tl Dengan argumen --selector -S Anda dapat menentukan pemilih DOM untuk menangkap elemen tertentu. Video keluaran yang dihasilkan akan memiliki dimensi yang sama dengan elemen yang dipilih.
gsap-video-export juga memungkinkan Anda menjalankan JavaScript khusus pada halaman sebelum pengambilan video dimulai dengan argumen --script -s . Dalam contoh ini, file custom.js disertakan dengan cuplikan untuk menghapus spanduk sudut dari 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 Dalam contoh ini jika Anda mengunjungi pena, Anda mungkin melihat animasinya berada di luar layar. Ini bukan masalah karena
gsap-video-exportakan secara otomatis menggulir elemen yang dipilih ke dalam area pandang.
Dimungkinkan untuk dengan mudah mengekspor video untuk media sosial seperti Twitter. Menggunakan pengaturan default gsap-video-export akan secara otomatis mengeluarkan video dalam format yang sesuai dengan spesifikasi video Twitter.
Untuk merender video Anda pada resolusi yang diinginkan, gunakan argumen --resolution -v dengan string <width>x<height> . Untuk Twitter saya sarankan menggunakan 1080x1080 .
# Video by @cassiecodes
https://codepen.io/cassie-codes/pen/mNWxpL -S svg -v 1080x1080 Contoh di atas akan memilih elemen SVG pada halaman, dan video yang dihasilkan diubah ukurannya dan secara otomatis ditambahkan ke 1080x1080 .
Karena elemen SVG itu sendiri tidak memiliki resolusi 1080 piksel di kedua arah, elemen tersebut pada akhirnya akan ditingkatkan untuk mencapai resolusi target sehingga kehilangan kualitas.
Dengan menggunakan --scale -z Anda dapat menyediakan faktor skala yang memungkinkan Anda menangkap elemen pada resolusi yang jauh lebih tinggi sehingga menghasilkan kualitas video yang lebih baik.
# Video by @cassiecodes
https://codepen.io/cassie-codes/pen/mNWxpL -S svg -v 1080x1080 -z 2 gsap-video-export akan secara otomatis mendeteksi warna latar belakang untuk melakukan autopad animasi.
Ia menggunakan piksel pertama dari frame pertama untuk menentukan warna latar belakang. Anda dapat menimpanya dengan
--color-pdan memberikan nilai hex khusus.
# Video by @cassiecodes
https://codepen.io/cassie-codes/pen/VwZBjRq -S svg -z 2 -v 1080x1080*Saat membuat video dengan pengaturan true lossless
-crf 0ruang warna PNG sumber akan dipertahankan dan tidak akan kompatibel dengan beberapa pemutar media.
Untuk kompatibilitas, cukup dengan menyetel pengaturan lossy terbaik-crf 1sudah cukup untuk membuat video nyaris lossless yang kompatibel dengan sebagian besar pemutar media.
Argumen --output-options -E akan mengambil string argumen keluaran FFmpeg yang dikutip ganda untuk memungkinkan banyak fleksibilitas pada render akhir.
# 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" ' Mengapa video saya gagal dengan error durasi INFINITE ?
Hal ini dapat terjadi pada beberapa video yang linimasa yang dipilih berulang tanpa batas dan GSAP melaporkan durasinya dalam ribuan jam.
gsap-video-export tidak akan mencoba merekam video apa pun selama lebih dari satu jam dan akan melaporkan kesalahan INFINITE .
Bagaimana cara menonaktifkan elemen lain di layar?
Anda dapat menyediakan file .js khusus dengan argumen --script yang dijalankan sebelum pengambilan dimulai sehingga memberi Anda kemampuan untuk memanipulasi DOM.
Mengapa video saya tidak ditampilkan seperti yang diharapkan?
gsap-video-export bekerja dengan menelusuri timeline yang ditentukan secara manual dan mengekspor setiap frame individual. Sebagai aturan praktis, jika Anda dapat menelusuri timeline secara manual, Anda tidak akan mengalami masalah apa pun.
Jika Anda memicu animasi yang tidak dikunci pada timeline maka ini mungkin bukan alat yang tepat untuk pekerjaan tersebut.
Mengapa timeline saya gagal?
gsap-video-export dapat mengakses variabel let dan const dalam cakupan blok serta variabel dalam cakupan global. Jika variabel timeline Anda tidak terekspos pada level tersebut maka gsap-video-export tidak akan dapat mengaksesnya.
Pertimbangkan untuk memindahkan timeline Anda ke cakupan yang dapat diakses oleh alat tersebut.
Jika menurut Anda proyek ini bermanfaat, harap pertimbangkan untuk mensponsori saya di GitHub Sponsors dan membantu mendukung pekerjaan yang dilakukan dalam pembuatan dan pemeliharaan proyek saya.
Sponsor dapat menghapus pesan dukungan proyek dari semua proyek CLI saya, serta mengakses fasilitas tambahan lainnya.
Chris Johnson - dirusak.dev - @dirusak
