حرّك الرسومات ديالك وخليها كتبان حيّة مع مهارة Motion

شنو كيدير Motion Skill

الـMotion For Anything You Draw skill كيساعد الديزاينرز والمهندسين يحرّكو الرسومات المرسومة بالكود باش تبان حيّة، ماشي بحال سلسلة ديال الرسومات اللي كتبدّل وحدة بوحدة. كيخدم مع الشخصيات، الكائنات، النباتات، الثوب، العافية، الدخان، الما، الطقس، الضواو، الماكينات، الأيقونات، اللوغوهات، الشارتات، والمشاهد الكاملة.

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

وكيتعامل حتى مع المشاكل الشائعة فالأنيميشن اللي كيتولد بالوكلاء. بلا ما يخلي كل وضعية تستعمل حركة eased مستقلة، الـskill كيشجّع الحركة المنسقة، الانتقالات الطبيعية، الرمشات الواضحة، نقاط التلامس الثابتة، والحركة الثانوية الخفيفة.

ثبّت الـSkill

ثبّت الـskill باستعمال الأمر skills:

npx skills@latest add rossark0/rossark-motion-skill

من بعد التثبيت، الـskill كيوفّر مواد مرجعية، قوالب قابلة لإعادة الاستعمال، أدوات للتحليل، ومشاهد نموذجية. المحرّك اللي داخل فيه كيدعم قوالب React Native وSwiftUI بجوج.

فهم المستودع

قرا الدليل الرئيسي ديال الـskill

بدا بـSKILL.md. كيوصف المبادئ الأساسية، وصفات لمواضيع مختلفة، الوجوه الحية، التمثيل بالجسم كامل، الأفعال المبنية على المشاهد، حركة الواجهات، الأخطاء الشائعة، تحليل فيديوهات مرجعية، وسير العمل الموصى به.

صايب ملاحظات الحركة الخاصة بالمشروع

نسخ MOTION.md حدّ الرسومات ديالك وكمّل الجزء 2 وانت خدام. سجّل فين كاين كود الأنيميشن، القواعد اللي كيتبعها المشروع، شنو ما كتقدرش الرسومات تدير، وكيفاش كتتحقق من التغييرات. الـskill كيقرا هاد الملف اللول، وبهذا كيعطي للوكيل السياق المهم ديال المشروع قبل ما يبدّل ولا ينشئ الحركة.

ختار محرّك الأنيميشن

المستودع فيه محرّك لكل إطار واجهة مدعوم:

• motion.ts لـ React Native.
• Motion.swift لـ SwiftUI.

المحرّك فيه ساعات ديال الحلقات واللقطات المفردة، وtrack وflow وseg وwave وloop وbell وseeded، ومنحنيات الحركة. استعمل قوالب الوجه الحي المرافقة ملي الرسم ديالك كيحتاج عيون وفم كيتحرّكو.

بني الأنيميشن خطوة بخطوة

1. وصف الرسومات والحدود ديالها. استعمل MOTION.md باش توثّق بنية الرسم الموجودة، الهندسة المتاحة، والقيود.
2. قسّم المشهد لأجزاء. حدّد الجسم، الراس، الأطراف، الأدوات، الضلال، ملامح الوجه، والعناصر الثانوية. قرّر شنو من الأجزاء كيدور حول محاور حقيقية وشنو خاصو يتبع الحركة.
3. ختار ساعة مشتركة. نسّق المشهد من خط زمني واحد بلا ما تعطي لكل عنصر حركة مستقلة وما عندهاش علاقة بالباقي. هاد الشي كيخلي نقاط التلامس وردود الفعل متزامنة.
4. حدّد الأفعال الرئيسية. خطّط لأحداث بحال الدخول، الهبوط، الركل، الرمش، النظر، التلويح، النمو، ولا الاستقرار. ربط هاد الوضعيات بحركة ناعمة باستعمال مساعدات المحرّك المتاحة، ومن بينها flow للحركة عبر الوضعيات الرئيسية.
5. زِد الحركة الثانوية. خلّي الراس، السواعد، الضفائر، القبعات، العلب، الضلال، ولا الأجزاء الرخوة الأخرى يتبعو الحركة الأساسية بتأخير خفيف.
6. راجع نقاط التلامس. تأكد بلي الرجلين كيوصلو للأرض، واليدين بقاو مشدودين للمقابض، والأجسام المرماة كيبداو وكيساليو فالمواضع الصحيحة، والاصطدامات كتحافظ على الحجم ديال الرسم.
7. راجع النتيجة فكل فريم. استعمل أدوات التحليل ديال المستودع والخرج المرندَر باش تلقى الحركة اللي صغيرة بزاف، مفاجئة بزاف، ولا التوقيت ديالها ماشي صحيح.

استعمل قوالب الوجه الحي

liveFace.tsx وLiveFace.swift كيوفّرو عيون وفم حيّين كينسابو، كيرمشو، وكيبتاسمو. نتا كتزوّد الهندسة والألوان، والقالب كيزيد حركة الوجه بلا ما تحتاج ترسم كل تعبير بوحدو.

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

درس الأمثلة اللي داخلة

Reveal

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

Garden

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

Chef

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

Orbit

مشهد المدار كيبين ترتيب العمق. البطاقات كتدور حدا طائر، وكتبان قدّامو ولا موراه ولا من الجنب حسب الموقع ديالها. الطائر كيعوم وكيْمِيل، جناحاتو كيرفرفو، رجليه والريشات ديالو كيتبعو الحركة، وكتبان اللمعات فـأوقات محددة مسبقاً أثناء الحلقة.

رَندَر ديموهات SwiftUI

فـmacOS 14 ولا أحدث، كومپايِل قوالب SwiftUI ومشاهد الديمو باستعمال:

swiftc -parse-as-library -target arm64-apple-macos14 templates/swiftui/Motion.swift templates/swiftui/LiveFace.swift demo/*.swift -o /tmp/render-demo

رَندَر مشهد Reveal بـ60 فريم فالثانية داخل مجلد ديال الفريمات:

/tmp/render-demo reveal /tmp/frames phone fps=60

استعمل garden ولا chef ولا orbit بلاصة reveal باش ترَندَر المشاهد الأخرى. حوّل تسلسل الفريمات المرَندَر إلى MP4 باستعمال FFmpeg:

ffmpeg -framerate 60 -i /tmp/frames/%04d.png -c:v libx264 -pix_fmt yuv420p -crf 20 demo/reveal.mp4

الرَندَر كيعطيك طريقة ثابتة باش تراجع الخط الزمني كامل، وتقارن بين التعديلات، وتتأكد باللي الأنيميشن باقي مستقر فمعدل الفريمات المستهدف.

حلّل الحركة المرجعية

إلا كان عندك فيديو مرجعي، درستو قبل ما تبني. الحركات الصغيرة اللي صعيب تبان فالوقت الحقيقي تقدر تحدد واش النتيجة طبيعية ولا ميكانيكية.

• sheet.sh كينشئ أوراق معاينة من فيديو بالمعدل الكامل ديال الفريمات، وكيخلي التوقيت والتغييرات بين الفريمات أسهل فالفحص.
• track_edges.py كيقيس حواف العنصر فكل فريم، وكيعاون يبيّن الرعشة الخفيفة، والعوم، والتمايل.
• sample_colors.py كيقرا الألوان الدقيقة من فريم ديال الفيديو.

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

نصائح متقدمة للحركة

فضّل التوقيت المنسّق

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

استعمل المتابعة والترقّب

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

خلي الحركة الهادئة مستمرة

الشخصيات والمشاهد ما خاصهاش تجمّد بين الحركات الرئيسية. التنفس الخفيف، والرمش، والعوم، والتمايل، ولا أي حركة أخرى بسعة منخفضة تقدر تخلي الحلقة حية بلا ما تشتت على الحركة الأساسية.

حافظ على الحجم وقت الاصطدام

الانضغاط والتمدد خاصهما يدعما الرسم، ماشي يشوهاه بشكل عشوائي. أمثلة Reveal وChef كيستعملو الانضغاط وقت الهبوط، مع الحفاظ على قابلية التعرّف على الشخصية ولا العنصر وعلى ارتباطو بالمشهد.

استعمل التنويع المحدد مسبقاً ملي كيهم التكرار

فالتفاصيل المتكررة بحال اللمعات ولا قطرات الماء، استعمل سلوكاً محدداً مسبقاً ملي خاص الحركة تتنوع مع بقائها قابلة لإعادة الإنتاج. التوقيت القابل لإعادة الإنتاج كيسهّل تصحيح الأخطاء ومقارنة الرَندَر.

طبّق إرشادات الحركة فالواجهات

بالنسبة للحركة داخل الواجهة، راجع المبادئ المشار ليها فالمشروع، ومنها مهارات Emil Kowalski وFamily values ديال Benji Taylor. خلي حركة الواجهة عندها هدف ومنسجمة مع التصميم المحيط.

الخلاصة

مهارة Motion كتوفّر أساساً عملياً لتحويل الرسومات المرسومة بالكود لأنيميشن معبّر. ثبّتها باستعمال npx، ووثّق المشروع ديالك فـMOTION.md، وبني باستعمال ساعة مشتركة، واستعمل قوالب React Native ولا SwiftUI، وراجع النتيجة بالفريمات المرَندَرة وأدوات التحليل. الهدف الأساسي بسيط: ربط الوضعيات بسلاسة، وتنسيق المشهد كامل، وإعطاء كل جزء التوقيت والمتابعة اللي محتاجهم باش يبان حي.