Նախագծեք ինտերակտիվ նախատիպերը Framer- ում

Բովանդակություն

• Ներմուծում էսքիզից
• Ստեղծեք դիմակի և ավատարի շերտեր
• Սահմանեք պետությունները
• Կենդանացնել պետությունների միջև
• Փորձեք դա իրական շարժական սարքի վրա

Դիզայնի նախատիպավորման հիմնավորումը նոր չէ. Դա նույնն է, ինչ զննարկչում նախագծման բոլոր աղմուկները: Երբ տեսնում եք դիզայն իր իրական համատեքստում, այն բոլորովին այլ է: Դուք ավելի լավ որոշումներ եք կայացնում, երբ ստիպված չեք լինի ենթադրություններ անել, թե ինչպես է գործելու և զգալու ինտերֆեյսը: Սա կարող է թվալ որպես լրացուցիչ աշխատանք, բայց այն ըմբռնումը, որը կարող եք ձեռք բերել ՝ տեսնելով ձեր դիզայնի աշխատանքը, անգնահատելի է:

Framer- ը կոդերի վրա հիմնված նախատիպավորման նոր գործիք է: Sketch- ում (կամ Photoshop- ում) կարող եք mockup- ներ ստեղծել այնպես, ինչպես սովորաբար անում եք և ներմուծում դրանք Framer- ում: Դրանից հետո մի քիչ CoffeeScript գրեք և կարող եք շատ բաների հասնել:

Ես պատրաստվում եմ ձեզ սովորեցնել Framer- ում նախատիպավորման հիմունքները ՝ օգտագործելով iOS ծրագրի նախատիպի օրինակը ՝ երկու դիտմամբ. Պրոֆիլի դիտում և օգտագործողի avatar պատկերի խոշորացված դիտում: Մենք նախատիպ կտանք, թե ինչպես կբացվի և կփակվի ընդլայնված լուսանկարների դիտումը, ինչպես նաև կկանդրադառնա այն: Դիտեք առցանց ցուցադրումը այստեղ (աղբյուրը տեսնելու համար պարզապես կտտացրեք վերևի ձախ անկյունում գտնվող պատկերակին): Ձեզ նույնպես պետք կլինի Framer- ի անվճար փորձաշրջանը, որը կարող եք ձեռք բերել framerjs.com կայքից:

Ներմուծում էսքիզից

Առաջին քայլը Sketch- ից շերտերի ներմուծումն է Framer: Պարզապես կտտացրեք Ներմուծման կոճակին Framer- ում, մինչև ուրվագիծը բաց է Sketch- ում, և ընտրեք ճիշտ ֆայլը հաջորդ երկխոսության մեջ: Framer- ը ավտոմատ կերպով ներմուծելու է նկարներ յուրաքանչյուր շերտից և դրանք հասանելի դարձնելու նման կոդի միջոցով.

sketch = Framer.Importer.load "ներմուծված / պրոֆիլ"

Ներմուծված շերտեր մուտք գործելու համար օգտագործեք այդ փոփոխականը: Օրինակ, Sketch ֆայլում «բովանդակություն» անունով շերտը հղելու համար դուք Framer- ում մուտքագրեք sketch.content:

Ստեղծեք դիմակի և ավատարի շերտեր

Այս նախատիպի հիմնական գործառույթն է ՝ ընդլայնել avatar- ի պատկերը, երբ այն կտտացնում են, իսկ հետո փակել այն, երբ այն նորից թակել են: Նախ, մենք կստեղծենք դիմակի երկու շերտ ՝ ներդիրված դիմակ կամ դիմակ մեկ այլ դիմակի ներսում: Մենք միանգամից կենդանացնելու ենք երկու դիմակները ՝ ստեղծելու գեղեցիկ և նուրբ բացման և փակման էֆեկտ: HeaderMask շերտը ավատարի լուսանկարը կտարածի ուղղանկյունի մեջ, երբ այն ընդլայնվի, և դիմակի շերտը այն կտարածվի պրոֆիլի տեսքի փոքր շրջանի վրա:

Ստեղծեք headerMask շերտը այսպես.

headerMask = նոր Շերտի լայնությունը ՝ Էկրանի լայնությունը, բարձրությունը ՝ 800 ֆոն Գույնը ՝ «թափանցիկ»

Կոդի առաջին տողը ստեղծում և անվանում է նոր շերտ: Այնուհետև, օգտագործելով CoffeeScript- ի ներածման շարահյուսությունը, մենք սահմանում ենք լայնության, բարձրության և ֆոնի հատկությունները: Մենք կօգտագործենք թափանցիկ ֆոն, որպեսզի ներքևում գտնվող շերտերը ցուցադրվեն, երբ ավատարը լուսանկարն ընդլայնվի:

Հաջորդը, ստեղծեք դիմակի շերտը.

դիմակ = նոր Շերտի լայնությունը ՝ 1000, բարձրությունը ՝ 1000 ֆոն Գույնը ՝ «թափանցիկ», եզրագիծը Radius: 500 y: sketch.header.height - 100 superLayer: header Դիմակի մասշտաբ ՝ 0,2, ծագում Y ՝ 0

Մենք ստեղծում ենք նոր շերտ և նույնն ենք դնում հատկությունների: Մեծ եզրագիծը Radius- ը այս շերտը դարձնում է շրջան: Մենք տեղադրում ենք դիմակի շերտը, այնպես որ այն համընկնում է վերնագրի շերտը, որը ներմուծվել է Sketch- ից: Մենք նաև կնվազեցնենք մինչև 20 տոկոս կամ 0.2: Zeroրոյի սկզբունքը սահմանում է խարիսխի կետը կամ պատկերի գրանցումը վերին եզրին:

Մնացած հատկությունը ՝ superLayer- ը, սահմանում է headerMask շերտը, որը մենք ստեղծել ենք որպես այս նոր շերտի ծնող: Այսպես է աշխատում դիմակավորումը Framer- ում: Պարզապես սահմանեք superLayer հատկությունը, և ծնողական շերտը դիմակավորելու է երեխային:

Հաջորդը, մենք պետք է ստեղծենք ավատարի գծապատկերը և տեղադրենք այդ նոր դիմակների ներսում: Կտրման սահմանները մեծացնելու և կենդանացնելու համար մենք ձեռքով կստեղծենք ավատարի շերտը: Պատճենեք լուսանկարը նախագծի պանակի «պատկերներ» ենթապանակում: Դրանից հետո ստեղծեք շերտ ՝ օգտագործելով այդ պատկերը.

avatar = նոր Շերտի պատկեր. "images / avatar.png" լայնությունը ՝ mask.width, բարձրությունը ՝ mask.height superLayer: mask, force2d: true

Ուշադրություն դարձրեք, որ մենք ավատարի superLayer- ը դնում ենք դիմակի շերտ: Երկուսն էլ այժմ տեղադրված են header Mask- ի ներքո: Մենք նաև սահմանում ենք լայնությունն ու բարձրությունը, որպեսզի պատկերն ամբողջությամբ լցնի դիմակավորված տարածքը:

Վերջապես, մենք կստեղծենք փոփոխական `դիմակի Y դիրքը պահելու համար, որը մենք կօգտագործենք անիմացիայի համար: Մենք այն կենտրոնացնելու ենք հորիզոնական, քանի որ այն ավելի մեծ է, քան էկրանին:

maskY = mask.y mask.centerX ()

Սահմանեք պետությունները

Անիմացիա ստեղծելու առաջին քայլը մեկնարկի և վերջի վիճակների սահմանումն է: Framer- ում պետությունները նման են ծածկագրով կազմված keyframes- ի: Պետությունը պարզապես հատկությունների հավաքածու է: Յուրաքանչյուր շերտ ունի լռելյայն վիճակ: Այս նախատիպի համար այդ լռելյայնը կծառայի որպես անիմացիայի սկզբնակետ, ուստի յուրաքանչյուր շերտի համար անհրաժեշտ է միայն սահմանել երկրորդ վիճակ:

Պետությունների շարահյուսությունը շատ պարզ է: Հղում կատարեք շերտին, օգտագործեք layer.states.add () մեթոդը և այնուհետև նշեք ներառվող հատկությունները:

sketch.content.states.add (թաքցնել ՝ {անթափանցիկություն. 0}) headerMask.states.add (տեղափոխել ՝ {y: 120}) mask.states.add (աճել ՝ {մասշտաբ ՝ 1,1, y: maskY - 420})

Sketch- ից ներմուծված բովանդակության շերտի երկրորդ վիճակը, որը պարունակում է պրոֆիլի էկրանի բոլոր մյուս տարրերը, պետք է ամբողջովին թափանցիկ լինի: Այս կերպ, երբ ավատարն ընդլայնվի, մենք կունենանք սեւ ֆոն, և մնացած ներմուծված պատկերակները և տարրերը կցուցադրվեն:

Կոդի երկրորդ տողը ստեղծում է պետություն headerMask- ի համար, որը այն պարզապես տեղափոխելու է Y դիրքի 120-ը: Սա թույլ կտա վերնագիրն ու փակման կոճակը ցույց տալ էկրանին վերևում, երբ ավատարի լուսանկարը մեծանա: Այն նաև կենդանացնելու է ավատարի լուսանկարի կտրման սահմանները:

Ի վերջո, դիմակի շերտի նոր վիճակը և՛ այն կշեռքի վրա կտանի, և՛ կտեղափոխի այն վերև ՝ օգտագործելով maskY փոփոխականը, որը մենք ավելի վաղ ստեղծեցինք: Քանի որ դիմակի շերտի սկզբունքը Y (կամ խարիսխի կետը) դրա վերին եզրն է, մենք պետք է այն 420 պիքսել բարձրացնենք, որպեսզի պատկերի կենտրոնը տեսանելի լինի:

Կենդանացնել պետությունների միջև

Անհատականացնելու համար լռելյայն պետությունների և նորերը, որոնք մենք ստեղծեցինք, մեզ պետք են ընդամենը չորս այլ կոդեր: Մենք կտտացրեք կտտոցների կարգավորիչին avatarի շերտի վրա: Երբ օգտվողը այն հպում է պրոֆիլի էկրանին, մենք անցնելու ենք ընդլայնված տեսքին ըստ հեծանվային մարզերի: Երբ այն նորից թակվի, մենք հետ կկանգնենք նախնական դրույթներին, որպեսզի այն վերադառնա փոքր շրջանի: Կոդի նույն տողերը կարգավորում են երկու փոխազդեցությունները.

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

Այս բլոկի առաջին տողում տեղադրվում է ավատարի շերտի կտտոցների կարգավորիչը: Anyանկացած ժամանակ, երբ այն կտտացնում են, անկախ նրանից, թե ինչպես է այն կտրված կամ ինչ չափի է, դրան հաջորդող հայտարարությունները գործելու են:

Այնուհետև մենք ուղղակի հղում ենք կատարում յուրաքանչյուր շերտի վրա և օգտագործում ենք շերտերի մակարդակը. Stats.next () եղանակները ՝ պետությունները փոխելու համար: Երբ օգտագործում եք layer.states.next () -ը, Framer- ը կօգտագործի իր ներքին լռելյայն անիմացիայի կարգավորումները: Սա չափազանց հարմար է, բայց կարող եք ավելի լավ անիմացիաներ պատրաստել ՝ մանրացնելով անիմացիայի կորերը:

Օգտագործելով այնպիսի վիճակներ, ինչպիսին մենք այստեղ ենք, կարող եք հեշտությամբ փոխել անիմացիայի յուրաքանչյուր կորի առանձին `օգտագործելով layer.states.animationOptions հատկությունը: Ընդամենը երեք աննշան ճշգրտումներով, անիմացիան բոլորովին այլ է զգում.

sketch.content.states.animationOptions = կորը ՝ «հեշտություն», ժամանակը ՝ 0,3 վերնագիր Mask.states.animationOptions = կորը ՝ «գարուն (150, 20, 0)» mask.states.animationOptions = կոր ՝ «գարուն (300, 30, 0) "

Բովանդակության շերտի համար, որը գնալով մարում է, մենք կընտրենք պարզ կորի նախադրվածություն, հեշտություն և անիմացիայի տևողությունը 0.3-ը դնենք, որպեսզի այն շատ արագ լինի:

Վերնագրի դիմակի և դիմակի շերտերի համար օգտագործեք զսպանակային կոր: Մեր նպատակների համար պարզապես անհրաժեշտ է իմանալ, որ գարնանային կորի արժեքները փոխում են անիմացիայի արագությունն ու ցատկումը: Դիմակի շերտի արժեքները կդարձնեն դրա անիմացիան շատ ավելի արագ, քան header Mask- ը և բովանդակությունը: Գարնանային կորի կարգավորումների վերաբերյալ ավելի մանրամասն տեղեկություններ ստանալու համար տե՛ս Framer– ի փաստաթղթերը framerjs.com/docs- ում:

Փորձեք դա իրական շարժական սարքի վրա

Իրական սարքի վրա դիզայն տեսնելը շատ ավելի արդյունավետ է, քան emulators օգտագործելը, և դուք կտեսնեք ձեր աշխատանքի օգուտները: Framer- ը ներառում է հայելու հատկություն, որը ներկառուցված սերվեր է, որն առաջարկում է URL ձեր նախատիպին ձեր տեղական ցանցի միջոցով: Պարզապես այցելեք URL- ն ՝ օգտագործելով ձեր սարքը:

Դուք սովորել եք այն ամենը, ինչ անհրաժեշտ է իմանալ ՝ Framer- ում ձեր սեփական նմուշները նախատիպելու համար: Ինչին ես սպասում?

ԲառերJարրոդ Դրիսդեյլ

Jarrod Drysdale- ը հեղինակ է, դիզայնի խորհրդատու, թվային արտադրանք արտադրող: Այս հոդվածն ի սկզբանե տպագրվել է net ամսագրի 270 համարում:

Դուր եկավ սա Կարդացեք սրանք:

• Sketch- ում ստեղծեք սեղմվող, կենդանի նախատիպեր
• Ինչպես սկսել բլոգ
• Լավագույն լուսանկարների խմբագիրները