Motion Skill کے ساتھ ایسی ڈرائنگز متحرک کریں جو جیتی جاگتی محسوس ہوں

موشن اسکل کیا کرتا ہے

آپ کی بنائی ہوئی ہر چیز کے لیے موشن اسکل ڈیزائنرز اور انجینئرز کو کوڈ سے بنائے گئے فن پاروں میں اینیمیشن شامل کرنے میں مدد دیتا ہے، تاکہ وہ تبدیل شدہ عکاسیوں کے سلسلے کے بجائے جاندار محسوس ہوں۔ یہ کرداروں، مخلوقات، پودوں، کپڑے، آگ، دھوئیں، پانی، موسم، روشنیوں، مشینوں، آئیکنز، لوگوز، چارٹس اور مکمل مناظر پر لاگو ہوتا ہے۔

یہ پروجیکٹ ان تفصیلات پر توجہ دیتا ہے جو اینیمیشن کو قابلِ یقین بناتی ہیں: پورے منظر کے لیے ایک گھڑی، حقیقی محوروں کے گرد حرکت، ایسے حصے جو ایک بیٹ بعد حرکت کی پیروی کریں، مسلسل بیکار حرکت، کلیدی پوزز کے درمیان ہموار راستے، محدود ارتعاش، اور مضبوط ٹائمنگ کرووز۔

یہ ایجنٹ سے تیار کردہ اینیمیشن کے عام مسائل کو بھی حل کرتا ہے۔ ہر پوز کو الگ eased tween دینے کے بجائے، اسکل مربوط حرکت، قدرتی منتقلی، واضح پلک جھپکنے، مستحکم رابطوں اور باریک ثانوی حرکت کی حوصلہ افزائی کرتا ہے۔

اسکل انسٹال کریں

skills کمانڈ سے اسکل انسٹال کریں:

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

انسٹالیشن کے بعد اسکل حوالہ جاتی مواد، دوبارہ قابلِ استعمال ٹیمپلیٹس، تجزیاتی ٹولز اور مثالی مناظر فراہم کرتا ہے۔ شامل انجن React Native اور SwiftUI دونوں ٹیمپلیٹس کو سپورٹ کرتا ہے۔

ریپوزٹری کو سمجھیں

مرکزی اسکل گائیڈ پڑھیں

SKILL.md سے آغاز کریں۔ اس میں بنیادی اصول، مختلف موضوعات کے لیے ترکیبیں، متحرک چہرے، مکمل جسم کی اداکاری، منظر پر مبنی ایکشنز، انٹرفیس موشن، عام غلطیاں، حوالہ جاتی ویڈیو کا تجزیہ اور تجویز کردہ ورک فلو بیان کیا گیا ہے۔

پروجیکٹ کے لیے مخصوص موشن نوٹس بنائیں

MOTION.md کو اپنے فن پارے کے ساتھ رکھیں اور کام کے دوران حصہ 2 مکمل کریں۔ درج کریں کہ اینیمیشن کوڈ کہاں موجود ہے، آپ کا پروجیکٹ کن اصولوں کی پیروی کرتا ہے، فن پارہ کیا نہیں کر سکتا، اور آپ تبدیلیوں کی تصدیق کیسے کرتے ہیں۔ اسکل اس فائل کو پہلے پڑھتا ہے، اس لیے یہ موشن میں ترمیم یا تخلیق سے پہلے ایجنٹ کو پروجیکٹ کا اہم سیاق فراہم کرتی ہے۔

اینیمیشن انجن منتخب کریں

ریپوزٹری ہر معاون UI فریم ورک کے لیے ایک انجن شامل کرتی ہے:

• React Native کے لیے motion.ts۔
• SwiftUI کے لیے Motion.swift۔

انجن میں loop اور one-shot clocks، track، flow، seg، wave، loop، bell، seeded اور موشن کرووز شامل ہیں۔ جب آپ کی ڈرائنگ کو متحرک آنکھوں اور منہ کی ضرورت ہو تو ساتھ دیے گئے live-face ٹیمپلیٹس استعمال کریں۔

مرحلہ وار اینیمیشن بنائیں

1. فن پارے اور اس کی حدود بیان کریں۔ موجودہ ڈرائنگ کی ساخت، دستیاب جیومیٹری اور پابندیوں کو دستاویز کرنے کے لیے MOTION.md استعمال کریں۔
2. منظر کو حصوں میں تقسیم کریں۔ جسم، سر، بازو، اشیا، سائے، چہرے کی خصوصیات اور ثانوی عناصر کی شناخت کریں۔ طے کریں کہ کون سے حصے حقیقی محوروں کے گرد گھومیں گے اور کون سے حصے پیچھے رہ کر حرکت کریں گے۔
3. مشترکہ گھڑی منتخب کریں۔ ہر عنصر کو غیر متعلقہ tween دینے کے بجائے ایک ٹائم لائن سے منظر کو مربوط کریں۔ اس سے رابطے اور ردِعمل ہم وقت رہتے ہیں۔
4. کلیدی ایکشنز متعین کریں۔ داخل ہونا، اترنا، لات مارنا، پلک جھپکنا، دیکھنا، ہاتھ ہلانا، بڑھنا یا ٹھہرنا جیسے واقعات کی منصوبہ بندی کریں۔ دستیاب انجن مددگاروں سے ان پوزز کو ہموار حرکت کے ذریعے جوڑیں، جن میں کلیدی پوزز کے درمیان حرکت کے لیے flow بھی شامل ہے۔
5. ثانوی حرکت شامل کریں۔ سر، بازوؤں کے نچلے حصے، دو پونیاں، ٹوپیاں، کین، سائے یا دیگر ڈھیلے حصوں کو بنیادی ایکشن کے بعد معمولی تاخیر سے حرکت کرنے دیں۔
6. رابطے جانچیں۔ یقینی بنائیں کہ پاؤں زمین سے ملتے ہیں، ہاتھ دستوں سے جڑے رہتے ہیں، پھینکی گئی اشیا درست مقامات سے شروع اور ختم ہوتی ہیں، اور ٹکراؤ ڈرائنگ کا حجم برقرار رکھتے ہیں۔
7. نتیجے کا فریم بہ فریم جائزہ لیں۔ بہت چھوٹی، بہت اچانک یا غلط وقت پر ہونے والی حرکت تلاش کرنے کے لیے ریپوزٹری کے تجزیاتی ٹولز اور رینڈر شدہ آؤٹ پٹ استعمال کریں۔

Live-Face ٹیمپلیٹس استعمال کریں

liveFace.tsx اور LiveFace.swift متحرک آنکھیں اور منہ فراہم کرتے ہیں جو نرمی سے حرکت کرتے، پلک جھپکتے اور مسکراتے ہیں۔ آپ جیومیٹری اور رنگ فراہم کرتے ہیں، جس سے ٹیمپلیٹ ہر تاثر کے لیے الگ ڈرائنگ درکار کیے بغیر چہرے کی حرکت شامل کر دیتا ہے۔

چہرے کی تبدیلیوں کو واضح اور مسلسل رکھیں۔ انتہائی مختصر پلک جھپکنے سے گریز کریں جو flicker جیسی لگے، اور ایک تاثر سے دوسرے تاثر پر براہِ راست منتقل ہونے سے بھی بچیں۔ آنکھوں کی معمولی حرکت اور سر اور نگاہ کے درمیان ہلکی تاخیر کردار کو زیادہ متوجہ محسوس کرا سکتی ہے۔

شامل مثالوں کا مطالعہ کریں

Reveal

Reveal منظر فون فریم میں مکمل جسم کی اداکاری دکھاتا ہے۔ ایک سایہ لٹکتے پاؤں کے ساتھ تیرتا ہوا داخل ہوتا ہے، ایک بچہ کششِ ثقل کے ساتھ گرتا اور اترتے وقت سکڑتا ہے، ایک گیند اندر لڑھکتی ہے، آنکھیں اس کا پیچھا کرتی ہیں، اور کردار لات مارتا، مڑتا، ہاتھ ہلاتا اور بیکار حرکت جاری رکھتا ہے۔ یہ سلسلہ 60 فریم فی سیکنڈ پر نو سیکنڈ کا loop ہے اور منظر کی ایک گھڑی استعمال کرتا ہے۔

Garden

Garden منظر کردار کی اداکاری کو ماحولیاتی تبدیلی کے ساتھ ملاتا ہے۔ پانی کے قطرے seeded قوسوں کی پیروی کرتے ہیں، مٹی گہری ہوتی ہے، تنا دو دھکوں میں بڑھتا ہے، پتے ترتیب سے کھلتے ہیں، پنکھڑیاں مڑتے ہوئے کھلتی ہیں، اور ایک تتلی اترتی ہے جبکہ تنا اس کے وزن کے مطابق ردِعمل دیتا ہے۔ کردار کا سر اور آنکھیں تتلی کا پیچھا کرتے ہیں، جبکہ دو پونیاں، ٹوپی اور پانی دینے والا کین حرکت کے پیچھے تاخیر سے چلتے ہیں۔

Chef

Chef منظر ٹائمنگ، کششِ ثقل، پیش بندی، حیرت اور رابطہ دکھاتا ہے۔ ایک پین کیک پلٹتا، سکڑتے ہوئے اترتا، پھر دوسری کوشش میں بہت اونچا چلا جاتا ہے، شیف کی ٹوپی سے ٹکراتا، ڈگمگاتا، پھسل کر نیچے آتا اور پین میں پکڑا جاتا ہے۔ بھاپ اور شعلے کی حرکت اضافی waves استعمال کرتی ہے، جبکہ ہاتھ کو دستے پر درست کیا جاتا ہے۔

Orbit

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 فریم فی سیکنڈ کی رفتار سے ایک frames ڈائریکٹری میں رینڈر کریں:

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

دیگر مناظر رینڈر کرنے کے لیے reveal کی جگہ garden، chef، یا orbit استعمال کریں۔ رینڈر کیے گئے فریم سلسلے کو FFmpeg کے ذریعے MP4 میں تبدیل کریں:

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 کی skills اور Benji Taylor کی Family values شامل ہیں۔ انٹرفیس کی حرکت کو بامقصد رکھیں اور اسے اردگرد کے ڈیزائن سے ہم آہنگ بنائیں۔

نتیجہ

Motion skill کوڈ سے بنائے گئے آرٹ ورک کو پُراثر اینیمیشن میں تبدیل کرنے کے لیے ایک عملی بنیاد فراہم کرتی ہے۔ اسے npx کے ذریعے انسٹال کریں، اپنے پروجیکٹ کی دستاویز MOTION.md میں لکھیں، مشترکہ گھڑی کے گرد تعمیر کریں، React Native یا SwiftUI ٹیمپلیٹس استعمال کریں، اور رینڈر کیے گئے فریموں اور تجزیاتی ٹولز سے نتیجے کا معائنہ کریں۔ بنیادی مقصد سادہ ہے: پوزز کو ہمواری سے جوڑیں، پورے منظر کو ہم آہنگ کریں، اور ہر حصے کو جاندار محسوس ہونے کے لیے درکار ٹائمنگ اور حرکت کا تسلسل دیں۔