كيف تحول أي تسجيل شاشة إلى إطار WebP متحرك وشفاف (بدون After Effects أو مصمم)

عادةً ما يتطلب إنشاء تراكبات واجهة المستخدم المتحركة عالية الجودة برامج معقدة مثل After Effects أو الاستعانة بمصمم رسوم متحركة متخصص. ولكن إذا كنت بحاجة إلى ملف WebP متحرك وشفاف لعرض ميزة تطبيق عائمة، أو تفاعل دقيق في الواجهة، أو أداة غرف صوتية ديناميكية على موقعك الإلكتروني، يمكنك بناؤه بنفسك مجانًا في دقائق معدودة.

في هذا الدليل الشامل، ستتعلم كيفية التقاط تسجيلات الشاشة الخام ومعالجتها عبر أدوات CLI مفتوحة المصدر لاستخراج قنوات ألفا الكاملة بدقة 8-bit. سنغطي خوارزميات إزالة الخلفية، وإعدادات التحسين في FFmpeg، وتكتيكات التكامل مع الويب عبر مختلف المنصات للحصول على ملفات WebP متحركة وشفافة فائقة الخفة.

ما هو ملف WebP المتحرك والشفاف (ولماذا يتفوق على GIF)

شرح ملف WebP المتحرك بعبارات بسيطة

صيغة WebP المتحركة هي امتداد لتنسيق صور Google WebP الذي يدعم تسلسل الرسوم المتحركة إلى جانب خوارزميات الضغط مع فقدان البيانات (lossy) وبدون فقدان البيانات (lossless). وعلى عكس صيغ الصور القديمة، تتضمن WebP تقنيات التنبؤ المتقدمة المشتقة من ترميز الفيديو VP8. يتيح لها ذلك ضغط الرسوم المتحركة إطارًا بإطار إلى جزء بسيط من أحجام الملفات التقليدية دون إدخال تشوهات ضغط بصرية مزعجة.

وعند دمجها مع قناة ألفا (alpha channel)، تتيح صيغة WebP المتحركة والشفافة إمكانية الشفافية الكاملة أو شبه الشفافة فوق أي عنصر خلفية على موقع ويب أو واجهة تطبيق الجوال. هذا يعني أن مكونات الواجهة، وتأثيرات الجسيمات، وعروض التطبيقات التوضيحية يمكنها الطفو بسلاسة فوق ألوان الخلفيات الديناميكية، أو الفيديوهات، أو ثيمات الوضع المظلم/الفاتح دون حدود صندوقية مرئية أو تسرب ألوان خلفية غير جذاب.

لماذا لا يمكن لملفات GIF تحقيق الشفافية المناسبة (1-bit alpha مقابل 8-bit alpha)

يكمن القيد الأساسي لتنسيق GIF القديم في نظام الشفافية الثنائي الخاص به. يستعمل GIF شفافية ألفا بدقة 1-bit، مما يعني أن كل بكسل فردي في الإطار يجب أن يُعرض إما معتمًا بنسبة 100% أو شفافًا بنسبة 100%. لا يوجد حل أوسط. ونتيجة لذلك، فإن الخطوط المنحنية منعمة الحواف، والظلال الساقطة الخفيفة، والوهج الناعم، وتأثيرات الضبابية الزجاجية تنتهي بوجود حواف مسننة أو هالة بيضاء/ملونة حولها عند وضعها على سطح داكن.

أما صيغة WebP المتحركة والشفافة فتستخدم شفافية 8-bit alpha كاملة، مما يوفر 256 مستوى متميزًا من الشفافية لكل بكسل (تتراوح من 0 غير مرئي تمامًا إلى 255 صلب تمامًا). يتيح ذلك للظلال الناعمة، والطبقات الزجاجية الشفافة، وتنعيم الحواف السلس، ومسارات الجسيمات الواقعية بالاندماج بسلاسة فوق أي خلفية واجهة متعددة الألوان. علاوة على ذلك، يقتصر GIF على لوحة ألوان صارمة تضم 256 لونًا فقط لكل إطار، بينما يدعم WebP عمق ألوان RGB حقيقي بدقة 24-bit (16.7 مليون لون)، مما ينتج عنه تدرجات سلسة وتسجيلات واجهة حيوية دون تدرج ألوان فج.

مقارنة حجم الملف — WebP مقابل GIF مقابل APNG مقابل MP4

يؤثر اختيار حاوية الرسوم المتحركة الصحيحة مباشرة على مقاييس سرعة الصفحة، ومؤشرات أداء ويب الأساسية (Core Web Vitals)، واستهلاك بيانات تطبيقات الجوال. تُعرف ملفات GIF المتحركة التقليدية بأنها غير مضغوطة ومتضخمة، وغالبًا ما تتجاوز 10 MB لمقطع واجهة مدته 3 ثوانٍ. تحل صيغة APNG (Animated Portable Network Graphics) مشاكل عمق الألوان وشفافية 8-bit، لكن ضغط DEFLATE الخاص بها بدون فقدان البيانات لا يزال ينتج أحجام ملفات ثقيلة للحركات الغنية.

يقدم فيديو MP4 المرمّز بـ H.264 ضغط فيديو عاليًا، لكن حاويات MP4 القياسية للويب لا تدعم شفافية قناة ألفا بشكل أصلي متوافق مع جميع المتصفحات (يتطلب Safari ترميز HEVC مع ألفا، بينما يتطلب Chrome ترميز VP9 مع ألفا داخل WebM). تقف صيغة WebP المتحركة في الموقع المثالي للرسوم المتحركة القصيرة والمتكررة والشفافة للواجهات: فهي توفر دمجًا كاملاً لشبه الشفافية بدقة 8-bit، وتتعامل مع تدرجات الألوان الحقيقية، وتحقق أحجام ملفات أصغر بنسبة تصل إلى 64% مقارنة بـ GIF وأصغر بنسبة 45% مقارنة بـ APNG.

دعم المتصفحات والأجهزة في عام 2026

اعتبارًا من عام 2026، تتمتع صيغة WebP المتحركة والشفافة بدعم شامل عبر جميع متصفحات الويب الحديثة، وأنظمة تشغيل أجهزة سطح المكتب، ومحركات الجوال. تدعم متصفحات Chrome وSafari وFirefox وEdge وOpera وiOS Safari وAndroid WebView فك ترميز أصول WebP المتحركة أصليًا داخل وسوم HTML القياسية <img>، وخلفيات CSS، ومحركات العرض الخاصة بـ canvas.

على منصات الجوال، يفك Android تشفير ملفات WebP أصليًا عبر عناصر ImageView القياسية، بينما يدعم iOS عرض WebP أصليًا داخل SwiftUI وعروض صور UIKit بدءًا من إصدار iOS 14 فصاعدًا. هذا يجعل WebP المتحرك صيغة موثوقة لمطوري التطبيقات عبر المنصات الذين يرغبون في تجنب التعامل مع ترميزات الفيديو الخاصة بشركات معينة أو أصول GIF الضخمة.

جدول مقارنة الصيغ

متى تحتاج بالفعل إلى إطار شفاف

عروض التطبيقات العائمة فوق القسم الرئيسي لصفحات الهبوط

عند عرض واجهة تطبيق جوال على صفحة هبوط لمنصة SaaS، فإن وضع فيديو مستطيل حاد الحواف داخل القسم الرئيسي يكسر الانسيابية البصرية للوضع المظلم أو التصاميم المتدرجة. من خلال إزالة الخلفية من تسجيل الشاشة وتصديرها كملف WebP متحرك وشفاف، يمكن لجميع عناصر الواجهة الطفو ديناميكيًا فوق الأشكال الهندسية لصفحة الهبوط، أو الأنماط الموجهة التزيينية، أو إضاءات الخلفية الخفيفة.

يخلق هذا التأثير البصري المترابط إحساسًا بالإنتاج المتقن الذي يعبر عن جودة عالية للمستخدمين المحتملين، مما يزيد من معدلات التحويل والتسجيل دون الحاجة إلى مكتبات WebGL أو مكتبات العرض ثلاثي الأبعاد المعقدة.

نماذج الهواتف وإطارات الأجهزة (Device Frames)

غالبًا ما يضع المصممون تسجيلات الشاشة داخل إطارات هواتف متجهية أنيقة (مثل حواف أجهزة iPhone أو Android). إذا قمت بتسجيل شاشة جهاز فعلي أو محاكي، فإن تصدير محتوى الشاشة فقط مع الحواف المنحنية كملف WebP متحرك وشفاف يتيح لك إسقاط الطبقة المتحركة مباشرة داخل غلاف الجهاز عبر CSS أو أنظمة تصميم Figma.

ونظرًا لأن الحواف يُجرى عرضها بشفافية ألفا حقيقية، يمكنك تبديل إطارات الأجهزة، أو تعديل الظلال، أو تغيير زوايا الجهاز داخل CSS دون الحاجة إلى إعادة معالجة تسجيل الواجهة الأصلي.

التفاعلات الدقيقة وحالات التحميل في الواجهة

تتطلب التفاعلات الدقيقة (Micro-interactions) — مثل حالات الأزرار المتحركة، أو حلقات الميكروفون الديناميكية، أو شارات الإنجاز المنبثقة، أو مؤشرات حالة الغرف الصوتية المباشرة — شفافية خلفية نقية. إن عرض صندوق خلفية مربع حول رمز تحميل دائر أو شارة متحركة يفسد تجربة الغمر في التطبيق.

استخدام WebP متحرك خفيف الوزن مع الشفافية يتيح لمهندسي الواجهات الأمامية عرض تغيرات الحالة المتحركة المصممة خصيصًا مباشرة فوق عناصر الواجهة الديناميكية، أو بث الفيديو النشط، أو شبكات صور الغرف الصوتية.

جولات المنتج التعريفية وتلميحات الاستخدام

غالباً ما تسلط جولات المنتج التفاعلية الضوء على أزرار معينة أو تلميحات عائمة. يضمن استخدام حلقات WebP المتحركة والشفافة لمؤشرات اليد المتحركة، أو أهداف النقر النابضة، أو تلميحات التعليمات طفو هذه الطبقات بشكل طبيعي فوق لوحات تحكم المستخدم دون حجب جداول البيانات أو شريط التنقل السفلي.

منشورات التواصل الاجتماعي والصور المصغرة ذات الرسوم المفرغة

تتميز أصول التسويق المنشأة لحملات العرض الرقمي، ومواقع التوثيق، والصور المصغرة للفت انتباه المستخدم عندما تخرج العناصر المتحركة عن الأطر المربعة التقليدية. تحويل تسجيل الشاشة لميزة متحركة إلى حلقة مفرغة وشفافة يتيح لك تركيب الرسوم المتحركة فوق الصور الترويجية الثابتة أو لافتات الخلفية ذات العلامة التجارية.

ما الذي تحتاجه (كل الأدوات مجانية)

FFmpeg — الأداة الشاملة لكل شيء

يُعد FFmpeg الإطار البرمجي المفتوح المصدر القياسي في الصناعة للعمل عبر سطر الأوامر لمعالجة تدفقات الفيديو والصوت والوسائط المتعددة. وهو بمثابة المحرك الخلفي للعديد من برامج الفيديو التجارية الشهيرة ومحركات المتصفحات. يوفر FFmpeg وصولاً كاملاً إلى مخططات تصفية الفيديو، وإعادة إنشاء قنوات ألفا، وخوارزميات مفتاح اللون، وإعدادات المرمز الأصلي لـ WebP.

ولأن FFmpeg يعمل عبر واجهة CLI، يمكنه تنفيذ عمليات معالجة فيديو معقدة في ثوانٍ معدودة والتي قد تستغرق دقائق لإعدادها داخل تطبيقات المونتاج الثقيلة.

تثبيت FFmpeg على Windows وmacOS وLinux

يستغرق تثبيت FFmpeg أقل من دقيقتين على أي نظام تشغيل رئيسي باستخدام مدير الحزم في سطر الأوامر:

• macOS: افتح Terminal وقم بالثبيت عبر Homebrew: brew install ffmpeg
• Windows: افتح PowerShell وقم بالثبيت عبر Chocolatey أو Winget: choco install ffmpeg أو winget install FFmpeg
• Linux (Ubuntu/Debian): شغّل: sudo apt update && sudo apt install ffmpeg libwebp-dev

أدوات مساعدة اختيارية: OBS للتسجيل، GIMP للأقنعة، rembg للتفريغ بالذكاء الاصطناعي AI

بينما يتولى FFmpeg إزالة الخلفية وترميز WebP، تجعل بعض الأدوات المساعدة المجانية الأخرى التقاط الشاشة وإنشاء الأقنعة أكثر سهولة:

• OBS Studio: برنامج تسجيل شاشة مجاني ومفتوح المصدر يتيح التقاط الشاشة بدون فقدان الجودة بمعدلات إطارات مخصصة وأبعاد نوافذ محددة.
• GIMP: محرر صور مجاني يُستخدم لإنشاء أقنعة PNG دقيقة بالأبيض والأسود بدقة 8-bit للقص الهندسي المخصص.
• rembg (Python): أداة AI مفتوحة المصدر تعتمد على U-2-Net وتكتشف العناصر البصرية المعقدة تلقائيًا وتنشئ تفريغ ألفا دقيقًا من إطارات الفيديو.

التحقق من أن نسخة FFmpeg لديك تدعم WebP وألفا

قبل تشغيل أوامر التحويل، تحقق من أن نسخة FFmpeg المحلية جرى تجميعها مع دعم المرمز الأصلي libwebp. افتح موجه الأوامر وشغّل الأمر التالي:

ffmpeg -encoders | grep webp

إذا تضمن الناتج V..... libwebp أو V..... webp، فإن التثبيت لديك مهيأ لترميز تسلسلات صور WebP الشفافة مع فقدان أو بدون فقدان الجودة.

الخطوة 1 — سجل شاشتك بالطريقة الصحيحة

إعدادات التسجيل التي تسهل الشفافية لاحقًا

تعتمد جودة ملف WebP المتحرك والشفاف النهائي مباشرة على إعدادات تسجيل الشاشة الخام. عند التقاط عنصر واجهة أو ميزة في التطبيق، قم بالتسجيل بمقياس العرض الأصلي 100% (تجنب إعدادات تكبير الشاشة أو DPI التي تضبّب حدود البكسل). تأكد من تهيئة برنامج التسجيل لإخراج تدفق فيديو عالي البت (high-bitrate) أو غير مضغوط باستخدام ترميز H.264 أو ProRes داخل حاوية MP4 أو MOV.

قم بإيقاف هالات مؤشر الماوس، والإشعارات المنبثقة، وفلاتر الإضاءة الليلية قبل الضغط على زر التسجيل. الحفاظ على نقاء الألوان يمنع حدوث تغيرات غير متوقعة أثناء المفتاح الملون الآلي.

استخدام خلفية بلون صلب (الكروما الخضراء بالطريقة السهلة)

إذا كنت تلتقط واجهة تطبيق جوال من محاكي (مثل Android Studio أو Xcode Simulator) أو نافذة متصفح، قم بضبط خلفية الصفحة عبر CSS على لون أخضر صلب عالي التباين (مثل #00FF00 / RGB 0, 255, 0) أو أرجواني صلب (#FF00FF / RGB 255, 0, 255).

تأكد من أن اللون الأخضر الذي تختاره لا يظهر في أي مكان داخل عنصر الواجهة المستهدف (مثل نقطة الحالة النشطة الخضراء، أو شارات النجاح، أو الأزرار الخضراء). إذا كانت الواجهة تحتوي على رموز خضراء، قم بتبديل خلفية اللوحة إلى الأزرق الصافي (#0000FF) أو الأرجواني الصافي.

تسجيل عناصر الواجهة دائرية الحواف أو غير المنتظمة بشكل نظيف

عند تسجيل البطاقات، أو صناديق الحوار ذات الحواف المنحنية، أو إطارات الصور الشخصية الدائرية، ضع العنصر مباشرة فوق لون خلفية المفتاح الصلب. لا تطبق ظلال CSS أو ظلال خارجية على عنصر الواجهة أثناء تسجيل الشاشة إذا كنت تنوي استخدام تفريغ الألوان الآلي؛ إذ لا يمكن لخوارزميات مفتاح اللون التمييز بين الظل الداكن والحدود الداكنة للواجهة، مما ينتج عنه ظلال مشوهة ومسقوفة.

بدلاً من ذلك، التقط الحواف الحادة للبطاقات بشكل نظيف، وطبّق فلاتر ظلال CSS الناعمة ديناميكيًا برمجياً عند وضع ملف WebP النهائي على موقعك.

خيارات معدل الإطارات والدقة التي تحافظ على صغر حجم الملف

تتسبب معدلات الإطارات العالية والأبعاد الضخمة للوحة العمل في مضاعفة حجم الملف سريعًا. بالنسبة للرسوم المتحركة للواجهة وعروض التطبيقات التوضيحية، يوفر معدل إطارات من 20 fps إلى 30 fps حركة سلسة مع توفير ما يصل إلى 50% من استهلاك البيانات مقارنة بالتسجيل بمعدل 60 fps.

قم بتغيير أبعاد تسجيل الشاشة لتطابق أبعاد العرض المستهدفة. إذا كان الإطار المتحرك سيُعرض بدقة 400x400 بكسل على موقعك، فلا تقم بتصدير تسجيل غير مقصوص بدقة 4K (3840x2160). يقلل تقليل الحجم أثناء التسجيل أو المعالجة الأولية من وقت المعالجة ويمنع الضبابية على مستوى البكسل أثناء تجميع WebP.

أخطاء التسجيل الشائعة التي تفسد عملية التفريغ

تجنب إعدادات التقاط الشاشة التي تؤدي إلى فقدان الجودة وإدخال تشوهات ضغط H.264 ثقيلة أو تكتلات حول الحواف الدقيقة. تخلق تشوهات الضغط اختلافات لونية خفيفة في الخلفية التي يفترض أن تكون خضراء ناصعة، مما يربك فلاتر المفتاح الملون ويترك نقاط ضوضاء حول العنصر.

سجل دائمًا باستخدام إعدادات البت العالية (15-20 Mbps كحد أدنى لالتقاط بدقة 1080p) أو أوضاع التقاط الأصلي بدون فقدان الجودة داخل OBS Studio.

الخطوة 2 — اختر طريقة الشفافية المناسبة

الطريقة أ — مفتاح الكروما (إزالة الخلفية ذات اللون الصلب)

تعتمد الكروما (Chroma key) على إزالة قيمة لونية محددة (مثل الأخضر أو الأزرق الخالص) من تدفق الفيديو لإنشاء طبقة ألفا. هذه الطريقة مثالية لتسجيلات الواجهة المصورة أمام خلفيات استوديو اصطناعية أو محاكيات التطبيقات حيث يمكنك التحكم في لون الخلفية. تتم عملية تفريغ الكروما تلقائيًا وبسرعة فائقة داخل FFmpeg.

الطريقة ب — القص الهندسي والقناع (المستطيلات، الحواف المنحنية، الدوائر)

عند تسجيل عنصر واجهة قياسي بأبعاد هندسية ثابتة — مثل أداة لوحة تحكم مستطيلة، أو بطاقة تطبيق دائرية الحواف، أو صورة شخصية دائرية — لا داعي لاستخدام الكروما. بدلاً من ذلك، يمكنك تحديد إحداثيات قص البكسل الهندسية بدقة وتغطيتها بقناع أبيض وأسود بدقة 8-bit جرى إنشاؤه مسبقًا.

في صورة قناع ألفا، تحتفظ البكسلات البيضاء (#FFFFFF) بالعتامة الكاملة، وتصبح البكسلات السوداء (#000000) شفافة تمامًا، بينما تنشئ البكسلات الرمادية شفافية متدرجة لحواف ملساء ومصقولة تمامًا.

الطريقة ج — إزالة الخلفية بالذكاء الاصطناعي AI للعناصر المعقدة

إذا كان التسجيل يتضمن عناصر معقدة — مثل أشخاص، أو رسوم ثلاثية الأبعاد معقدة، أو بث فيديو مباشر مصور أمام خلفيات حقيقية مزدحمة — فستفشل الكروما والأقنعة الهندسية. في هذه السيناريوهات، تؤدي معالجة إطارات الفيديو عبر أدوات التجزئة بالذكاء الاصطناعي مفتوحة المصدر مثل rembg أو RVM (Robust Video Matting) إلى استخراج أقنعة دقيقة للغاية دون الحاجة للقص اليدوي.

الطريقة د — التقاط الشفافية الأصلية (عندما يحتوي المصدر على الشفافية بالفعل)

إذا تم إنشاء الأصل المصدر في أدوات مثل Lottie، أو Rive، أو After Effects، أو محركات WebGL التي تدعم العرض الأصلي لقناة ألفا (مثل ProRes 4444 أو WebM VP9 مع alpha)، فيمكن لـ FFmpeg تمرير قناة ألفا الأصلية مباشرة إلى مرمز WebP دون الحاجة إلى فلاتر كروما أو أقنعة.

أي طريقة تختار لحالتك (جدول القرار)

الخطوة 3 — أزل الخلفية باستخدام FFmpeg

شرح أمر مفتاح الكروما بارامترًا تلو الآخر

لتجريد خلفية خضراء صلبة من تسجيل الشاشة وإنشاء تدفق فيديو شفاف، شغّل أمر الفلتر التالي لـ FFmpeg في Terminal:

ffmpeg -i input_recording.mp4 -vf "colorkey=0x00FF00:0.15:0.05,format=yuva420p" -c:v rawvideo temp_alpha.nut

يعالج هذا الأمر التسجيل عبر الرسم البياني لفلتر colorkey. يحدد المعامل 0x00FF00 اللون الست عشري المستهدف (الأخضر الخالص). تضبط القيمة الثانية (0.15) مدى التسامح في تشابه الألوان، بينما تحدد القيمة الثالثة (0.05) سلوك مزج الحواف الناعمة. أما ضبط format=yuva420p فيجبر FFmpeg على إلحاق قناة ألفا YUV بدقة 8-bit إلى بيانات البكسل.

ضبط التشابه والدمج للحصول على حواف نظيفة

يساعد ضبط معاملي التشابه (similarity) والدمج (blend) بدقة على منع تسرب لون الخلفية مع الحفاظ على تفاصيل الحواف الدقيقة:

• التشابه (0.01 إلى 1.0): يتحكم في مدى قرب لون البكسل من 0x00FF00 ليتم تفريغه. يعطي الضبط بين 0.10 و 0.18 أفضل النتائج لتسجيلات الشاشة غير المضغوطة.
• الدمج (0.02 إلى 0.08): يخلق تدرج عتامة ناعمًا على طول حدود المناطق المفرغة. يعطي الضبط بين 0.02 و 0.08 مظهراً ملساء ويمنع الحواف المسننة.

معالجة التوهج الأخضر وهالات الحواف

إذا أظهر محتوى الواجهة حدودًا خضراء خفيفة أو تسربًا للون حول الحواف المنعمة، تطبق فلتر despill الخاص بـ FFmpeg أو اضبط منحنيات ألوان القناة مباشرة داخل الفلتر:

ffmpeg -i input_recording.mp4 -vf "colorkey=0x00FF00:0.12:0.04,despill=type=green:expand=0.1,format=yuva420p" output_clean.mov

يحليل فلتر despill البكسلات القريبة من عتبات الشفافية ويحايد النغمات الخضراء المتبقية إلى نغمات رمادية محايدة أو شفافة.

تطبيق قناع الحواف المنحنية باستخدام تراكب ألفا

لتطبيق حواف منحنية دقيقة على عرض توضيحي للتطبيق دون استخدام الكروما، أنشئ صورة قناع بالأبيض والأسود (mask.png) تطابق أبعاد التسجيل (مثل مستطيل أبيض بحواف منحنية 24px على خلفية سوداء). ثم نفذ الفلتر المركب التالي في FFmpeg:

ffmpeg -i recording.mp4 -i mask.png -filter_complex "[0:v][1:v]alphamerge,format=yuva420p" masked_output.mov

يأخذ فلتر alphamerge قيم السطوع للرمادي من المدخل الثاني (mask.png) ويحولها إلى قيم شفافية قناة ألفا بدقة 8-bit للفيديو الخاص بك.

التحقق من بقاء قناة ألفا بالفعل

للتأكد من أن الملف الوسيط يحتوي على شفافية حقيقية لقناة ألفا قبل التحويل إلى WebP، قم بإجراء عرض اختباري فوق خلفية حمراء زاهية داخل FFmpeg:

ffmpeg -f lavfi -i color=c=red:s=1280x720 -i masked_output.mov -filter_complex "[0:v][1:v]overlay=shortest=1" test_check.mp4

افتح test_check.mp4. إذا كان عنصر الواجهة يطفو بنظافة فوق الخلفية الحمراء دون وجود صناديق مستطيلة حوله، فهذا يعني أن الشفافية مكتملة وجاهزة للتصدير النهائي.

ما الذي يفعله كل أمر بالضبط (جاهز للنسخ واللصق)

ملاحظة التنفيذ: تعالج الأوامر أعلاه تدفقات البكسل الخام لـ MP4، وتحسب مسافات الألوان مقارنة بالقيمة الست عشرية المحددة، ثم ترفق مصفوفة بكسل بأربع قنوات (RGBA/YUVA)، وتخرج ذاكرة فيديو خام مؤقتة. يمكنك نسخ هذه الأوامر ولصقها مباشرة في Terminal أو PowerShell مع تغيير input_recording.mp4 إلى اسم الملف المصدر لديك.

الخطوة 4 — التصدير بصيغة WebP متحرك

أمر FFmpeg لتصدير WebP متحرك مع الشفافية

بمجرد تفريغ قناة ألفا أو تطبيق القناع عليها، شغّل هذا الأمر المجهز للتطبيقات الفعلية لتصدير ملف WebP المتحرك والشفاف النهائي:

ffmpeg -i input_recording.mp4 -vf "colorkey=0x00FF00:0.14:0.04,fps=24,scale=640:-1" -vcodec libwebp -filter_complex "[0:v] fps=24,scale=640:-1:flags=lanczos[x];[x]split[a][b];[a]palettegen=reserve_transparent=1[p];[b][p]paletteuse" -loop 0 -q:v 75 -preset default final_animated_frame.webp

يتولى هذا الأمر المكون من خط واحد تفريغ الكروما، وتعديل معدل الإطارات، وتصغير الحجم بجودة عالية عبر خوارزمية Lanczos، وتحسين لوحة ألوان ألفا، وضغط WebP في خط معالجة موحد.

WebP مع فقدان الجودة مقابل بدون فقدان الجودة — متى تستخدم كلاً منهما

يدعم WebP المتحرك كلا الخيارين للضغط الداخلي:

• WebP بدون فقدان الجودة (-lossless 1): يحافظ على دقة البكسل والخطوط الواضحة تمامًا دون تشوهات ضغط. مثالي لرسوم الواجهات المتجهية المسطحة، والنصوص الحادة، والرموز عالية التباين. ومع ذلك، قد تكون أحجام الملفات أكبر بشكل ملحوظ لتسجيلات الشاشة المعقدة التي تشبه الصور الحقيقية.
• WebP مع فقدان الجودة (-q:v 65 to 80): يستخدم التحويل الترددي المكاني للتخلص من بيانات الصور غير المحسوسة. مثالي لتسجيلات الشاشة التي تحتوي على تدرجات، أو ظلال ناعمة، أو بث فيديو، ويحقق أحجام ملفات أصغر بنسبة تصل إلى 70% مع فقدان غير ملحوظ في الجودة البصرية.

الجودة، مستوى الضغط، وإعدادات التكرار

اضبط هذه المعاملات الرئيسية في FFmpeg للتحكم في مخرجات الملف وسلوك الرسوم المتحركة:

• -q:v [1-100]: يحدد معامل الجودة عند الضغط مع فقدان البيانات. يوفر التعيين 75 أفضل توازن بين النقاء البصري وحجم الملف المنخفض.
• -compression_level [0-6]: يحدد جهد المعالج في الضغط. استخدم دائمًا -compression_level 6 لمواقع الويب الفعلية لفرض ضغط أقصى وحجم ملف أدنى.
• -loop [count]: يحدد عدد تكرارات الحركة. يحدد -loop 0 تكرارًا لا نهائيًا (وهو القياسي لمكونات واجهة الويب)، بينما تشغله -loop 1 مرة واحدة وتتوقف عند الإطار النهائي.

ضبط معدل الإطارات لتشغيل سلس

يتسبب الحفاظ على معدلات إطارات عالية (مثل 60 fps) في صيغ الصور في إجهاد كبير لمعالج الأجهزة عند عرضها في المتصفح. يقلل تخفيض الفيديو المصدر إلى 20 fps أو 24 fps باستخدام fps=24 داخل سلسلة الفلاتر عدد الإطارات الإجمالي بنسبة 60%، مما يقلل حجم الملف بشكل هائل مع الحفاظ على انطباع الحركة السلسة في الواجهة.

التأكد من وجود الشفافية في الملف النهائي

للتحقق من أن ملف .webp المصرّف يحتفظ بشفافية قناة ألفا الكاملة عبر بيئات الويب، قم بسحب الملف وإسقاطه مباشرة في تبويب جديد بمتصفح Google Chrome. افتح أدوات المطور في Chrome (بالضغط على F12)، وانتقل إلى الفاحص Elements، واضبط لون خلفية جِسْم المستند إلى #000000، و#FF0000، و#FFFFFF.

إذا كان لون الخلفية يظهر بنقاء من خلال حدود الحركة دون وجود صناديق مستطيلة أو هالات، فإن أصلك جاهز للنشر على الويب.

الخطوة 5 — حسّن حجم الملف دون فقدان الجودة

القص للحصول على أقصر حلقة حركة مفيدة

عند التقاط تفاعلات الشاشة، تجنب الإطارات الخاملة غير الضرورية قبل التفاعل المستهدف أو بعده. استخدم معاملات البحث الدقيقة في FFmpeg (زمن البدء -ss وزمن الانتهاء -to) لقص التسجيل المصدر ليكون مطابقًا لسلسلة إطارات الحركة الفعلية فقط:

ffmpeg -ss 00:00:01.500 -to 00:00:05.200 -i input_recording.mp4 -vf "colorkey=0x00FF00:0.14:0.04" -vcodec libwebp -loop 0 optimized_loop.webp

حتى اقتطاع 1.5 ثانية من المشاهد الثابتة يلغي عشرات الإطارات المتحركة غير الضرورية، مما يوفر جزءاً كبيراً من حجم الملف.

تقليل معدل الإطارات بذكاء

معظم التفاعلات الدقيقة في البرمجيات لا تتطلب معدلات إطارات فيديو مرتفعة. يقلل خفض معدل الإطارات من 30 fps إلى 18 fps أو 20 fps إجمالي بيانات الصور بشكل كبير دون التأثير على السلاسة الملحوظة للنوافذ المنبثقة، أو حلقات الحالة، أو تلميحات أدوات الشاشة.

القص لأبعاد المحتوى الفعلي فقط

لا تقم أبدًا بتصدير لقطة شاشة كاملة بدقة 1920x1080 إذا كان عنصر الواجهة المتحرك يشغل منطقة 400x300 بكسل فقط في المنتصف. استخدم فلتر crop في FFmpeg لإلغاء مساحة اللوحة الفارغة قبل الترميز:

ffmpeg -i input.mp4 -vf "crop=400:300:760:390,colorkey=0x00FF00:0.14:0.04" -vcodec libwebp cropped_output.webp

تحدد المعاملات crop=w:h:x:y العرض والارتفاع وإحداثيات الإزاحة من الأعلى واليسار بالبكسل، مما يقص البكسلات غير المستخدمة تمامًا.

إعدادات الجودة التي تحقق التوازن المثالي

بالنسبة لتصدير WebP مع فقدان الجودة، تحقق قيم الجودة بين 65 و75 تخفيضات كبيرة في الحجم مع الحفاظ على وضوح النصوص وحادة الخطوط المتجهة. تجنب الهبوط لنسبة أقل من 50، حيث تؤدي القيمة المنخفضة إلى ظهور ضوضاء وتكتلات مرئية على طول حدود ألفا المنعمة.

أحجام الملفات المستهدفة للاستخدام على الويب

لتحقيق أداء ويب أمثل وأقل تأثير على سرعة تحميل الصفحات على الجوال، استهدف ميزانيات حجم الملفات التالية بناءً على حجم المكون لديك:

• التفاعلات الدقيقة / الشارات (100x100 إلى 200x200): أقل من 100 KB
• البطاقات العائمة / صناديق الحوار (400x400 إلى 600x600): أقل من 350 KB
• عروض الواجهات الكاملة في الهيرو (800x600+): أقل من 750 KB

جدول الحجم قبل وبعد مع أرقام توضيحية

الخطوة 6 — استخدمه على موقعك أو تطبيقك

التضمين باستخدام وسم img بسيط

نظرًا لأن WebP المتحرك مدعوم أصليًا عبر المتصفحات، فإن تضمين ملف WebP متحرك وشفاف لا يتطلب مكتبات تشغيل JavaScript معقدة أو محركات canvas. استخدم وسم HTML <img> قياسيًا:

<img src="/assets/ui-demo.webp" alt="App Feature Demo" width="640" height="360" loading="lazy" decoding="async" />

يؤدي تحديد السمتين width و height صراحة إلى منع تحول التخطيط التراكمي (CLS) أثناء حساب تخطيط الصفحة.

الخيار البديل للمتصفحات غير المدعومة باستخدام عنصر picture

إذا كان يتوجب عليك دعم بيئات عمل قديمة أو متصفحات تفتقر إلى الدعم الأصلي لرسوم WebP المتحركة، استخدم عنصر <picture> في HTML5 لتقديم تدفق بديل بملفات APNG أو MP4:

<picture>
<source srcset="/assets/ui-demo.webp" type="image/webp" />
<source srcset="/assets/ui-demo.png" type="image/png" />
<img src="/assets/ui-demo.gif" alt="App Feature Demo" />
</picture>

التحميل الكسول واعتبارات الأداء

طبّق السمة loading="lazy" على عناصر WebP المتحركة الموجودة أسفل الجزء المرئي من الصفحة. يؤجل ذلك تنزيل وتشفير الإطارات حتى يتصفح المستخدم بالقرب من العنصر، مما يحافظ على أداء المعالج أثناء التحميل الأولي للصفحة.

استخدامه في تخطيطات React وNext.js وTailwind

عند دمج أصول WebP المتحركة والشفافة داخل تطبيقات الواجهة الأمامية الحديثة بـ React أو Next.js، قم بتضمين الصورة داخل حاويات مسنقة بـ Tailwind:

import Image from 'next/image';

export default function HeroComponent() {
return (
<div class="relative bg-slate-900 p-8 rounded-2xl overflow-hidden">
<Image
src="/ui-demo.webp"
alt="Dynamic UI Overlay"
width={640}
height={360}
className="drop-shadow-2xl hover:scale-105 transition-transform duration-300"
unoptimized
/>
</div>
);
}

ملاحظة: حدد السمة unoptimized داخل مكونات Image في Next.js عند تقديم أصول WebP متحركة ومضغوطة مسبقًا لتجاوز محركات إعادة ضغط الصور في خادم الفريم ورك التي قد تسطح قنوات ألفا إلى إطارات JPEG ثابتة.

استخدامه في تطبيقات Android وiOS

تتعامل تطبيقات الجوال المبنية بأدوات أصلية أو أطر عمل عبر المنصات مع رسوم WebP الشفافة المتحركة أصليًا:

• Android (Kotlin/Jetpack Compose): استخدم مكتبات تحميل الصور مثل Coil أو Glide. يعرض Coil ملفات WebP المتحركة أصليًا عبر ImageLoader.Builder(context).components { add(AnimatedWebpDecoder.Factory()) }.
• iOS (SwiftUI): يتعامل SwiftUI مع WebP عبر AsyncImage أو أغلفة خفيفة مثل SDWebImageSwiftUI.
• Flutter / React Native: استخدم عناصر Image.asset('assets/ui-demo.webp') القياسية؛ حيث تعالج محركات الفريم ورك الأصلية تسلسلات WebP ألفا مباشرة على طبقات GPU الخاصة بالجهاز.

إذا كانت معمارية تطبيقك تتطلب رسومًا متحركة تفاعلية معقدة في الوقت الفعلي، أو تدفقات جسيمات، أو رسوم هدايا البث المباشر الموجهة من الخادم باستهلاك ذاكرة أقل من WebP، فقم بتقييم الصيغ المتخصصة المدعومة بأدوات مثل SVGA Maker أو محركات المتجهات المخصصة.

بالنسبة للفرق التي تبني منصات جوال مخصصة بالكامل وتعمل في الوقت الفعلي، فإن الاستشارة مع شركة تطوير خبيرة مثل AppLooma LLC تضمن أن خط معالجة العرض لديك يتعامل مع أصول الرسوم المتحركة الديناميكية دون إسقاط للإطارات أو تحميل زائد على الذاكرة.

التأكد من مظهرها الصحيح على الخلفيات المظلمة والفاتحة

اختبر دائمًا أصل WebP الشفاف مقابل ألوان خلفية متعددة ومتباينة (مثل الأسود الخالص #000000، والأبيض الخالص #FFFFFF، وألوان العلامة التجارية الحيوية). إذا ظهرت هالات داكنة على الخلفيات البيضاء، أعد تشغيل خط معالجة مفتاح الكروما في FFmpeg مع زيادة طفيفة لمعاملي blend و despill لتنظيف البكسلات على الحواف.

استكشاف الأخطاء وإصلاحها — المشاكل الشائعة والحلول

يظهر ملف WebP الخاص بي بخلفية سوداء أو بيضاء بدلاً من الشفافية

تحدث هذه المشكلة عندما يتجاهل FFmpeg قناة ألفا أثناء تحويل المساحة اللونية أو عندما يحول أنبوب الصور الوسيط تنسيقات البكسل إلى RGB القياسي ذي 3 قنوات. تأكد من أن الرسم البياني للفلتر يتضمن صراحة format=yuva420p أو format=rgba قبل تمرير الذاكرات المؤقتة للبكسل إلى مرمز libwebp.

تبدو الحواف مسننة أو تحتوي على هالة خضراء

تشير الحواف المسننة أو الحدود الملونة إلى أن عتبة التشابه لمفتاح الكروما كانت منخفضة للغاية أو أنه تم إغفال المزج الناعم للحواف. قم بزيادة معامل blend في FFmpeg من 0.01 إلى 0.05 أو 0.08. كبديل، استخدم قناع ألفا عالي الدقة بالتدرج الرمادي بدقة 8-bit لفرض تنعيم ناعم للحواف يدويًا.

الرسوم المتحركة لا تتكرر أو تعمل مرة واحدة فقط

افتراضيًا، تقوم بعض نسخ FFmpeg بترميز تسلسلات WebP لتنفذ دورة حركة واحدة ثم تتوقف. أضف الراية -loop 0 صراحة إلى أمر التصدير لفرض تنفيذ التكرار اللانهائي داخل محركات متصفحات الويب.

حجم الملف ضخم للغاية

إذا تجاوز حجم الملف المصدر 1-2 MB، فمن المرجح أنك تقوم بالترميز بدقة الشاشة الكاملة، أو تحتفظ بـ 60 fps، أو تستخدم ضغطًا بدون فقدان الجودة (-lossless 1). قم بقص مساحة اللوحة غير المستخدمة، وتقليل معدل الإطارات إلى 20 fps، وتصغير الأبعاد، واستخدام ترميز WebP مع فقدان الجودة عبر -q:v 70.

التشغيل بطيء ومتقطع (Choppy)

ينتج التشغيل المتقطع عن عدم انتظام الأختام الزمنية لمدة الإطار أثناء استخراج الفيديو أو عبء فك التشفير الزائد على معالج أجهزة العميل. افرض معدل إطارات مستقرًا وموحدًا باستخدام فلتر fps=24 في FFmpeg بدلاً من أوضاع التقاط معدل الإطارات المتغير.

يعمل في Chrome ولكن ليس في متصفح أو تطبيق آخر

قد تفشل محركات عرض المتصفحات القديمة في أنظمة التشغيل أو مكتبات تحليل الصور غير المحينة في فك تشفير قنوات WebP ألفا ذات الضغط مع فقدان الجودة بشكل صحيح. يؤدي إعادة تصدير الأصل باستخدام المعاملات القياسية بدون فقدان الجودة (-lossless 1) أو تضمين بنية عنصر picture البديلة إلى حل الحالات الاستثنائية عبر المنصات.

هذا القسم كنز لزيادة حركة الزوار من البحث — الناس يبحثون عن حلول الأخطاء

نصيحة لنوايا البحث (Search Intent): استعلامات الأخطاء الشائعة مثل 'FFmpeg webp black background transparency fix' أو 'remove green halo ffmpeg chroma key' تجذب زيارات بحث مجانية عالية القيمة. الاحتفاظ بهذه الحلول السريعة لاستكشاف الأخطاء يساهم في حل مشكلات سطر الأوامر العملية فورًا.

ميزة إضافية — أتمتة العملية بأكملها

سكربت أتمتة قابل للإعادة للتحويل الجماعي

وفر الوقت بإنشاء سكربت أتمتة Bash قابل لإعادة الاستخدام (convert_to_webp.sh) يعالج تسجيلات الشاشة الخام إلى ملفات WebP شفافة ومحسنة بأمر واحد في Terminal:

#!/bin/bash
# Usage: ./convert_to_webp.sh input.mp4 output.webp

INPUT=$1
OUTPUT=$2

ffmpeg -i "$INPUT" \
-vf "colorkey=0x00FF00:0.14:0.04,despill=type=green,fps=24,scale=640:-1:flags=lanczos" \
-vcodec libwebp \_complex "[0:v] fps=24,scale=640:-1:flags=lanczos[x];[x]split[a][b];[a]palettegen=reserve_transparent=1[p];[b][p]paletteuse" \
-loop 0 \
-q:v 75 \
-compression_level 6 \
"$OUTPUT"

echo "Successfully processed $INPUT into $OUTPUT with transparency!"

اجعل السكربت قابلاً للتنفيذ عبر تشغيل chmod +x convert_to_webp.sh في Terminal.

معالجة مجلد كامل من التسجيلات دفعة واحدة

لمعالجة دليل كامل يحتوي على تسجيلات شاشة بملفات MP4 وتحويلها إلى ملفات WebP شفافة تلقائيًا، نفذ الحلقة التكرارية التالية في موجه الأوامر:

for f in *.mp4; do ./convert_to_webp.sh "$f" "${f%.mp4}.webp"; done

تمر هذه الحلقة التكرارية على كل ملف MP4 في مجلد العمل، وتطبق تفريغ الألوان واستخراج ألفا، وتخرج ملفات WebP المضغوطة المقابلة تلقائيًا.

إضافتها إلى سير عمل التصميم أو البناء لديك

يمكنك دمج سكربت FFmpeg هذا مباشرة في سكربتات بناء CI/CD، أو مسارات عمل GitHub Actions، أو روتين بناء NPM المحلي. يتيح ذلك لفريق التصميم والهندسة وضع تسجيلات واجهة المستخدم الخام في مستودع المشروع وإنشاء أصول WebP جاهزة للاستخدام في الإنتاج تلقائيًا أثناء نشر التطبيق.

متى يجب عليك الاستعانة بمصمم

قسم صريح — هذه الطريقة ليست كافية للرسوم المتحركة المعقدة، والتحريك المتجهي الخاص بالعلامة التجارية، والمنحنيات المخصصة يدويًا. هذه الصراحة تبني المصداقية وتقلل معدل الارتداد.

بينما يعمل تحويل تسجيلات الشاشة إلى ملفات WebP متحركة وشفافة بشكل استثنائي لعرض ميزات الواجهة، وسير عمل التطبيقات، والتفاعلات الدقيقة، إلا أنه ليس بديلاً عن تصميم الرسوم المتحركة الاحترافي. تسجيلات الشاشة مقيدة بإطارات الواجهة المسجلة والانتقالات القياسية. ولا يمكنها محاكاة منحنيات الحركة المخصصة يدويًا، أو هيكلة الشخصيات ثلاثية الأبعاد المعقدة، أو التحول المتجهي الديناميكي، أو فيزياء تأثيرات الجسيمات.

إذا كان مشروعك يتطلب رسومًا متحركة مخصصة للعلامة التجارية في القسم الرئيسي، أو تأثيرات جسيمات متجهية عالية الأداء، أو رسوم هدايا تفاعلية في الوقت الفعلي لتطبيقات الغرف الصوتية والبث المباشر، فإن الاعتماد على تسجيلات الشاشة الخام لن يكون كافيًا. بالنسبة للرسوم المتحركة المعقدة القائمة على المتجهات والرسوم المتحركة الخفيفة والتفاعلية للجوال، فإن استخدام خطوط معالجة مخصصة مثل SVGA Maker أو التعاون مع مصممي حركة محترفين يضمن جودة بصرية فائقة وأداء تشغيل أمثل.

Frequently asked questions

Conclusion

تحويل تسجيلات الشاشة الخام إلى ملفات WebP متحركة وشفافة خفيفة الوزن هو أحد أسرع الطرق لرفع مستوى صفحات الهبوط لمنصات SaaS، وشاشات التهيئة في التطبيقات، وعروض الواجهات التوضيحية دون الاعتماد على أدوات تصميم الحركة المكلفة. من خلال دمج التقاط الخلفية الصلبة مع مفتاح الكروما في FFmpeg وتحسين لوحة الألوان، يمكنك نشر رسوم متحركة شفافة بدقة 8-bit في دقائق.

إذا كنت ترغب في أتمتة مسارات الأصول أو بناء تطبيقات جوال عالية التحويل مزودة بإمكانيات البث المباشر، استكشف مسارات التصميم المتخصصة لدينا أو استشر فريق الهندسة لدينا في AppLooma LLC لتحويل رؤية منتجك إلى واقع.