محرر رسوم متحركة قائم على الويب بنظام الإطارات المفتاحية وتصدير فيديو شفاف
احتاج فريق أدوات إبداعية إلى محرر رسوم متحركة قائم على المتصفح يسمح للمصممين بإنشاء رسوم متحركة سلسة تعتمد على الإطارات المفتاحية مع كائنات متعددة وتصديرها كفيديوهات بشفافية قناة ألفا كاملة — مما يتيح تراكبًا سلسًا على محتوى الفيديو الآخر.
ناقش مشروعك
التحدي
كان إنشاء أصول رسوم متحركة بخلفيات شفافة لإنتاج الفيديو أمرًا مرهقًا:
- أدوات سطح المكتب فقط — تطلبت أدوات الرسوم المتحركة الحالية (After Effects, Motion) تراخيص باهظة الثمن وتثبيتًا على سطح المكتب
- لا يوجد تصدير لقناة ألفا — قامت معظم أدوات الرسوم المتحركة القائمة على الويب بتصدير مقاطع فيديو غير شفافة بدون دعم للشفافية
- نظام الإطارات المفتاحية المعقد — احتاج المصممون إلى رسوم متحركة بديهية تعتمد على الإطارات المفتاحية مع التحكم في التخفيف (easing)، وليس فقط انتقالات CSS
- معاينة في الوقت الفعلي — احتاج المحررون إلى رؤية الرسوم المتحركة تعمل بسلاسة قبل التصدير
- أنواع كائنات متعددة — تطلبت الرسوم المتحركة أشكالاً ونصوصًا ذات جداول زمنية مستقلة للرسوم المتحركة
- جودة التصدير — يجب أن يكون الناتج ملفات فيديو بجودة إنتاجية قابلة للاستخدام في سير عمل التحرير الاحترافي
حلنا
لقد قمنا ببناء محرر رسوم متحركة قائم على الويب باستخدام React و Pixi.js للعرض المسرّع بواسطة الأجهزة، ومحرك إطارات مفتاحية يضم أكثر من 30 وظيفة تخفيف (easing)، وواجهة خلفية مدعومة بـ FFmpeg لتصدير مقاطع فيديو WebM مع دعم كامل لقناة ألفا VP9.
الهيكل المعماري
- الواجهة الأمامية (Frontend): React مع TypeScript، و Pixi.js لعرض Canvas المسرّع بواسطة WebGL
- إدارة الحالة (State Management): Zustand لحالة المشهد المركزية
- محرك الرسوم المتحركة: محرك استيفاء إطارات مفتاحية مخصص مع مكتبة تخفيف (easing)
- الواجهة الخلفية (Backend): Express.js مع دعم WebSocket لبث الإطارات في الوقت الفعلي
- ترميز الفيديو: FFmpeg (عبر fluent-ffmpeg) لترميز VP9 WebM مع قناة ألفا
- Monorepo: مساحة عمل pnpm بأنواع TypeScript مشتركة عبر الواجهة الأمامية والخلفية
محرك الرسوم المتحركة
نظام الإطارات المفتاحية
يدعم محرك الرسوم المتحركة الأساسي الرسوم المتحركة القائمة على الإطارات المفتاحية عبر خصائص متعددة:
- الموضع — إحداثيات X/Y لمسارات الحركة
- الدوران — رسوم متحركة للدوران تعتمد على الدرجات
- اللون — استيفاء ألوان Hex بانتقالات سلسة
- الشفافية (Alpha) — رسوم متحركة للعتامة لتأثيرات التلاشي
- الحجم — قياس العرض والارتفاع ونصف القطر
يخزن كل إطار مفتاحي الوقت (بالمللي ثانية)، ومجموعة فرعية من الخصائص المتحركة، ووظيفة تخفيف (easing) مختارة. يقوم المحرك بالاستيفاء بين الإطارات المفتاحية المحيطة في أي نقطة زمنية، مطبقًا منحنى التخفيف (easing) المناسب.
مكتبة التخفيف (Easing) (أكثر من 30 وظيفة)
مكتبة تخفيف (easing) شاملة تغطي جميع منحنيات الرسوم المتحركة القياسية:
- Linear, Quadratic, Cubic, Quartic, Quintic
- Sinusoidal, Exponential, Circular
- Elastic (تجاوز شبيه بالنابض), Back (ترقب), Bounce (ارتداد)
- كل منها متاح في متغيرات ease-in، ease-out، و ease-in-out
الاستيفاء
لأي طابع زمني معين، يقوم المحرك بما يلي:
- يجد الإطارات المفتاحية المحيطة (قبل وبعد)
- يحسب التقدم الطبيعي بينها (0 إلى 1)
- يطبق وظيفة التخفيف (easing function) المختارة على قيمة التقدم
- يستوفي قيم الخصائص (خطي للأرقام، استيفاء لوني (color lerp) لقيم Hex)
- يعيد المجموعة الكاملة من الخصائص المتحركة للعرض
Canvas والعرض
أنواع الكائنات
- مستطيلات — عرض وارتفاع ولون وشفافية ودوران قابل للتكوين
- دوائر — نصف قطر ولون وشفافية ودوران قابل للتكوين
- نص — عائلة الخط وحجم الخط والمحتوى واللون والشفافية قابلة للتكوين
العرض المسرّع بواسطة الأجهزة
- عرض Pixi.js WebGL لمعاينة سلسة بمعدل 60 إطارًا في الثانية (fps)
- دقة Canvas قابلة للتكوين (افتراضي 1920x1080 بمعدل 30 إطارًا في الثانية (fps))
- دعم الخلفية الشفافة مع إمكانية تعديل ألفا الخلفية
- تحديد الكائنات التفاعلي مع التظليل البصري
- تشغيل الرسوم المتحركة في الوقت الفعلي مع تشغيل وإيقاف مؤقت وتحريك على الخط الزمني
واجهة المحرر
شريط الأدوات
أزرار إنشاء الكائنات لإضافة مستطيلات ودوائر ونصوص إلى المشهد بخصائص افتراضية يمكن تخصيصها فورًا.
لوحة الخصائص
خصائص الكائن المحدد قابلة للتعديل في الوقت الفعلي: الموضع، الحجم، اللون، الشفافية (alpha)، الدوران، والخصائص الخاصة بالنوع (محتوى النص، إعدادات الخط).
الخط الزمني
الخط الزمني المرئي يعرض:
- علامات الإطارات المفتاحية في مواضعها الزمنية لكل كائن
- مؤشر التشغيل للوقت الحالي مع التمرير
- اختيار وظيفة التخفيف (easing function) لكل إطار مفتاحي
- عناصر التحكم في إضافة/إزالة الإطارات المفتاحية عند موضع مؤشر التشغيل الحالي
مسار تصدير الفيديو
التقاط الإطارات
- تحدد مدة الرسوم المتحركة ومعدل الإطارات في الثانية (FPS) إجمالي عدد الإطارات
- يتم عرض كل إطار على حدة بدقة كاملة
- يتم التقاط محتوى Canvas كـ PNG blob لكل إطار
- يتم جمع الإطارات للتحميل إلى الواجهة الخلفية للترميز
الواجهة الخلفية للترميز
تتعامل الواجهة الخلفية لـ Express.js مع ترميز الفيديو من خلال نظام قائم على المهام:
- إنشاء مهمة — يطلب العميل مهمة تصدير جديدة (تعتمد على UUID)
- تحميل الإطارات — يتم تحميل الإطارات على دفعات (أو بثها عبر WebSocket)
- ترميز FFmpeg — يتم تجميع الإطارات في فيديو WebM باستخدام برنامج ترميز VP9
- Alpha Channel — تستخدم تنسيق البكسل yuva420p لدعم الشفافية الكاملة
- تتبع التقدم — تحديثات التقدم في الوقت الفعلي أثناء الترميز
- تنزيل — الفيديو المكتمل متاح للتنزيل مع التحقق من الشفافية
بديل WebSocket
للتصدير في الوقت الفعلي، يمكن بث الإطارات مباشرة عبر WebSocket بدلاً من التحميل الدفعي عبر HTTP، مع تحديثات التقدم المباشرة طوال مراحل الالتقاط والتحميل والترميز.
الميزات الرئيسية
- الرسوم المتحركة بالإطارات المفتاحية — رسوم متحركة قائمة على الخط الزمني مع إطارات مفتاحية لكل خاصية
- أكثر من 30 وظيفة تخفيف (Easing Functions) — مكتبة تخفيف (easing) كاملة لمنحنيات الرسوم المتحركة الاحترافية
- تصدير فيديو شفاف — VP9 WebM مع دعم كامل لقناة ألفا
- Canvas مسرّع بواسطة الأجهزة — عرض Pixi.js WebGL لمعاينة سلسة في الوقت الفعلي
- أنواع كائنات متعددة — مستطيلات ودوائر ونصوص ذات رسوم متحركة مستقلة
- معاينة في الوقت الفعلي — تشغيل وإيقاف مؤقت وتمرير عبر الرسوم المتحركة على الفور
- تصدير دفعي وبث — تحميل دفعي عبر HTTP أو بث إطارات في الوقت الفعلي عبر WebSocket
- إخراج قابل للتكوين — إعدادات الدقة و FPS ومعدل البت للتصدير
- Monorepo آمن من حيث النوع (Type-Safe) — أنواع TypeScript مشتركة عبر الواجهة الأمامية والخلفية
- خلفيات مخصصة — لون خلفية وشفافية (alpha) قابلة للتعديل مع دعم للصور/الفيديو
النتائج
المكدس التقني
caseStudyDetail.more دراسات الحالة
استكشف المزيد من تطبيقاتنا التقنية
Kickly: منصة مشاريع مدعومة بـ AI للشركات الناشئة
Kickly هي منصة لإدارة المشاريع مدعومة بـ AI ومصممة خصيصًا للشركات الناشئة — تجمع بين أتمتة المهام الذكية، والتعاون الفريقي، وتتبع التقدم في الوقت الفعلي في منتج واحد.
منصة Catant لإدارة الموارد البشرية والقوى العاملة
Catant هي منصة معيارية لإدارة الموارد البشرية والقوى العاملة تساعد المؤسسات على إدارة الموظفين، الرواتب، الحضور، والامتثال من لوحة تحكم واحدة.
الأسئلة الشائعة
نفذت MicrocosmWorks محرك عرض (rendering engine) قائم على Canvas مع easing curves قابلة للضبط بين keyframes، يدعم linear، bezier، ease-in-out، و custom curve interpolation لخصائص الـ position، scale، rotation، و opacity. يقوم المحرر بعرض معاينات إطارًا بإطار في الوقت الفعلي بمعدل يصل إلى 60fps في المتصفح، ويتضمن timeline تفاعليًا حيث يمكن للمصممين ضبط مواضع الـ keyframe و easing curves بصريًا عن طريق سحب control points.
قامت MicrocosmWorks ببناء server-side rendering pipeline يقوم بتركيب كل إطار مع الحفاظ على alpha channel باستخدام FFmpeg، ويُصدِّر إلى WebM بتقنية VP9 alpha أو Apple ProRes 4444 مع شفافية، نظرًا لأن H.264 codec لا يدعم alpha channels بشكل طبيعي. يُظهر المحرر الـ browser-based معاينة real-time بخلفية checkerboard تُشير إلى الشفافية، ويتم معالجة العرض النهائي server-side لضمان جودة متسقة عبر جميع الإطارات.
نعم، طورت MicrocosmWorks محرك تركيب متعدد الطبقات يدعم طبقات مرتبة حسب المحور Z تحتوي على نصوص بخطوط مخصصة، وصور نقطية ومتجهة، ومقاطع فيديو، وأشكال أولية، لكل منها مسارات تحريك إطارات مفتاحية مستقلة. توفر لوحة الطبقات عناصر تحكم مألوفة تشبه Photoshop، بما في ذلك مفاتيح التبديل للرؤية، وأشرطة تمرير الشفافية، وأنماط الدمج، والتجميع، مما يجعلها بديهية للمصممين الذين لديهم بالفعل خبرة في سير عمل Adobe.
قامت MicrocosmWorks بتحسين المحرر لاستخدام WebGL للتراكب المتسارع بواسطة الأجهزة و Web Workers لحساب الإطارات الرئيسية غير المتوقف، مما أدى إلى تحقيق أداء سلس للمعاينة في الوقت الفعلي للتراكيب التي تحتوي على ما يصل إلى 20-30 طبقة على الأجهزة الحديثة. للتصدير النهائي، يتم إنجاز العمل الثقيل على جانب الخادم حيث تضمن موارد الـ GPU المخصصة جودة إخراج متسقة بغض النظر عن إمكانيات جهاز المستخدم.
تقدم MicrocosmWorks مشاريع محررات الرسوم المتحركة المخصصة بمعدلات تطوير تتراوح من 20 إلى 40 دولارًا في الساعة، ومع محرر كامل الميزات يشمل خط زمني للإطارات الرئيسية (keyframe timeline)، وتركيب متعدد الطبقات (multi-layer composition)، وتصدير الفيديو الشفاف، يتطلب عادةً 4-6 أشهر من التطوير. هذا أكثر فعالية من حيث التكلفة بكثير من البناء على SDKs التجارية التي تفرض رسوم ترخيص لكل مستخدم، ويمنحك الملكية الكاملة لقاعدة الكود (codebase) لتطوير المنتج على المدى الطويل.
مستعد لتحويل عملك؟
دعنا نناقش كيف يمكننا تطبيق حلول مشابهة لتحدياتك.