فریمر میں انٹرایکٹو پروٹو ٹائپ ڈیزائن کریں

مواد

• خاکہ سے درآمد کریں
• ماسک اور اوتار کی پرتیں بنائیں
• ریاستوں کی وضاحت کریں
• ریاستوں کے درمیان متحرک
• اسے اصلی موبائل آلہ پر آزمائیں

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

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

میں آپ کو دو خیالات کے ساتھ آئی او ایس ایپ پروٹوٹائپ کی مثال کے طور پر ، فریمر میں پروٹوٹائپنگ کی بنیادی باتیں سکھاتا ہوں: ایک پروفائل ویو اور صارف کے اوتار کی تصویر کا ایک زوم-ویو۔ ہم پروٹو ٹائپ کریں گے کہ کس طرح توسیعی تصویر کا منظر کھل جائے گا اور بند ہوگا ، اور ہم اسے متحرک بھی کرلیں گے۔ یہاں آن لائن ڈیمو دیکھیں (ماخذ کوڈ دیکھنے کے لئے ، اوپر بائیں کونے میں آئکن پر کلک کریں)۔ آپ کو فریمر کے مفت ٹرائل کی بھی ضرورت ہوگی ، جو آپ فریمجر ڈاٹ کام پر حاصل کرسکتے ہیں۔

خاکہ سے درآمد کریں

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

خاکہ = فریمر۔ امپورٹر.لوڈ "امپورٹڈ / پروفائل"

درآمد شدہ پرتوں تک رسائی کے ل to اس متغیر کا استعمال کریں۔ مثال کے طور پر ، اسکیچ فائل میں ’مشمولات‘ نامی اس پرت کا حوالہ دینے کے ل Fra ، آپ فریمر میں اسکیچ کوونٹ ٹائپ کریں گے۔

ماسک اور اوتار کی پرتیں بنائیں

اس پروٹو ٹائپ کا بنیادی کام اوتار کی تصویر کو ٹیپ ہونے پر اسے بڑھانا ہے ، اور پھر جب اسے دوبارہ ٹیپ کیا جاتا ہے تو اسے بند کرنا ہے۔ سب سے پہلے ، ہم دو ماسک تہوں تیار کریں گے a نیسٹڈ ماسک ، یا دوسرے ماسک کے اندر ماسک۔ ایک عمدہ ، ٹھیک ٹھیک افتتاحی اور اختتامی اثر پیدا کرنے کے ل We ہم دونوں ماسک کو ایک ساتھ متحرک کردیں گے۔ ہیڈر ماسک پرت اوتار کی تصویر کو ایک مستطیل میں تراشے گی جب اس کی وسعت ہوتی ہے ، اور ماسک پرت اس کو پروفائل ویو کے چھوٹے دائرہ میں کھڑا کردیتی ہے۔

اس طرح ہیڈر ماسک پرت بنائیں:

ہیڈر ماسک = نئی پرت کی چوڑائی: اسکرین.واڈتھ ، اونچائی: 800 پس منظرکا رنگ: "شفاف"

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

اگلا ، ماسک پرت بنائیں:

ماسک = نئی پرت کی چوڑائی: 1000 ، اونچائی: 1000 پس منظر کا رنگ: "شفاف" ، بارڈر ریڈیئس: 500 y: اسکیچ.ہیڈر۔ اونچائی - 100 سپر لیئر: ہیڈر ماسک پیمانہ: 0.2 ، اصلی: 0

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

باقی پراپرٹی ، سپر لیئر ، ہیڈر مسک پرت کو سیٹ کرتی ہے جو ہم نے اس نئی پرت کے والدین کی حیثیت سے بنائی ہے۔ فریمر میں نقاب پوش اس طرح کام کرتا ہے۔ صرف سپر لیئر پراپرٹی کو سیٹ کریں ، اور والدین کی پرت بچے کو نقاب پوش کردے گی۔

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

اوتار = نئی پرت کی تصویر: "images / avatar.png" چوڑائی: mask.width ، اونچائی: ماسک.ہائٹ superLayer: ماسک ، فورس 2d: سچ

نوٹ کریں کہ ہم اوتار کے سپرلیئر کو ماسک پرت بنائے ہیں۔ اب دونوں ہیڈر میکسک میں گھونسلے ہوئے ہیں۔ ہم نے چوڑائی اور اونچائی بھی طے کی ہے تاکہ نقش پوش علاقے کو مکمل طور پر بھر دے۔

آخر میں ، ہم اس حرکت پذیری کے ل store استعمال کیے جانے والے ماسک کی Y پوزیشن کو اسٹور کرنے کے لئے ایک متغیر بنائیں گے۔ ہم اسے افقی طور پر مرکز میں رکھیں گے ، کیونکہ یہ اسکرین سے بڑا ہے۔

ماسک وے = ماسک۔ ماسک۔ سینٹر ایکس ()

ریاستوں کی وضاحت کریں

حرکت پذیری پیدا کرنے کا پہلا قدم آغاز اور اختتامی ریاستوں کی وضاحت ہے۔ فریمر میں ، ریاستیں کلیدی الفاظ کی طرح ہیں جو کوڈ میں تحریری شکل میں ہیں۔ ریاست صرف جائیدادوں کا ایک مجموعہ ہے۔ ہر پرت کی پہلے سے طے شدہ حالت ہوتی ہے۔ اس پروٹو ٹائپ کے ل that ، یہ ڈیفالٹ حرکت پذیری کے نقط point آغاز کا کام کرے گا ، لہذا ہمیں ہر پرت کے لئے صرف دوسری حالت طے کرنے کی ضرورت ہے۔

ریاستوں کے لئے نحو بہت آسان ہے۔ پرت کا حوالہ دیں ، پرت.اسٹیٹ ڈاٹ ایڈ () کا طریقہ استعمال کریں ، اور پھر شامل ہونے والی خصوصیات کی فہرست بنائیں۔

sketch.content.states.add (چھپائیں: {واضح

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

کوڈ کی دوسری سطر ہیڈر ماسک کے ل creates ریاست بناتی ہے ، جو اسے آسانی سے 120 کے Y مقام پر لے جائے گی۔ جب اوتار کی تصویر کو بڑھایا جاتا ہے تو اس سے عنوان اور قریبی بٹن اسکرین کے اوپری حصے میں دکھائے گا۔ یہ اوتار تصویر کی کھیتی باڑیوں کو بھی متحرک کرے گا۔

آخر میں ، ماسک پرت کے لئے ایک نئی ریاست دونوں اس کو بڑھا کر اس کو آگے بڑھائے گی ، ماسک وئیر ایبل کا استعمال کرکے جو ہم نے پہلے تیار کیا ہے۔ چونکہ ماسک پرت کا اصلی (یا اینکر پوائنٹ) اس کا اوپری کنارہ ہے ، لہذا ہمیں اسے 420 پکسلز کی طرف بڑھانا ہوگا تاکہ تصویر کا مرکز نظر آئے۔

ریاستوں کے درمیان متحرک

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

avatar.on واقعات.کلک ، -> ہیڈر میسک.اسٹیٹ.سٹینٹ () ماسک.اسٹیٹ.اسکسٹ () اسکیچ.کونٹ.سٹیٹس.نک ()

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

پھر ہم ہر پرت کا محض حوالہ دیتے ہیں ، اور ریاستوں کو ٹوگل کرنے کے لئے اس لیئر اسٹیٹس ڈاٹ نیکسٹ () کا طریقہ استعمال کرتے ہیں۔ جب آپ layer.states.next () استعمال کرتے ہیں تو ، فریمر اپنی اندرونی ڈیفالٹ حرکت پذیری کی ترتیبات استعمال کرے گا۔ یہ انتہائی آسان ہے ، لیکن آپ حرکت پذیری کے منحنی خطوط کو بہتر بناتے ہوئے اور بھی بہتر متحرک تصاویر تیار کرسکتے ہیں۔

جب ہم یہاں موجود ہیں تو ریاستوں کا استعمال کرتے وقت ، آپ پرت کی حمایت کرتے ہیں۔ آسانی سے ہر حرکت پذیری وکر کو الگ الگ تبدیل کر سکتے ہیں۔ صرف تین معمولی ایڈجسٹمنٹ کے ساتھ ، حرکت پذیری بالکل مختلف محسوس ہوتی ہے۔

sketch.content.states.animationOptions = وکر: "آسانی" ، وقت: 0.3 ہیڈر ماسک.اسٹیٹ.اینیشنآپشن = وکر: "بہار (150 ، 20 ، 0)" mask.states.animationOptions = وکر: "بہار (300 ، 30 ، 0) "

اس مواد کی پرت کے لئے جو ختم ہورہا ہے اور اس کے لئے ، ہم ایک آسان منحنی خطوط ، آسانی ، اور حرکت پذیری کا دورانیہ 0.3 پر متعین کریں گے تاکہ یہ بہت جلد ہو۔

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

اسے اصلی موبائل آلہ پر آزمائیں

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

آپ نے فریمر میں اپنے ڈیزائن کو پروٹو ٹائپ کرنے کے ل everything جاننے کی ضرورت سب کچھ سیکھ لیا ہے۔ تم کس کا انتظار کر رہے ہو

الفاظ: جارود ڈرسڈیل

جارود ڈرسڈیل ایک مصنف ، ڈیزائن کنسلٹنٹ ، ڈیجیٹل پروڈکٹ بنانے والا ہے۔ یہ مضمون اصل میں نیٹ میگزین کے 270 کے شمارے میں شائع ہوا تھا۔

پسند آیا؟ یہ پڑھیں!

• خاکہ کو کلک کرنے کے قابل ، رواں پروٹو ٹائپ بنائیں
• بلاگ کیسے شروع کریں
• بہترین تصویری ایڈیٹرز