Sadržaj
- Uvoz iz Skice
- Stvorite slojeve maske i avatara
- Definirajte stanja
- Animacija između država
- Isprobajte na pravom mobilnom uređaju
Obrazloženje iza prototipiranja dizajna nije novo - isto je kao i sva buzz oko dizajniranja u pregledniku. Kad dizajn vidite u stvarnom kontekstu, on je potpuno drugačiji. Bolje odluke donosite kad ne morate pretpostavljati kako će sučelje funkcionirati i osjećati se. Ovo može zvučati kao dodatni posao, ali uvidi koje možete steći ako vidite kako vaš dizajn radi neprocjenjivi su.
Framer je novi alat za prototipiranje zasnovan na kodu. U Sketchu (ili Photoshopu) možete stvoriti makete kao što to obično radite i uvesti ih u Framer. Zatim napišite malo CoffeeScript-a i možete puno postići.
Naučit ću vas osnovama prototipiranja u programu Framer, koristeći primjer prototipa iOS aplikacije s dva prikaza: prikaz profila i uvećani prikaz slike korisnika. Prototipirat ćemo kako će se otvarati i zatvarati prošireni prikaz fotografija, a također ćemo ga animirati. Ovdje pogledajte internetski prikaz (da biste vidjeli izvorni kod, samo kliknite ikonu u gornjem lijevom kutu). Trebat će vam i besplatno probno razdoblje Framera koje možete dobiti na framerjs.com.
Uvoz iz Skice
Prvi korak je uvoz slojeva iz programa Sketch u Framer. Jednostavno kliknite gumb Uvezi u programu Framer dok je dizajn otvoren u programu Skica i odaberite ispravnu datoteku u dijaloškom okviru koji slijedi. Framer će automatski uvesti slike iz svakog sloja i učiniti ih dostupnima putem koda poput ovog:
skica = Framer.Importer.load "uvezeno / profil"
Upotrijebite tu varijablu za pristup uvezenim slojevima. Na primjer, da biste referencirali sloj pod nazivom 'sadržaj' u datoteci Sketch, upišite sketch.content u Framer.
Stvorite slojeve maske i avatara
Osnovna funkcija ovog prototipa je proširiti sliku avatara kad se dodirne, a zatim je zatvoriti kad se ponovo tapka. Prvo ćemo stvoriti dva sloja maske - ugniježđenu masku ili masku unutar druge maske. Animirat ćemo obje maske odjednom kako bismo stvorili lijep, suptilan efekt otvaranja i zatvaranja. Sloj headerMask obrezat će fotografiju avatara u pravokutnik kad se proširi, a sloj maske obrezati će je u mali krug na prikazu profila.
Stvorite sloj headerMask ovako:
headerMask = nova širina sloja: širina zaslona, visina: 800 backgroundColor: "transparent"
Prvi redak koda stvara i imenuje novi sloj. Zatim smo, koristeći sintaksu uvlačenja CoffeeScript, postavili svojstva širine, visine i pozadine. Upotrijebit ćemo prozirnu pozadinu kako bi se slojevi ispod prikazali kada se fotografija avatar proširi.
Zatim stvorite sloj maske:
maska = nova Širina sloja: 1000, visina: 1000 pozadina Boja: "prozirna", obrubRadius: 500 y: sketch.header.height - 100 superLayer: headerMaska skale: 0,2, ishodišteY: 0
Izrađujemo novi sloj i postavljamo svojstva na isti način. Velika granicaRadius čini ovaj sloj krugom. Sloj maske postavimo tako da se preklapa sa zaglavnim slojem koji je uvezen iz programa Sketch. Također ćemo se smanjiti na 20 posto ili 0,2. IzvorY nule postavlja točku sidrišta ili registraciju slike na gornji rub.
Preostalo svojstvo, superLayer, postavlja sloj headerMask koji smo stvorili kao roditelja ovog novog sloja. Ovako maskiranje djeluje u Frameru. Jednostavno postavite svojstvo superLayer, a roditeljski sloj će maskirati dijete.
Dalje, moramo stvoriti grafiku avatara i smjestiti je u te nove maske. Da bismo zumirali i animirali granice obrezivanja, ručno ćemo stvoriti sloj avatara. Kopirajte fotografiju u podmapu ’images’ mape projekta. Zatim stvorite sloj pomoću te slike:
avatar = nova Slika sloja: "images / avatar.png" širina: mask.width, height: mask.height superLayer: mask, force2d: true
Primijetite da smo super sloj avatara postavili kao sloj maske. Obje su sada ugniježđene unutar headerMask. Također smo postavili širinu i visinu tako da slika u potpunosti ispunjava maskirano područje.
Na kraju, stvorit ćemo varijablu za pohranu Y položaja maske koju ćemo koristiti za animaciju. Centrirat ćemo ga vodoravno, jer je veći od zaslona.
maskY = maska.y maska.centerX ()
Definirajte stanja
Prvi korak u stvaranju animacije je definiranje početnog i završnog stanja. U Frameru su države poput ključnih okvira zapisanih u kodu. Država je samo skup svojstava. Svaki sloj ima zadano stanje. Za ovaj prototip taj će zadani podatak služiti kao početna točka za animaciju, tako da trebamo postaviti samo drugo stanje za svaki sloj.
Sintaksa stanja je vrlo jednostavna. Pozovite se na sloj, upotrijebite metodu layer.states.add (), a zatim navedite svojstva koja se uključuju.
sketch.content.states.add (sakrij: {neprozirnost: 0}) headerMask.states.add (potez: {y: 120}) mask.states.add (raste: {razmjera: 1.1, y: maskY - 420})
Drugo stanje za sloj sadržaja, koji je uvezen iz programa Skica i sadrži sve ostale elemente zaslona profila, trebalo bi biti potpuno prozirno. Na taj način, kad se avatar proširi, imat ćemo crnu pozadinu, a preostale uvezene ikone i elementi će se prikazati.
Drugi redak koda stvara stanje headerMask-a, koje će ga jednostavno pomaknuti prema dolje na Y položaj od 120. To će omogućiti prikaz naslova i gumba za zatvaranje na vrhu zaslona kad se poveća slika avatara. Također će animirati granice obrezivanja fotografije avatara.
I na kraju, novo stanje za sloj maske oboje će ga povećati i pomaknuti prema gore, koristeći varijablu maskY koju smo ranije stvorili. Budući da je ishodište Y (ili sidrište) sloja maske njegov gornji rub, moramo ga pomaknuti za 420 piksela tako da je vidljivo središte slike.
Animacija između država
Za animiranje između zadanih stanja i novih koje smo upravo stvorili, trebaju nam samo još četiri retka koda. Postavit ćemo obrađivač klikova na sloj avatara. Kad ga korisnik kucne na zaslonu profila, prijeći ćemo na prošireni prikaz prema statusima bicikliranja. Kad se ponovo kucne, vratit ćemo se na zadana stanja, tako da se vrati u mali krug. Iste linije koda obrađuju obje interakcije:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Prvi redak ovog bloka postavlja obradu klikova na sloju avatara. Svaki put kad se dodirne, bez obzira na to kako je izrezana ili koje je veličine, izvršit će se izjave koje slijede.
Tada jednostavno upućujemo na svaki sloj i koristimo metodu layer.states.next () za prebacivanje stanja. Kada koristite layer.states.next (), Framer će koristiti svoje interne zadane postavke animacije. To je izuzetno povoljno, ali možete stvoriti još bolje animacije finovanjem krivulja animacije.
Kada koristite stanja kao što smo mi ovdje, možete jednostavno promijeniti svaku krivulju animacije zasebno koristeći svojstvo layer.states.animationOptions. Sa samo tri neznatna podešavanja, animacija se osjeća potpuno drugačije:
sketch.content.states.animationOptions = krivulja: "lakoća", vrijeme: 0,3 headerMask.states.animationOptions = krivulja: "spring (150, 20, 0)" mask.states.animationOptions = curve: "spring (300, 30, 0) "
Za sloj sadržaja koji se gasi i odaje odabrat ćemo jednostavnu unaprijed postavljenu krivulju, jednostavnost i trajanje animacije na 0,3, tako da je vrlo brz.
Za slojeve zaglavlja i maske upotrijebite opružnu krivulju. U naše svrhe samo trebate znati da vrijednosti krivulje opruge mijenjaju brzinu i odskok animacije. Vrijednosti sloja maske učinit će njegovu animaciju mnogo bržom od zaglavlja i maske. Za više detalja o postavkama krivulje opruge, pogledajte Framerovu dokumentaciju na framerjs.com/docs.
Isprobajte na pravom mobilnom uređaju
Vidjeti dizajn na stvarnom uređaju toliko je učinkovitiji od upotrebe emulatora i vidjet ćete prednosti u svom radu. Framer uključuje značajku zrcala, koja je ugrađeni poslužitelj koji nudi URL vašem prototipu putem vaše lokalne mreže. Jednostavno posjetite URL pomoću svog uređaja.
Naučili ste sve što trebate znati kako biste prototipirali vlastite dizajne u Frameru. Što čekaš?
Riječi: Jarrod Drysdale
Jarrod Drysdale je autor, savjetnik za dizajn, proizvođač digitalnih proizvoda. Ovaj je članak izvorno objavljen u broju 270 časopisa net.
Sviđa li vam se ovo? Pročitajte ovo!
- Stvorite prototipove uživo koji se mogu kliknuti u programu Sketch
- Kako pokrenuti blog
- Najbolji urednici fotografija
