Share
Aceste zile, nu aveți nevoie de software de editare a imaginilor, cum ar fi Adobe Photoshop sau Gimp, pentru a crea machete de interfață cu utilizatorii pentru aplicațiile dvs. mobile. O aplicație care este conformă cu limbajul de design al materialului Google este de obicei compusă doar din forme geometrice simple, culori solide, icoane și text. Un prototip de interfață pentru o astfel de aplicație poate fi creat cu ușurință utilizând doar codul.
În această serie de două părți, veți învăța elementele de bază ale programului Framer, un framework open source Javascript care vă permite să creați în mod programat prototipuri interactive și realiste cu animații frumoase pentru aplicații iOS și Android.
Pentru a urma acest tutorial, veți avea nevoie de:
Deoarece un prototip Framer nu este altceva decât o pagină web obișnuită scrisă în HTML, CSS și Javascript, să începem prin crearea unei pagini HTML goale. Voi numi această pagină index.html.
„html
"
Pentru a utiliza API-ul lui Framer pe această pagină, trebuie să adăugați a scenariu eticheta care indică framer.js fișierul pe care l-ați descărcat.
html
Cum Framer folosește URL-uri relative de protocol pentru a încărca diferite resurse, nu puteți să faceți dublu clic pe fișierul pe care l-ați creat pentru al deschide într-un browser. Acest lucru va duce la erori de rețea. În schimb, trebuie să îl accesați printr-un server HTTP.
Pentru a crea rapid un server HTTP capabil să servească pagina dvs. web, puteți folosi Python SimpleHTTPServer modul.
Deschideți un terminal, navigați la directorul care conține pagina web creată și executați următoarea comandă.
bash python -m SimpleHTTPServer 8000
Acest lucru va porni un server care rulează pe port 8000 în mod implicit. Acum puteți deschide Google Chrome și puteți vizualiza pagina dvs. Web vizitând http: // localhost: 8000 /.
Pentru a vă face să vă simțiți realist pe un browser desktop, ar trebui să afișați toate elementele sale în interiorul cadrului unui dispozitiv mobil. Framer vă permite să desenați o varietate de dispozitive mobile populare, cum ar fi iPhone-uri, telefoane Nexus și tablete, iPad-uri, ceasuri Apple și multe altele. Pentru acest tutorial, voi folosi un iPhone 5c roz.
Pentru a desena un dispozitiv, ar trebui mai întâi să creați o instanță a DeviceComponent clasa și numesc-o setupContext metodă. Puteți schimba apoi tip de dispozitiv la dispozitivul ales de dvs. Adaugă altul scenariu etichetați pagina HTML creată mai devreme și adăugați codul următor:
"javascript var device = nou Framer.DeviceComponent ();
device.setupContext (); device.deviceType = "iphone-5c-roz"; "
Când actualizați pagina dvs. web, ar trebui să vedeți următoarele în fereastra browserului:
Dacă doriți, puteți face și o mână care ține dispozitivul adăugând -mână la sfârșitul tip de dispozitiv şir. Dacă aparatul pare prea mare sau prea mic, puteți utiliza setDeviceScale pentru a-și schimba mărimea.
"javascript / Afișează o mână cu dispozitivul device.deviceType =" iphone-5c-hand-blue ";
// Schimbați dispozitivul size.setDeviceScale (0.3); "
Aceasta completează configurația inițială. Rezultatul ar trebui să arate astfel:
Aproape fiecare element din prototipul dvs. Framer va fi un exemplu al modelului Strat clasă. A Strat este foarte similar cu un HTML div element și poate fi folosit pentru a desena dreptunghiuri, imagini și text.
Pentru a crea un Strat trebuie să-i apelați constructorul și să îi transmiteți un obiect JSON care definește diferitele proprietăți ale lui Strat. În timp ce creați un Strat, de obicei, specificați dimensiunile sale (lăţime și înălţime) și poziția (X și y). De asemenea, puteți utiliza funcția centerX și centerY metodele de centrare a acestuia pe orizontală și pe verticală. Iată un exemplu despre cum să creați o Strat.
"javascript / / Desenați un pătrat alb
var whiteSquare = strat nou (backgroundColor: "#FFFFFF", lățime: 400, înălțime: 400, y: 20);
// Centru orizontal whiteSquare.centerX (); "
Pentru a afișa o imagine, trebuie să creați o imagine Strat a caror imagine proprietatea indică fișierul imagine pe care doriți să îl afișați.
"javascript / / Desenați o imagine
var pic = nou strat (image: "painting.jpg", lățime: 400, înălțime: 400, y: 440);
pic.centerX ();“
Pentru a afișa text (sau HTML), puteți utiliza html proprietate. De asemenea, puteți adăuga stilul CSS la a Strat folosind stil proprietate.
"javascript / / Scrieți text
var text = nou strat (lățime: lățimea ecranului, înălțimea: 100, y: 860, html: "Acesta este un prototip", stil: fontSize: "50px", textAlign: "center", color: "# f1f2f3 ", PaddingTop:" 18px ");"
Cu cei trei Strat obiectele pe care le-am creat în acest pas, prototipul ar arăta astfel:
Aveți posibilitatea să atașați agenți de procesare a evenimentelor la un a Strat folosind pe metodă. pe metoda este la fel ca Javascript addEventListener metodă. Acesta ia numele unui eveniment ca primul său parametru și o funcție ca al doilea parametru.
Iată cum adăugați a clic handler la text strat pe care l-am creat în etapa anterioară:
javascript text.on ("faceți clic pe", funcția () text.html = "Am fost făcut clic";);
În acest tutorial veți vedea mai multe aplicații de gestionare a evenimentelor.
Framer se distanțează de competiția datorită efectelor avansate de animație. Cu Framer, puteți anima aproape fiecare proprietate a dvs. Strat obiecte utilizând anima metodă. anima metoda ia ca intrare un obiect JSON care specifică proprietățile care ar trebui animate.
Obiectul JSON poate include, de asemenea, diverse detalii de configurare ale animației, cum ar fi durata și comportamentul acesteia.
Ca exemplu, permiteți-mi să vă arăt cum să creați o animație care se transformă whiteSquare într-un cerc prin schimbarea lui borderRadius.
"javascript / Animare borderRadius
whiteSquare.animate (proprietăți: borderRadius: whiteSquare.width / 2,
timpul: 2, // durata este curba de 2 secunde: "usurinta in afara" / / aplicati relaxarea); "
Iată un alt exemplu care arată cum să animați umbra lui whiteSquare când se face clic pe el.
"javascript / Animate Shadow
whiteSquare.on ("faceți clic pe", funcția ()
Accentsconagua
// Setați mai întâi culoarea umbrei whiteSquare.shadowColor = "# 555555"; whiteSquare.animate ("proprietăți": shadowBlur: 40, shadowSpread: 10,); );“ Rețineți că numai acele proprietăți ale căror valori sunt numere pot fi animate. La fel de shadowColor nu este un număr, ar trebui să fie setat înainte de a apela anima.
Dacă utilizați Framer, este posibil să încercați să creați un prototip extrem de interactiv cu o mulțime de animații. Apelarea anima metoda de mai multe ori pe Strat poate deveni plictisitor. În schimb, puteți asocia o listă de state cu a Strat și trebuie doar să comutați între stări atunci când este necesar.
Fiecare Strat are o statele proprietate care este o instanță a LayerStates clasă. Pentru a adăuga noi stări la a Strat, apelați adăuga metoda pe statele proprietate. În următorul fragment de cod, adăugăm două noi stări la pic obiect.
"javascript / Adăugați două stări
pic.states.add ("myState1": borderRadius: 100,
"myState2": borderRadius: 200); "
Adăugarea unei stări nu duce la o schimbare vizuală imediată. Cu toate acestea, atunci când a Strat trecerea de la o stare la alta, veti putea vedea animatia. Pentru a schimba starea unui a Strat, apelați intrerupator metoda pe statele proprietate a Strat obiect. Următorul fragment de cod vă arată cum să modificați starea pic când se face clic pe el.
"javascript // Schimbați starea când ați făcut clic
pic.on ("faceți clic", funcția () // Comutați la myState2 pic.states.switch ("myState2");); "
Pentru a trece prin stările unui a Strat, puteți apela Următor → metoda lui statele obiect.
javascript pic.states.next ();
Pentru a adăuga o culoare de fundal sau o imagine la prototipul dvs., creați un BackgroundLayer obiect. A BackgroundLayer este a Strat ale căror dimensiuni sunt egale cu dimensiunile ecranului dispozitivului. Iată cum adăugați un gri BackgroundLayer:
javascript var bg = BackgroundLayer nou (backgroundColor: "#BDBDBD");
Deoarece prototipul Framer este doar o pagină HTML obișnuită, puteți utiliza și CSS pentru ao modela. De exemplu, dacă nu sunteți mulțumit de culoarea albă care înconjoară dispozitivul, o puteți modifica aplicând un stil nou pe pagina de web corp etichetă.
„html
"
Cu aceste modificări, prototipul va arăta astfel atunci când animațiile sunt terminate:
Pentru a face o Strat draga, tot ce trebuie sa faci este sa-ti stabilesti draggable.enabled proprietate la Adevărat.
"javascript // Permiteți tragerea
pic.draggable.enabled = adevărat; "
În cazul în care un Strat este draggable, puteți adăuga ascultători de evenimente pentru a răspunde la diverse evenimente legate de tragere, cum ar fi dragend și dragmove. De exemplu, iată a dragend eveniment care se întoarce pic la poziția inițială:
"javascript / Handle dragend
pic.on ("dragend", funcția () pic.animate ("proprietăți": x: Ecran.width / 2 - pic.width / 2, // Loc la centrul y: 440 // Original Y );); "
În acest tutorial, ați învățat elementele de bază ale creării de prototipuri interactive pentru aplicațiile mobile utilizând Framer. Dat fiind că prototipurile Framer sunt pagini web statice, le puteți încărca pe orice server HTTP pentru a le distribui prietenilor și clienților.
Aș dori, de asemenea, să vă spun că, dacă sunteți competent cu Adobe Photoshop, nu este necesar să creați programatic programele de interfață cu utilizatorii de prototipuri. Aveți posibilitatea să proiectați aspectul în Photoshop și să convertiți grupurile de strat din PSD în Framer's Strat obiecte. De asemenea, aveți opțiunea de a achiziționa și utiliza Framer Studio, un IDE construit special pentru lucrul cu proiectele Framer.
Pentru a afla mai multe despre cadrul Framer, puteți consulta documentația Framer. În a doua parte a acestei serii, mă voi arunca mai adânc în navigație, derulare și animație.
