Conţinut
- Importați din schiță
- Creați straturi de mască și avatar
- Definiți stări
- Animează între state
- Încercați-l pe un dispozitiv mobil real
Raționamentul din spatele prototipurilor de proiectare nu este nou - este același cu tot ceea ce este noutatea despre proiectare în browser. Când vedeți un design în contextul său real, este complet diferit. Luezi decizii mai bune atunci când nu trebuie să faci presupuneri cu privire la modul în care va funcționa și se va simți o interfață. Acest lucru poate suna ca o muncă suplimentară, dar ideile pe care le puteți obține văzând că designul funcționează sunt de neprețuit.
Framer este un nou instrument de protejare bazat pe cod. Puteți crea machete în Sketch (sau Photoshop) așa cum ați face de obicei și să le importați în Framer. Apoi, scrieți un mic CoffeeScript și puteți realiza multe.
Vă voi învăța noțiunile de bază ale prototipurilor în Framer, folosind exemplul unui prototip de aplicație iOS cu două vizualizări: o vizualizare de profil și o vizualizare mărită a imaginii avatarului utilizatorului. Vom prototipa modul în care se va deschide și închide vizualizarea foto extinsă și o vom anima și. Vizualizați demonstrația online aici (pentru a vedea codul sursă, faceți clic pe pictograma din colțul din stânga sus). De asemenea, veți avea nevoie de versiunea de încercare gratuită Framer, pe care o puteți obține de la framerjs.com.
Importați din schiță
Primul pas este să importați straturi din Sketch în Framer. Pur și simplu faceți clic pe butonul Import în Framer în timp ce designul este deschis în Sketch și alegeți fișierul corect în dialogul care urmează. Framer va importa automat imagini din fiecare strat și le va face accesibile prin cod ca acesta:
schiță = Framer.Importer.load "importat / profil"
Folosiți acea variabilă pentru a accesa straturile importate. De exemplu, pentru a face referire la stratul numit „conținut” în fișierul Sketch, ați introduce sketch.content în Framer.
Creați straturi de mască și avatar
Funcția de bază a acestui prototip este de a extinde imaginea avatarului atunci când este atinsă, apoi de a o închide când este atinsă din nou. În primul rând, vom crea două straturi de mască - o mască imbricată sau o mască în interiorul altei măști. Vom anima ambele măști simultan pentru a crea un efect de deschidere și închidere frumos, subtil. Stratul headerMask va decupa fotografia avatarului într-un dreptunghi atunci când este extins, iar stratul de mască îl va decupa într-un cerc mic din vizualizarea profilului.
Creați stratul headerMask astfel:
headerMask = nou Lățimea stratului: ecran.lățime, înălțime: 800 fundal Culoare: „transparent”
Prima linie de cod creează și numește noul strat. Apoi, folosind sintaxa indentării CoffeeScript, setăm lățimea, înălțimea și proprietățile fundalului. Vom folosi un fundal transparent, astfel încât straturile de dedesubt să se afișeze atunci când fotografia avatarului este extinsă.
Apoi, creați stratul de mască:
mască = nou Lățime strat: 1000, înălțime: 1000 fundal Culoare: "transparent", margine Rază: 500 y: sketch.header.height - 100 superLayer: header Scală mască: 0,2, origine Y: 0
Creăm un strat nou și setăm proprietăți în același mod. Bordura mare Radius face din acest strat un cerc. Poziționăm stratul de mască astfel încât să se suprapună peste stratul de antet, care a fost importat din Sketch. De asemenea, vom reduce până la 20%, sau 0,2. O origine Y de zero setează punctul de ancorare sau înregistrarea imaginii la marginea superioară.
Proprietatea rămasă, superLayer, setează stratul headerMask pe care l-am creat ca părinte al acestui nou strat. Acesta este modul în care funcționează mascarea în Framer. Pur și simplu setați proprietatea superLayer, iar stratul părinte va masca copilul.
Apoi, trebuie să creăm imaginea avatarului și să o plasăm în acele noi măști. Pentru a mări și a anima limitele de decupare, vom crea manual stratul de avatar. Copiați o fotografie în subfolderul „imagini” din dosarul proiectului. Apoi creați un strat folosind acea imagine:
avatar = new Layer image: "images / avatar.png" width: mask.width, height: mask.height superLayer: mask, force2d: true
Observați că setăm superLayer-ul avatarului ca strat de mască. Ambele sunt acum imbricate în headerMask. De asemenea, setăm lățimea și înălțimea, astfel încât imaginea să umple complet zona mascată.
În cele din urmă, vom crea o variabilă pentru a stoca poziția Y a măștii pe care o vom folosi pentru animație. Îl vom centra orizontal, deoarece este mai mare decât ecranul.
maskY = mask.y mask.centerX ()
Definiți stări
Primul pas în crearea unei animații este definirea stărilor de început și de sfârșit. În Framer, stările sunt ca niște cadre cheie scrise în cod. Un stat este doar o colecție de proprietăți. Fiecare strat are o stare implicită. Pentru acest prototip, acea valoare implicită va servi ca punct de pornire pentru animație, deci trebuie doar să setăm o a doua stare pentru fiecare strat.
Sintaxa pentru stări este foarte simplă. Faceți referire la strat, utilizați metoda layer.states.add (), apoi listați proprietățile care trebuie incluse.
sketch.content.states.add (hide: {opacity: 0}) headerMask.states.add (move: {y: 120}) mask.states.add (grow: {scale: 1.1, y: maskY - 420})
A doua stare pentru stratul de conținut, care a fost importat din Sketch și conține toate celelalte elemente ale ecranului de profil, ar trebui să fie complet transparentă. În acest fel, când avatarul este extins, vom avea un fundal negru, iar restul de pictograme și elemente importate vor fi afișate.
A doua linie de cod creează o stare pentru headerMask, care o va muta pur și simplu în poziția Y de 120. Acest lucru va permite ca titlul și butonul de închidere să se afișeze în partea de sus a ecranului atunci când fotografia avatarului este mărită. De asemenea, va anima limitele de decupare ale fotografiei avatarului.
În cele din urmă, o nouă stare pentru stratul de mască îl va mări și îl va muta în sus, utilizând variabila mascăY pe care am creat-o mai devreme. Deoarece originea Y (sau punctul de ancorare) al stratului de mască este marginea sa superioară, trebuie să o deplasăm cu 420 pixeli în sus, astfel încât centrul imaginii să fie vizibil.
Animează între state
Pentru a anima între stările implicite și cele noi pe care tocmai le-am creat, avem nevoie doar de încă patru linii de cod. Vom seta un gestionar de clicuri pe stratul de avatar. Când un utilizator îl atinge pe ecranul profilului, vom trece la vizualizarea extinsă prin stări de ciclism. Când este apăsat din nou, vom reveni la stările implicite, astfel încât să revină la un cerc mic. Aceleași linii de cod gestionează ambele interacțiuni:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Prima linie a acestui bloc configurează gestionarul de clicuri pe stratul de avatar. De fiecare dată când este apăsat, indiferent de modul în care este decupat sau de dimensiunea acestuia, declarațiile următoare vor rula.
Apoi, ne referim pur și simplu la fiecare strat și folosim metoda layer.states.next () pentru a comuta stările. Când utilizați layer.states.next (), Framer va utiliza setările sale de animație implicite interne. Acest lucru este extrem de convenabil, dar puteți crea animații chiar mai bune prin îmbunătățirea curbelor de animație.
Când utilizați stări precum suntem aici, puteți schimba cu ușurință fiecare curbă de animație separat utilizând proprietatea layer.states.animationOptions. Cu doar trei ajustări ușoare, animația se simte complet diferită:
sketch.content.states.animationOptions = curbă: "ușurință", timp: 0,3 headerMask.states.animationOptions = curbă: "spring (150, 20, 0)" mask.states.animationOptions = curve: "spring (300, 30, 0) "
Pentru stratul de conținut care se estompează, vom alege o curbă simplă presetată, ușurată și vom seta durata animației la 0,3, astfel încât să fie foarte rapidă.
Pentru straturile headerMask și mask, utilizați o curbă de arc. În scopurile noastre, trebuie doar să știți că valorile curbei arcului modifică viteza și săritura animației. Valorile pentru stratul de mască vor face animația mult mai rapidă decât headerMask și conținut. Pentru mai multe detalii despre setările curbei arcului, consultați documentația Framer la framerjs.com/docs.
Încercați-l pe un dispozitiv mobil real
Vederea designului pe un dispozitiv real este mult mai eficientă decât utilizarea emulatoarelor și veți vedea avantajele în munca dvs. Framer include o caracteristică oglindă, care este un server încorporat care oferă o adresă URL prototipului dvs. prin rețeaua dvs. locală. Pur și simplu accesați adresa URL utilizând dispozitivul.
Ați învățat tot ce trebuie să știți pentru a vă prototipa propriile modele în Framer. Ce mai astepti?
Cuvinte: Jarrod Drysdale
Jarrod Drysdale este autor, consultant în design, producător de produse digitale. Acest articol a fost publicat inițial în numărul 270 al revistei net.
I-a plăcut asta? Citiți acestea!
- Creați prototipuri live, care pot fi făcute clic în Sketch
- Cum să începeți un blog
- Cei mai buni editori foto
