Saturs
- Importēt no skices
- Izveidojiet maskas un iemiesojuma slāņus
- Definējiet stāvokļus
- Atdzīvināt starp valstīm
- Izmēģiniet to īstā mobilajā ierīcē
Dizaina prototipu izstrādes pamatojums nav jauns - tas ir tāds pats kā visi ieteikumi par dizainu pārlūkprogrammā. Kad jūs redzat dizainu reālajā kontekstā, tas ir pilnīgi atšķirīgs. Jūs pieņemat labākus lēmumus, kad jums nav jāpieņem pieņēmumi par saskarnes darbību un darbību. Tas var izklausīties kā papildu darbs, taču atziņas, ko varat gūt, redzot, kā jūsu dizains darbojas, ir nenovērtējama.
Framer ir jauns uz kodu balstīts prototipu veidošanas rīks. Sketch (vai Photoshop) var izveidot maketus tāpat kā parasti, un importēt tos Framer. Pēc tam uzrakstiet nedaudz CoffeeScript, un jūs varat paveikt daudz.
Es iemācīšu jums prototipu veidošanas pamatus Framer, izmantojot iOS lietotnes prototipa piemēru ar diviem skatiem: profila skatu un lietotāja iemiesojuma attēla pietuvinātu skatu. Mēs prototipēsim, kā paplašinātais fotoattēlu skats tiks atvērts un aizvērts, un to arī animēsim. Šeit skatiet tiešsaistes demonstrāciju (lai skatītu pirmkodu, vienkārši noklikšķiniet uz ikonas augšējā kreisajā stūrī). Jums būs nepieciešama arī Framer bezmaksas izmēģinājuma versija, kuru varat iegūt vietnē framerjs.com.
Importēt no skices
Pirmais solis ir slāņu importēšana no Sketch uz Framer. Vienmēr noklikšķiniet uz pogas Importēt Framer, kamēr Sketch ir atvērts dizains, un nākamajā dialoglodziņā izvēlieties pareizo failu. Kadrētājs automātiski importēs attēlus no katra slāņa un padarīs tos pieejamus, izmantojot šādu kodu:
skice = Framer.Importer.load "importēts / profils"
Izmantojiet šo mainīgo, lai piekļūtu importētajiem slāņiem. Piemēram, lai failā Skice norādītu slāni ar nosaukumu “saturs”, ierakstītājā ierakstiet sketch.content.
Izveidojiet maskas un iemiesojuma slāņus
Šī prototipa galvenā funkcija ir paplašināt iemiesojuma attēlu, kad to pieskaras, un pēc tam to aizvērt, kad to pieskaras vēlreiz. Pirmkārt, mēs izveidosim divus maskas slāņus - ligzdotu masku vai masku citas maskas iekšpusē. Mēs animēsim abas maskas uzreiz, lai radītu jauku, smalku atvēršanas un aizvēršanas efektu. HeaderMask slānis apgriezīs iemiesojuma fotoattēlu taisnstūrī, kad tas būs izvērsts, un maskas slānis to apgriezīs mazā lokā profila skatā.
Izveidojiet šādu headerMask slāni:
headerMask = jauns slāņa platums: ekrāna platums, augstums: 800 backgroundColor: "caurspīdīgs"
Pirmā koda rinda izveido un nosauc jauno slāni. Pēc tam, izmantojot CoffeeScript ievilkuma sintaksi, mēs iestatām platuma, augstuma un fona īpašības. Mēs izmantosim caurspīdīgu fonu, lai zemāk redzamie slāņi tiktu parādīti, kad iemiesojuma fotoattēls tiks izvērsts.
Pēc tam izveidojiet maskas slāni:
maska = jauns Slāņa platums: 1000, augstums: 1000 fona Krāsa: "caurspīdīgs", apmale Rādiuss: 500 y: sketch.header.height - 100 superLayer: headerMaskas skala: 0.2, izcelsmeY: 0
Mēs izveidojam jaunu slāni un tāpat iestatām īpašības. Lielais borderRadius padara šo slāni par apli. Masku slānis tiek novietots tā, lai tas pārklātu galvenes slāni, kas tika importēts no Sketch. Mēs arī samazināsim līdz 20 procentiem jeb 0,2. Sākotnējais nulles punkts nosaka attēla stiprinājuma punktu vai reģistrāciju augšējai malai.
Atlikušais rekvizīts superLayer nosaka mūsu izveidoto headerMask slāni kā šī jaunā slāņa vecāku. Tas ir tas, kā maskēšana darbojas Framer. Vienkārši iestatiet īpašību superLayer, un vecāku slānis maskēs bērnu.
Tālāk mums jāizveido iemiesojuma grafika un jāievieto tā jaunajās maskās. Lai tuvinātu un animētu apgriešanas robežas, mēs manuāli izveidosim iemiesojuma slāni. Kopējiet fotoattēlu projekta mapes apakšmapē ’images’. Pēc tam izveidojiet slāni, izmantojot šo attēlu:
avatar = new Layer image: "images / avatar.png" width: mask.width, height: mask.height superLayer: mask, force2d: true
Ievērojiet, ka iemiesojuma superlayer mēs esam iestatījuši kā maskas slāni. Abi tagad ir ligzdoti headerMask. Mēs arī iestatām platumu un augstumu, lai attēls pilnībā aizpildītu maskēto laukumu.
Visbeidzot, mēs izveidosim mainīgo, lai saglabātu animācijai izmantotās maskas Y pozīciju. Mēs to centrēsim horizontāli, jo tas ir lielāks nekā ekrāns.
maskY = maska.y maska.centrsX ()
Definējiet stāvokļus
Pirmais solis animācijas izveidē ir sākuma un beigu stāvokļu noteikšana. Framer režīmā stāvokļi ir kā atslēgu kadri, kas izrakstīti kodā. Valsts ir tikai īpašumu kopums. Katram slānim ir noklusējuma stāvoklis. Šim prototipam šis noklusējums kalpos kā animācijas sākumpunkts, tāpēc mums katram slānim ir jāiestata tikai otrais stāvoklis.
Valstu sintakse ir ļoti vienkārša. Norādiet slāni, izmantojiet metodi layer.states.add () un pēc tam uzskaitiet iekļaujamās īpašības.
sketch.content.states.add (slēpt: {necaurredzamība: 0}) headerMask.states.add (pārvietot: {y: 120}) mask.states.add (pieaugt: {skala: 1.1, y: maskaY - 420})
Otrajam satura slāņa stāvoklim, kas tika importēts no Sketch un satur visus pārējos profila ekrāna elementus, jābūt pilnīgi caurspīdīgam. Tādā veidā, kad iemiesojums tiks izvērsts, mums būs melns fons, un tiks parādītas pārējās importētās ikonas un elementi.
Otra koda rindiņa izveido stāvokli headerMask, kas to vienkārši pārvietos uz leju līdz Y pozīcijai 120. Tas ļaus virsraksta un aizvēršanas pogas rādīt ekrāna augšdaļā, kad iemiesojuma fotoattēls tiks palielināts. Tas animēs arī iemiesojuma fotoattēla apgriešanas robežas.
Visbeidzot, jauns maskas slāņa stāvoklis to gan palielinās, gan pārvietos uz augšu, izmantojot iepriekš izveidoto mainīgo maskY. Tā kā maskas slāņa izcelsme (vai stiprinājuma punkts) ir tā augšējā mala, mums tas jāpārvieto uz augšu par 420 pikseļiem, lai būtu redzams attēla centrs.
Atdzīvināt starp valstīm
Lai animētu starp noklusējuma stāvokļiem un tikko izveidotajiem jaunajiem, mums ir nepieciešamas tikai vēl četras koda rindas. Mēs iemiesosim klikšķu apstrādātāju iemiesojuma slānī. Kad lietotājs pieskaras tam profila ekrānā, mēs pārejam uz izvērsto skatu pēc riteņbraukšanas stāvokļiem. Atkārtoti pieskaroties, mēs atgriezīsimies pie noklusējuma stāvokļiem, lai tas atgrieztos nelielā lokā. Tās pašas koda rindas apstrādā abas mijiedarbības:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Šī bloka pirmā rinda iestata klikšķu apstrādātāju iemiesojuma slānī. Jebkurā brīdī, kad to pieskaras, neatkarīgi no tā, kā tas ir apgriezts vai kāda izmēra, sekojošie paziņojumi darbosies.
Tad mēs vienkārši atsaucamies uz katru slāni un izmantojam metodi layer.states.next (), lai pārslēgtu stāvokļus. Kad izmantojat layer.states.next (), Framer izmantos savus iekšējos noklusējuma animācijas iestatījumus. Tas ir ārkārtīgi ērti, taču jūs varat izveidot vēl labākas animācijas, precīzi nosakot animācijas līknes.
Izmantojot tādus stāvokļus kā mēs esam šeit, jūs varat viegli mainīt katru animācijas līkni atsevišķi, izmantojot īpašumu layer.states.animationOptions. Tikai ar trim nelieliem pielāgojumiem animācija jūtas pilnīgi atšķirīga:
sketch.content.states.animationOptions = līkne: "vieglums", laiks: 0.3 headerMask.states.animationOptions = līkne: "spring (150, 20, 0)" mask.states.animationOptions = līkne: "spring (300, 30, 0) "
Satura slānim, kas izgaist un samazinās, mēs izvēlēsimies vienkāršu līknes sākotnējo iestatījumu, vieglumu un animācijas ilgumu iestatīsim uz 0,3, lai tas būtu ļoti ātrs.
HeaderMask un maskas slāņiem izmantojiet atsperes līkni. Mūsu vajadzībām jums vienkārši jāzina, ka pavasara līknes vērtības maina animācijas ātrumu un atlēcienu. Maskas slāņa vērtības padarīs tā animāciju daudz ātrāku nekā headerMask un saturs. Plašāku informāciju par pavasara līknes iestatījumiem skatiet Framer dokumentācijā vietnē framerjs.com/docs.
Izmēģiniet to īstā mobilajā ierīcē
Redzēt dizainu reālā ierīcē ir daudz efektīvāk nekā izmantot emulatorus, un jūs redzēsiet sava darba priekšrocības. Kadrētājs ietver spoguļa funkciju, kas ir iebūvēts serveris, kas piedāvā prototipa URL vietējā tīklā. Vienkārši apmeklējiet vietrādi URL, izmantojot savu ierīci.
Jūs esat iemācījies visu, kas jums jāzina, lai Framer izveidotu savu dizainu. Ko tu gaidi?
Vārdi: Jarrods Drisdeils
Džerods Drisdeils ir autors, dizaina konsultants, digitālo produktu ražotājs. Šis raksts sākotnēji tika publicēts tīkla žurnāla 270. numurā.
Patika tas? Izlasiet šos!
- Skicē izveidojiet dzīvus prototipus, uz kuriem var noklikšķināt
- Kā sākt emuāru
- Labākie foto redaktori
