หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

gsap-วิดีโอ-ส่งออก

ส่งออกภาพเคลื่อนไหว 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 ของวิวพอร์ต โดยจะสครับผ่านออบเจ็กต์ไทม์ไลน์ส่วนกลางของ GSAP ที่ 60fps 

 # Animation by @cassiecodes
gsap-video-export https://codepen.io/cassie-codes/pen/RwGEewq
RwGEewq.mp4

ไทม์ไลน์ที่กำหนดเอง

โดยค่าเริ่มต้น 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
bGoxMwj.mp4

ส่งออกองค์ประกอบ

ด้วยอาร์กิวเมนต์ --selector -S คุณสามารถระบุตัวเลือก DOM เพื่อจับภาพองค์ประกอบเฉพาะได้ วิดีโอเอาต์พุตที่ได้จะมีขนาดเดียวกับองค์ประกอบที่เลือก

gsap-video-export ยังช่วยให้คุณเรียกใช้ JavaScript ที่กำหนดเองบนหน้าเว็บก่อนที่การจับภาพวิดีโอจะเริ่มต้นด้วยอาร์กิวเมนต์ --script -s ในตัวอย่างนี้ ไฟล์ 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
DzXpme.mp4

ทวิตเตอร์ส่งออก

ในตัวอย่างนี้ หากคุณไปที่ปากกา คุณอาจสังเกตเห็นว่าภาพเคลื่อนไหวอยู่นอกหน้าจอ นี่ไม่ใช่ปัญหาเนื่องจาก 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 นั้นไม่ได้มีความละเอียด 1,080 พิกเซลในทิศทางใดทิศทางหนึ่ง องค์ประกอบดังกล่าวจึงจะถูกขยายขนาดเพื่อให้ได้ความละเอียดเป้าหมายที่สูญเสียคุณภาพในที่สุด

การใช้ --scale -z ช่วยให้คุณสามารถระบุสเกลแฟคเตอร์เพื่อให้คุณสามารถจับภาพองค์ประกอบด้วยความละเอียดสูงกว่ามาก ส่งผลให้วิดีโอมีคุณภาพดีขึ้น 

 # Video by @cassiecodes
https://codepen.io/cassie-codes/pen/mNWxpL -S svg -v 1080x1080 -z 2
mNWxpL.mp4

พื้นหลังสี

gsap-video-export จะตรวจจับสีพื้นหลังโดยอัตโนมัติเพื่อใช้วางภาพเคลื่อนไหวโดยอัตโนมัติ

โดยจะใช้พิกเซลแรกของเฟรมแรกเพื่อกำหนดสีของพื้นหลัง คุณสามารถแทนที่สิ่งนี้ด้วย --color -p และระบุค่าเลขฐานสิบหกที่กำหนดเอง 

 # Video by @cassiecodes
https://codepen.io/cassie-codes/pen/VwZBjRq -S svg -z 2 -v 1080x1080
VwZBjRq.mp4

ส่งออกแบบไม่สูญเสีย*

*เมื่อสร้างวิดีโอด้วยการตั้งค่าแบบไม่สูญเสียข้อมูลที่แท้จริง -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" '
VweQjBw.mp4

คำถามที่พบบ่อย

เหตุใดวิดีโอของฉันจึงล้มเหลวโดยมีข้อผิดพลาดเรื่องระยะเวลา INFINITE

กรณีนี้อาจเกิดขึ้นได้กับวิดีโอบางรายการที่มีไทม์ไลน์ที่เลือกซ้ำอย่างไม่สิ้นสุด และ GSAP จะรายงานระยะเวลาเป็นพันชั่วโมง

gsap-video-export จะไม่พยายามจับภาพวิดีโอใดๆ เกินหนึ่งชั่วโมง และจะรายงานข้อผิดพลาด INFINITE

ฉันจะปิดการใช้งานองค์ประกอบอื่นๆ บนหน้าจอได้อย่างไร

คุณสามารถจัดหาไฟล์ .js ที่กำหนดเองพร้อมกับอาร์กิวเมนต์ --script ซึ่งทำงานก่อนที่การจับภาพจะเริ่มขึ้น ทำให้คุณสามารถจัดการ DOM ได้

เหตุใดวิดีโอของฉันจึงไม่แสดงผลตามที่คาดไว้

gsap-video-export ทำงานโดยการก้าวด้วยตนเองผ่านไทม์ไลน์ที่ระบุเพื่อส่งออกแต่ละเฟรม ตามหลักทั่วไปแล้ว หากคุณสามารถเลื่อนดูไทม์ไลน์ด้วยตนเองได้ คุณจะไม่มีปัญหาใดๆ เลย

หากคุณกำลังเรียกใช้ภาพเคลื่อนไหวที่ไม่ได้ล็อคไว้กับไทม์ไลน์ นี่อาจไม่ใช่เครื่องมือที่เหมาะสมสำหรับงาน

ทำไมไทม์ไลน์ของฉันถึงล้มเหลว?

gsap-video-export สามารถเข้าถึง let และ const ในขอบเขตส่วนกลางของบล็อก หากตัวแปรไทม์ไลน์ของคุณไม่เปิดเผยในระดับนั้น gsap-video-export จะไม่สามารถเข้าถึงได้

ลองย้ายไทม์ไลน์ของคุณไปยังขอบเขตที่เครื่องมือสามารถเข้าถึงได้

สปอนเซอร์

หากคุณพบว่าโครงการนี้มีประโยชน์ โปรดพิจารณาสนับสนุนฉันในผู้สนับสนุน GitHub และช่วยสนับสนุนงานที่เกี่ยวข้องกับการสร้างและบำรุงรักษาโครงการของฉัน

โบนัส

ผู้สนับสนุนสามารถลบข้อความสนับสนุนโปรเจ็กต์ออกจากโปรเจ็กต์ CLI ของฉันทั้งหมดได้ รวมถึงเข้าถึงสิทธิประโยชน์เพิ่มเติมอื่นๆ ได้

ผู้เขียน

คริส จอห์นสัน - defaced.dev - @defaced

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด