تنزيل gsap video export - تنزيل كود مصدر gsap video export

gsap video export

شفرة المصدر الأخرى

1.0.4

تنزيل

تصدير فيديو 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>

عند استخدام عناوين URL الخاصة بـ CodePen، سيقوم 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 إلى إخراج الفيديو تلقائيًا بتنسيق يتوافق مع مواصفات فيديو تويتر.

لعرض الفيديو الخاص بك بالدقة المطلوبة، استخدم وسيطة --resolution -v مع سلسلة <width>x<height> . بالنسبة لتويتر أوصي باستخدام 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 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 من الوصول إليه.

فكر في نقل مخططك الزمني إلى نطاق يمكن للأداة الوصول إليه.