ఫ్రేమర్‌లో ఇంటరాక్టివ్ ప్రోటోటైప్‌లను రూపొందించండి

విషయము

• స్కెచ్ నుండి దిగుమతి
• ముసుగు మరియు అవతార్ పొరలను సృష్టించండి
• రాష్ట్రాలను నిర్వచించండి
• రాష్ట్రాల మధ్య యానిమేట్
• నిజమైన మొబైల్ పరికరంలో దీన్ని ప్రయత్నించండి

డిజైన్ ప్రోటోటైపింగ్ వెనుక ఉన్న కారణం క్రొత్తది కాదు - ఇది బ్రౌజర్‌లో రూపకల్పన గురించి అన్ని సంచలనాలు. మీరు డిజైన్‌ను దాని వాస్తవ సందర్భంలో చూసినప్పుడు, ఇది పూర్తిగా భిన్నంగా ఉంటుంది. ఇంటర్ఫేస్ ఎలా పని చేస్తుంది మరియు అనుభూతి చెందుతుందనే దానిపై మీరు ump హలు చేయనవసరం లేనప్పుడు మీరు మంచి నిర్ణయాలు తీసుకుంటారు. ఇది అదనపు పనిలా అనిపించవచ్చు, కానీ మీ డిజైన్ పని చూడటం ద్వారా మీరు పొందగల అంతర్దృష్టులు అమూల్యమైనవి.

ఫ్రేమర్ కొత్త కోడ్-ఆధారిత ప్రోటోటైపింగ్ సాధనం. మీరు సాధారణంగా మాదిరిగానే స్కెచ్ (లేదా ఫోటోషాప్) లో మోకాప్‌లను సృష్టించవచ్చు మరియు వాటిని ఫ్రేమర్‌లోకి దిగుమతి చేసుకోవచ్చు. అప్పుడు, కొద్దిగా కాఫీస్క్రిప్ట్ రాయండి మరియు మీరు చాలా సాధించవచ్చు.

ఫ్రేమర్‌లో ప్రోటోటైపింగ్ యొక్క ప్రాథమికాలను నేను మీకు నేర్పించబోతున్నాను, iOS వీక్షణ ప్రోటోటైప్ యొక్క ఉదాహరణను రెండు వీక్షణలతో ఉపయోగిస్తాను: ప్రొఫైల్ వీక్షణ మరియు యూజర్ యొక్క అవతార్ ఇమేజ్ యొక్క జూమ్-ఇన్ వ్యూ. విస్తరించిన ఫోటో వీక్షణ ఎలా తెరుచుకుంటుంది మరియు మూసివేయబడుతుందో మేము ప్రోటోటైప్ చేస్తాము మరియు మేము దానిని యానిమేట్ చేస్తాము. ఆన్‌లైన్ డెమోను ఇక్కడ చూడండి (సోర్స్ కోడ్‌ను చూడటానికి, ఎగువ-ఎడమ మూలలో ఉన్న చిహ్నాన్ని క్లిక్ చేయండి). మీకు ఫ్రేమర్ యొక్క ఉచిత ట్రయల్ అవసరం, మీరు framerjs.com లో పొందవచ్చు.

స్కెచ్ నుండి దిగుమతి

మొదటి దశ స్కెచ్ నుండి ఫ్రేమర్‌లోకి పొరలను దిగుమతి చేసుకోవడం. డిజైన్ స్కెచ్‌లో తెరిచినప్పుడు ఫ్రేమర్‌లోని దిగుమతి బటన్‌ను క్లిక్ చేసి, ఆ తరువాత వచ్చే డైలాగ్‌లో సరైన ఫైల్‌ను ఎంచుకోండి. ఫ్రేమర్ ప్రతి పొర నుండి స్వయంచాలకంగా చిత్రాలను దిగుమతి చేస్తుంది మరియు ఇలాంటి కోడ్ ద్వారా వాటిని ప్రాప్యత చేస్తుంది:

sketch = Framer.Importer.load "దిగుమతి / ప్రొఫైల్"

దిగుమతి చేసిన పొరలను యాక్సెస్ చేయడానికి ఆ వేరియబుల్ ఉపయోగించండి. ఉదాహరణకు, స్కెచ్ ఫైల్‌లో ‘కంటెంట్’ అనే పొరను సూచించడానికి, మీరు ఫ్రేమర్‌లో స్కెచ్.కాంటెంట్‌ను టైప్ చేయండి.

ముసుగు మరియు అవతార్ పొరలను సృష్టించండి

ఈ ప్రోటోటైప్ యొక్క ప్రధాన విధి ఏమిటంటే, అవతార్ ఇమేజ్‌ను ట్యాప్ చేసినప్పుడు దాన్ని విస్తరించడం, ఆపై దాన్ని మళ్లీ ట్యాప్ చేసినప్పుడు దాన్ని మూసివేయడం. మొదట, మేము రెండు ముసుగు పొరలను సృష్టిస్తాము - ఒక సమూహ ముసుగు లేదా మరొక ముసుగు లోపల ముసుగు. చక్కని, సూక్ష్మమైన ప్రారంభ మరియు ముగింపు ప్రభావాన్ని సృష్టించడానికి మేము రెండు ముసుగులను ఒకేసారి యానిమేట్ చేస్తాము. హెడర్ మాస్క్ లేయర్ అవతార్ ఫోటోను విస్తరించినప్పుడు దీర్ఘచతురస్రానికి కత్తిరిస్తుంది మరియు ముసుగు పొర దానిని ప్రొఫైల్ వీక్షణలో చిన్న సర్కిల్‌కు కత్తిరిస్తుంది.

ఇలా హెడర్ మాస్క్ పొరను సృష్టించండి:

headerMask = క్రొత్త లేయర్ వెడల్పు: స్క్రీన్.విడ్త్, ఎత్తు: 800 నేపథ్య రంగు: "పారదర్శక"

కోడ్ యొక్క మొదటి పంక్తి కొత్త పొరను సృష్టిస్తుంది మరియు పేరు పెడుతుంది. అప్పుడు, కాఫీస్క్రిప్ట్ యొక్క ఇండెంటేషన్ సింటాక్స్ ఉపయోగించి, మేము వెడల్పు, ఎత్తు మరియు నేపథ్య లక్షణాలను సెట్ చేస్తాము. మేము పారదర్శక నేపథ్యాన్ని ఉపయోగిస్తాము కాబట్టి అవతార్ ఫోటో విస్తరించినప్పుడు క్రింద ఉన్న పొరలు కనిపిస్తాయి.

తరువాత, ముసుగు పొరను సృష్టించండి:

ముసుగు = కొత్త లేయర్ వెడల్పు: 1000, ఎత్తు: 1000 నేపథ్య రంగు: "పారదర్శక", బోర్డర్ రేడియస్: 500 వై: స్కెచ్.హెడెర్.హైట్ - 100 సూపర్ లేయర్: హెడర్‌మాస్క్ స్కేల్: 0.2, మూలం వై: 0

మేము క్రొత్త పొరను సృష్టించి, లక్షణాలను అదే విధంగా సెట్ చేస్తాము. పెద్ద బోర్డర్ రేడియస్ ఈ పొరను వృత్తంగా చేస్తుంది. మేము ముసుగు పొరను ఉంచుతాము, కనుక ఇది స్కెచ్ నుండి దిగుమతి చేయబడిన హెడర్ పొరను అతివ్యాప్తి చేస్తుంది. మేము కూడా 20 శాతం లేదా 0.2 కి స్కేల్ చేస్తాము. సున్నా యొక్క మూలం Y చిత్రం యొక్క యాంకర్ పాయింట్ లేదా రిజిస్ట్రేషన్‌ను ఎగువ అంచుకు సెట్ చేస్తుంది.

మిగిలిన ఆస్తి, సూపర్ లేయర్, ఈ క్రొత్త పొర యొక్క పేరెంట్‌గా మేము సృష్టించిన హెడర్‌మాస్క్ పొరను సెట్ చేస్తుంది. ఫ్రేమర్లో మాస్కింగ్ ఈ విధంగా పనిచేస్తుంది. సూపర్ లేయర్ ఆస్తిని సెట్ చేయండి మరియు పేరెంట్ లేయర్ పిల్లవాడిని ముసుగు చేస్తుంది.

తరువాత, మేము అవతార్ గ్రాఫిక్‌ను సృష్టించి, ఆ కొత్త ముసుగుల లోపల ఉంచాలి. పంట సరిహద్దులను జూమ్ చేయడానికి మరియు యానిమేట్ చేయడానికి, మేము అవతార్ పొరను మాన్యువల్‌గా సృష్టిస్తాము. ప్రాజెక్ట్ ఫోల్డర్ యొక్క ‘చిత్రాలు’ సబ్ ఫోల్డర్‌లో ఫోటోను కాపీ చేయండి. ఆ చిత్రాన్ని ఉపయోగించి పొరను సృష్టించండి:

avatar = క్రొత్త లేయర్ చిత్రం: "images / avatar.png" వెడల్పు: mask.width, height: mask.height superLayer: mask, force2d: true

అవతార్ యొక్క సూపర్ లేయర్‌ను మాస్క్ లేయర్‌గా సెట్ చేసినట్లు గమనించండి. రెండూ ఇప్పుడు హెడర్ మాస్క్ లోపల గూడులో ఉన్నాయి. మేము వెడల్పు మరియు ఎత్తును కూడా సెట్ చేసాము, కాబట్టి చిత్రం ముసుగు చేసిన ప్రాంతాన్ని పూర్తిగా నింపుతుంది.

చివరగా, మేము యానిమేషన్ కోసం ఉపయోగించే ముసుగు యొక్క Y స్థానాన్ని నిల్వ చేయడానికి వేరియబుల్‌ని సృష్టిస్తాము. ఇది స్క్రీన్ కంటే పెద్దదిగా ఉన్నందున మేము దానిని అడ్డంగా కేంద్రీకరిస్తాము.

maskY = mask.y mask.centerX ()

రాష్ట్రాలను నిర్వచించండి

యానిమేషన్‌ను రూపొందించడంలో మొదటి దశ ప్రారంభ మరియు ముగింపు స్థితులను నిర్వచించడం. ఫ్రేమర్‌లో, రాష్ట్రాలు కోడ్‌లో వ్రాసిన కీఫ్రేమ్‌ల వంటివి. ఒక రాష్ట్రం కేవలం ఆస్తుల సమాహారం. ప్రతి పొరకు డిఫాల్ట్ స్థితి ఉంటుంది. ఈ నమూనా కోసం, ఆ డిఫాల్ట్ యానిమేషన్‌కు ప్రారంభ బిందువుగా ఉపయోగపడుతుంది, కాబట్టి మేము ప్రతి పొరకు రెండవ స్థితిని మాత్రమే సెట్ చేయాలి.

రాష్ట్రాల వాక్యనిర్మాణం చాలా సులభం. పొరను సూచించండి, layer.states.add () పద్ధతిని ఉపయోగించండి, ఆపై చేర్చవలసిన లక్షణాలను జాబితా చేయండి.

sketch.content.states.add (దాచు: {అస్పష్టత: 0}) headerMask.states.add (తరలించు: {y: 120}) mask.states.add (పెరుగుతాయి: {స్కేల్: 1.1, వై: మాస్క్వై - 420})

కంటెంట్ లేయర్ యొక్క రెండవ స్థితి, ఇది స్కెచ్ నుండి దిగుమతి చేయబడింది మరియు అన్ని ఇతర ప్రొఫైల్ స్క్రీన్ అంశాలను కలిగి ఉంది, ఇది పూర్తిగా పారదర్శకంగా ఉండాలి. ఈ విధంగా, అవతార్ విస్తరించినప్పుడు, మాకు నల్ల నేపథ్యం ఉంటుంది మరియు మిగిలిన దిగుమతి చేసుకున్న చిహ్నాలు మరియు అంశాలు కనిపిస్తాయి.

కోడ్ యొక్క రెండవ పంక్తి హెడర్ మాస్క్ కోసం ఒక స్థితిని సృష్టిస్తుంది, ఇది దానిని 120 యొక్క Y స్థానానికి క్రిందికి కదిలిస్తుంది. అవతార్ ఫోటో విస్తరించినప్పుడు ఇది టైటిల్ మరియు క్లోజ్ బటన్‌ను స్క్రీన్ పైభాగంలో చూపించడానికి అనుమతిస్తుంది. ఇది అవతార్ ఫోటో యొక్క పంట సరిహద్దులను కూడా యానిమేట్ చేస్తుంది.

చివరగా, ముసుగు పొర కోసం ఒక క్రొత్త స్థితి మేము ఇంతకుముందు సృష్టించిన మాస్క్వై వేరియబుల్ ఉపయోగించి దాన్ని స్కేల్ చేసి పైకి కదిలిస్తుంది. ముసుగు పొర యొక్క మూలం Y (లేదా యాంకర్ పాయింట్) దాని ఎగువ అంచు కాబట్టి, మేము దానిని 420 పిక్సెల్‌ల ద్వారా పైకి తరలించాలి, తద్వారా చిత్రం మధ్యలో కనిపిస్తుంది.

రాష్ట్రాల మధ్య యానిమేట్

డిఫాల్ట్ స్టేట్స్ మరియు మేము ఇప్పుడే సృష్టించిన క్రొత్త వాటి మధ్య యానిమేట్ చేయడానికి, మాకు మరో నాలుగు పంక్తులు మాత్రమే అవసరం. మేము అవతార్ లేయర్‌పై క్లిక్ హ్యాండ్లర్‌ను సెట్ చేస్తాము. వినియోగదారు దాన్ని ప్రొఫైల్ స్క్రీన్‌లో నొక్కినప్పుడు, సైక్లింగ్ స్థితుల ద్వారా మేము విస్తరించిన వీక్షణకు మారుతాము. ఇది మళ్లీ నొక్కబడినప్పుడు, మేము డిఫాల్ట్ స్థితికి తిరిగి వెళ్తాము, కనుక ఇది చిన్న సర్కిల్‌కు తిరిగి వస్తుంది. అదే కోడ్ పంక్తులు రెండు పరస్పర చర్యలను నిర్వహిస్తాయి:

avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()

ఈ బ్లాక్ యొక్క మొదటి పంక్తి అవతార్ లేయర్‌పై క్లిక్ హ్యాండ్లర్‌ను సెట్ చేస్తుంది. ఎప్పుడైనా దాన్ని ట్యాప్ చేస్తే, అది ఎలా కత్తిరించబడినా లేదా ఏ పరిమాణంలో ఉన్నా, అనుసరించే స్టేట్‌మెంట్‌లు అమలు అవుతాయి.

అప్పుడు మేము ప్రతి పొరను సూచిస్తాము మరియు రాష్ట్రాలను టోగుల్ చేయడానికి layer.states.next () పద్ధతిని ఉపయోగిస్తాము. మీరు layer.states.next () ను ఉపయోగించినప్పుడు, ఫ్రేమర్ దాని అంతర్గత డిఫాల్ట్ యానిమేషన్ సెట్టింగులను ఉపయోగిస్తుంది. ఇది చాలా సౌకర్యవంతంగా ఉంటుంది, కానీ మీరు యానిమేషన్ వక్రతలను కట్టుకోవడం ద్వారా మరింత మంచి యానిమేషన్లను రూపొందించవచ్చు.

మేము ఇక్కడ ఉన్న రాష్ట్రాలను ఉపయోగిస్తున్నప్పుడు, మీరు లేయర్.స్టేట్స్.అనిమేషన్ ఆప్షన్స్ ప్రాపర్టీని ఉపయోగించి ప్రతి యానిమేషన్ వక్రతను విడిగా మార్చవచ్చు. కేవలం మూడు స్వల్ప సర్దుబాట్లతో, యానిమేషన్ పూర్తిగా భిన్నంగా అనిపిస్తుంది:

sketch.content.states.animationOptions = వక్రత: "సౌలభ్యం", సమయం: 0.3 headerMask.states.animationOptions = వక్రత: "వసంత (150, 20, 0)" mask.states.animationOptions = వక్రత: "వసంత (300, 30, 0) "

క్షీణిస్తున్న కంటెంట్ లేయర్ కోసం, మేము సాధారణ వక్రరేఖను ముందుగానే ఎంచుకుంటాము, తేలికగా మరియు యానిమేషన్ వ్యవధిని 0.3 గా సెట్ చేస్తాము, తద్వారా ఇది చాలా త్వరగా జరుగుతుంది.

హెడర్ మాస్క్ మరియు మాస్క్ లేయర్స్ కోసం, స్ప్రింగ్ కర్వ్ ఉపయోగించండి. మా ప్రయోజనాల కోసం, స్ప్రింగ్ కర్వ్ విలువలు యానిమేషన్ యొక్క వేగాన్ని మరియు బౌన్స్‌ను మారుస్తాయని మీరు తెలుసుకోవాలి. ముసుగు పొర యొక్క విలువలు దాని యానిమేషన్‌ను హెడర్‌మాస్క్ మరియు కంటెంట్ కంటే చాలా వేగంగా చేస్తాయి. స్ప్రింగ్ కర్వ్ సెట్టింగులపై మరిన్ని వివరాల కోసం, framerjs.com/docs వద్ద ఫ్రేమర్ డాక్యుమెంటేషన్ చూడండి.

నిజమైన మొబైల్ పరికరంలో దీన్ని ప్రయత్నించండి

నిజమైన పరికరంలో డిజైన్‌ను చూడటం ఎమ్యులేటర్లను ఉపయోగించడం కంటే చాలా ప్రభావవంతంగా ఉంటుంది మరియు మీ పనిలో ప్రయోజనాలను మీరు చూస్తారు. ఫ్రేమర్ ఒక అద్దం లక్షణాన్ని కలిగి ఉంది, ఇది మీ స్థానిక నెట్‌వర్క్ ద్వారా మీ ప్రోటోటైప్‌కు URL ను అందించే అంతర్నిర్మిత సర్వర్. మీ పరికరాన్ని ఉపయోగించి URL ని సందర్శించండి.

ఫ్రేమర్‌లో మీ స్వంత డిజైన్లను ప్రోటోటైప్ చేయడానికి మీరు తెలుసుకోవలసిన ప్రతిదాన్ని మీరు నేర్చుకున్నారు. దేనికోసం ఎదురు చూస్తున్నావు?

పదాలు: జారోడ్ డ్రైస్‌డేల్

జారోడ్ డ్రైస్‌డేల్ రచయిత, డిజైన్ కన్సల్టెంట్, డిజిటల్ ప్రొడక్ట్ మేకర్. ఈ వ్యాసం మొదట నెట్ మ్యాగజైన్ యొక్క 270 సంచికలో ప్రచురించబడింది.

దీన్ని ఇష్టపడ్డారా? వీటిని చదవండి!

• స్కెచ్‌లో క్లిక్ చేయగల, ప్రత్యక్ష ప్రోటోటైప్‌లను సృష్టించండి
• బ్లాగును ఎలా ప్రారంభించాలి
• ఉత్తమ ఫోటో ఎడిటర్లు