Vsebina
- Uvoz iz Skice
- Ustvari masko in sloje avatarja
- Opredeli stanja
- Animacija med državami
- Preizkusite na pravi mobilni napravi
Razlogi za oblikovanje prototipov niso novi - enaki so vsem, kar se dogaja pri oblikovanju v brskalniku. Ko vidiš dizajn v njegovem resničnem kontekstu, je popolnoma drugačen. Bolje se odločite, če vam ni treba predvidevati, kako bo vmesnik deloval in se počutil. To se morda sliši kot dodatno delo, vendar so vpogledi, ki jih lahko pridobite, ko vidite, kako deluje vaš dizajn, neprecenljivi.
Framer je novo orodje za izdelavo prototipov, ki temelji na kodi. V Sketchu (ali Photoshopu) lahko ustvarite makete, tako kot običajno, in jih uvozite v Framer. Nato napišite malo CoffeeScript-a in lahko dosežete veliko.
Naučil vas bom osnov prototipiranja v Framerju na primeru prototipa aplikacije za iOS z dvema pogledoma: prikaz profila in povečan pogled uporabnikove slike avatarja. Prototipirali bomo, kako se bo razširjeni pogled fotografij odpiral in zapiral, in ga tudi animirali. Tu si oglejte spletno predstavitev (če si želite ogledati izvorno kodo, kliknite ikono v zgornjem levem kotu). Potrebovali boste tudi brezplačno preskusno različico Framerja, ki jo dobite na spletnem mestu framerjs.com.
Uvoz iz Skice
Prvi korak je uvoz slojev iz programa Sketch v Framer. Preprosto kliknite gumb Uvozi v programu Framer, medtem ko je zaslon odprt v programu Skica, in v pogovornem oknu, ki sledi, izberite pravilno datoteko. Framer bo samodejno uvozil slike iz vsake plasti in jih naredil dostopne s tako kodo:
sketch = Framer.Importer.load "uvožen / profil"
Uporabite to spremenljivko za dostop do uvoženih slojev. Če želite na primer v datoteko Sketch sklicevati na plast z imenom „content“, v Framer vnesite sketch.content.
Ustvari masko in sloje avatarja
Osrednja funkcija tega prototipa je razširiti sliko avatarja, ko jo tapnete, in jo nato zapreti, ko jo ponovno tapnete. Najprej bomo ustvarili dve plasti maske - ugnezdeno masko ali masko znotraj druge maske. Obe maski bomo animirali hkrati, da bomo ustvarili prijeten, subtilen učinek odpiranja in zapiranja. Sloj headerMask bo obrezno fotografijo avatarja obrezal v pravokotnik, ko jo razširite, plast maske pa jo bo obrezala v majhen krog v pogledu profila.
Ustvari plast headerMask tako:
headerMask = novo Širina sloja: širina zaslona, višina: 800 backgroundColor: "transparent"
Prva vrstica kode ustvari in poimenuje novo plast. Nato z uporabo sintakse vdolbine CoffeeScript nastavimo lastnosti širine, višine in ozadja. Uporabili bomo prozorno ozadje, tako da se plasti pod prikazom pri razširitvi fotografije avatarja.
Nato ustvarite sloj maske:
maska = nova Širina sloja: 1000, višina: 1000 ozadja Barva: "prosojna", mejaRadius: 500 y: sketch.header.height - 100 superLayer: headerMaska lestvice: 0,2, originY: 0
Ustvarimo novo plast in nastavimo lastnosti na enak način. Velika mejaRadius naredi to plast krog. Sloj maske postavimo tako, da se prekriva s slojem glave, ki je bil uvožen iz programa Sketch. Zmanjšali bomo tudi na 20 odstotkov ali 0,2. Izvor Y nič nastavi sidrišče ali registracijo slike na zgornji rob.
Preostala lastnost, superLayer, nastavi plast headerMask, ki smo jo ustvarili kot nadrejeno za novo plast. Tako deluje maskiranje pri Framerju. Preprosto nastavite lastnost superLayer in nadrejena plast bo prikrila otroka.
Nato moramo ustvariti grafiko avatarja in jo postaviti v te nove maske. Če želite povečati in animirati meje obrezovanja, bomo ročno ustvarili plast avatarja. Kopirajte fotografijo v podmapo 'images' v mapi projekta. Nato ustvarite plast s to sliko:
avatar = nova plast image: "images / avatar.png" width: mask.width, height: mask.height superLayer: mask, force2d: true
Upoštevajte, da smo za sloj maske nastavili superLayer avatarja. Oba sta zdaj ugnezdena znotraj headerMask. Nastavili smo tudi širino in višino, tako da slika popolnoma zapolni zakrita območja.
Nazadnje bomo ustvarili spremenljivko za shranjevanje položaja Y maske, ki jo bomo uporabili za animacijo. Centrirali ga bomo vodoravno, saj je večji od zaslona.
maskY = mask.y mask.centerX ()
Opredeli stanja
Prvi korak pri ustvarjanju animacije je določitev začetnega in končnega stanja. V Framerju so države kot ključne sličice, zapisane v kodi. Država je le skupek lastnosti. Vsak sloj ima privzeto stanje. Pri tem prototipu bo ta privzetek služil kot začetna točka za animacijo, zato moramo za vsako plast nastaviti le drugo stanje.
Sintaksa stanj je zelo preprosta. Sklicujte se na plast, uporabite metodo layer.states.add () in nato navedite lastnosti, ki jih želite vključiti.
sketch.content.states.add (skrij: {opacity: 0}) headerMask.states.add (premakni: {y: 120}) mask.states.add (raste: {lestvica: 1.1, y: maskY - 420})
Drugo stanje za vsebinsko plast, ki je bila uvožena iz programa Sketch in vsebuje vse druge elemente zaslona profila, mora biti popolnoma pregledno. Na ta način bomo imeli pri razširitvi avatarja črno ozadje, preostale uvožene ikone in elementi pa bodo prikazani skozi.
Druga vrstica kode ustvari stanje za headerMask, ki jo preprosto premakne navzdol v položaj Y 120. To bo omogočilo prikaz naslova in gumba za zapiranje na vrhu zaslona, ko se fotografija avatarja poveča. Prav tako bo animiral meje obrezovanja fotografije avatarja.
Nazadnje ga bo novo stanje za masko povečalo in premaknilo navzgor s spremenljivko maskY, ki smo jo ustvarili prej. Ker je izvor Y (ali sidrišče) plasti maske njen zgornji rob, jo moramo premakniti navzgor za 420 slikovnih pik, da bo vidno središče slike.
Animacija med državami
Za animiranje med privzetimi stanji in novimi, ki smo jih pravkar ustvarili, potrebujemo le še štiri vrstice kode. Na plast avatarja bomo nastavili obdelovalec klikov. Ko se uporabnik dotakne zaslona profila, bomo prešli na razširjeni pogled po kolesarskih stanjih. Ko se znova dotaknete, se vrnemo v privzeta stanja, tako da se vrne v majhen krog. Iste vrstice kode obravnavajo obe interakciji:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Prva vrstica tega bloka nastavi obdelovalnik klikov na sloju avatarja. Vsakič, ko jo tapnete, ne glede na to, kako je obrezana ali katere velikosti je, se bodo izvajali stavki, ki sledijo.
Nato se preprosto sklicujemo na vsako plast in za preklapljanje stanj uporabljamo metodo layer.states.next (). Ko uporabljate layer.states.next (), bo Framer uporabil svoje notranje privzete nastavitve animacije. To je izjemno priročno, vendar lahko ustvarite še boljše animacije, tako da oblikujete animacijske krivulje.
Ko uporabljate stanja, kot smo tukaj, lahko vsako krivuljo animacije enostavno spremenite ločeno z uporabo lastnosti layer.states.animationOptions. Z le tremi rahlimi prilagoditvami se animacija počuti povsem drugače:
sketch.content.states.animationOptions = krivulja: "enostavnost", čas: 0,3 headerMask.states.animationOptions = krivulja: "pomlad (150, 20, 0)" mask.states.animationOptions = krivulja: "pomlad (300, 30, 0) "
Za vsebinsko plast, ki izginja in izginja, bomo izbrali preprosto prednastavitev krivulje, enostavnost in nastavitev trajanja animacije na 0,3, tako da bo zelo hitra.
Za plasti headerMask in mask uporabite vzmetno krivuljo. Za naše namene morate le vedeti, da vrednosti vzmetne krivulje spreminjajo hitrost in odboj animacije. Vrednosti maske bodo njeno animacijo naredile veliko hitrejšo kot headerMask in vsebina. Za več podrobnosti o nastavitvah vzmetne krivulje glejte dokumentacijo Framer na spletnem mestu framerjs.com/docs.
Preizkusite na pravi mobilni napravi
Videti zasnovo na pravi napravi je toliko bolj učinkovito kot uporaba emulatorjev in v svojem delu boste videli prednosti. Framer vključuje zrcalno funkcijo, ki je vgrajen strežnik, ki prek vašega lokalnega omrežja ponuja URL vašega prototipa. Preprosto obiščite URL s svojo napravo.
V Framerju ste se naučili vsega, kar morate vedeti za izdelavo lastnih vzorcev. Kaj čakaš?
Besede: Jarrod Drysdale
Jarrod Drysdale je avtor, svetovalec za oblikovanje, proizvajalec digitalnih izdelkov. Ta članek je bil prvotno objavljen v številki 270 revije net.
Je to všeč? Preberite jih!
- Ustvarite prototipe, ki jih je mogoče klikniti, v živo v programu Sketch
- Kako ustanoviti spletni dnevnik
- Najboljši urejevalniki fotografij
