Sisu
- Import visandist
- Looge maski ja avatari kihid
- Määratlege olekud
- Animeerige riikide vahel
- Proovige seda päris mobiilseadmes
Kujundusprototüüpide loomise põhjendused pole uued - need on samad, mis kogu brauseri kujundamise kohta. Kui näete disaini tegelikus kontekstis, on see täiesti erinev. Paremaid otsuseid teete siis, kui te ei pea tegema eeldusi liidese toimimise ja tunde kohta. See võib tunduda lisatööna, kuid teadmised, mida saate oma disaini töötades näha, on hindamatud.
Framer on uus koodipõhine prototüüpimise tööriist. Sketchis (või Photoshopis) saate luua makette nagu tavaliselt, ja importida need kaadrisse Framer. Seejärel kirjutage väike CoffeeScript ja saate palju saavutada.
Ma õpetan teile Frameris prototüüpimise põhitõdesid, kasutades iOS-i rakenduse prototüübi näidet, millel on kaks vaadet: profiilivaade ja kasutaja avatari pildi suurendatud vaade. Prototüüpime, kuidas laiendatud fotovaade avaneb ja sulgub, ning animeerime selle ka. Vaadake veebidemot siin (lähtekoodi nägemiseks klõpsake lihtsalt vasakus ülanurgas oleval ikoonil). Samuti vajate Frameri tasuta prooviversiooni, mille saate aadressilt framerjs.com.
Import visandist
Esimene samm on kihtide importimine Sketchist kaadrisse Framer. Kui disainilahendus on Sketchis avatud, klõpsake lihtsalt nupul Importimine nuppu Import ja valige järgmises dialoogiboksis õige fail. Raamija impordib pildid igast kihist automaatselt ja muudab need ligipääsetavaks järgmise koodi abil:
sketch = Framer.Importer.load "imporditud / profiil"
Kasutage seda muutujat imporditud kihtidele juurdepääsemiseks. Näiteks faili Sketch viitega kihile nimega „sisu” tippige Framerisse sketch.content.
Looge maski ja avatari kihid
Selle prototüübi põhiülesanne on avatari pildi laiendamine selle puudutamisel ja seejärel selle uuesti sulgemisel selle sulgemine. Kõigepealt loome kaks maskikihti - pesastatud maski või maski teise maski sisse. Animeerime mõlemad maskid korraga, et luua kena, peen ava- ja sulgemisefekt. Kiht headerMask kärbib avatari foto laiendamisel ristkülikuks ja maskikiht lõikab selle profiilivaates väikeseks ringiks.
Looge kiht headerMask järgmiselt:
headerMask = new Kihi laius: Screen.width, height: 800 backgroundColor: "transparent"
Esimene koodirida loob ja nimetab uue kihi. Seejärel määrame CoffeeScripti taande süntaksit kasutades laiuse, kõrguse ja tausta omadused. Kasutame läbipaistvat tausta, nii et avatari foto laiendamisel kuvatakse all olevad kihid.
Järgmisena looge maskikiht:
mask = uus Kihi laius: 1000, kõrgus: 1000 taustVärv: "läbipaistev", äärisRadius: 500 y: sketch.header.height - 100 superLayer: headerMask skaala: 0,2, päritoluY: 0
Loome uue kihi ja määrame omadused samamoodi. Suur borderRadius muudab selle kihi ringiks. Maski kiht paigutatakse nii, et see kattuks Sketchist imporditud päiskihiga. Samuti vähendame 20 protsendini ehk 0,2-ni. Null originaal seab pildi kinnituspunkti või registreerimise ülemisse serva.
Ülejäänud atribuut superLayer määrab meie loodud headerMask kihi selle uue kihi vanemaks. Nii toimib maskeerimine Frameris. Lihtsalt määrake omadus superLayer ja vanemkiht varjab last.
Järgmisena peame looma avatari graafika ja asetama selle nende uute maskide sisse. Kärpimispiiride suumimiseks ja animeerimiseks loome avatari kihi käsitsi. Kopeerige foto projekti kausta alamkausta ’images’. Seejärel looge selle pildi abil kiht:
avatar = uus kihtkujutis: "images / avatar.png" laius: mask.width, height: mask.height superLayer: mask, force2d: true
Pange tähele, et seadsime avatari superkihi maskikihiks. Mõlemad on nüüd pesas headerMask. Samuti määrasime laiuse ja kõrguse, nii et pilt täidaks maskeeritud ala täielikult.
Viimasena loome muutuja animatsiooni jaoks kasutatava maski Y-positsiooni salvestamiseks. Keskendame selle horisontaalselt, kuna see on ekraanist suurem.
maskY = mask.y mask.centerX ()
Määratlege olekud
Animatsiooni loomise esimene samm on algus- ja lõppseisundite määratlemine. Frameris on olekud nagu koodiga välja kirjutatud võtmekaadrid. Riik on vaid omaduste kogum. Igal kihil on vaikeseisund. Selle prototüübi puhul on see vaikimisi animatsiooni alguspunkt, seega peame iga kihi jaoks määrama ainult teise oleku.
Olekute süntaks on väga lihtne. Viidake kihile, kasutage meetodit layer.states.add () ja loetlege kaasatavad omadused.
sketch.content.states.add (peida: {läbipaistmatus: 0}) headerMask.states.add (liiguta: {y: 120}) mask.states.add (kasvama: {skaala: 1.1, y: maskY - 420})
Sketchist imporditud sisukihi teine olek, mis sisaldab kõiki muid profiiliekraani elemente, peaks olema täiesti läbipaistev. Nii on avatari laiendamisel must taust ning ülejäänud imporditud ikoonid ja elemendid kuvatakse läbi.
Teine koodirida loob headerMaskile oleku, mis viib selle lihtsalt Y-asendisse 120. See võimaldab pealkirja ja sulgemisnuppu kuvada ekraani ülaosas, kui avatari fotot suurendatakse. Animeeritakse ka avatari foto kärpimispiirid.
Lõpuks suurendab maskikihi uus olek seda nii ülespoole kui ka ülespoole, kasutades varem loodud muutujat maskY. Kuna maskikihi originaal (või kinnituspunkt) on selle ülemine serv, peame seda 420 piksli võrra ülespoole nihutama, nii et pildi keskosa oleks nähtav.
Animeerige riikide vahel
Vaikeseisundite ja äsja loodud uute vahel animeerimiseks vajame ainult veel nelja koodirida. Määrame avatari kihile klõpsude käitleja. Kui kasutaja puudutab seda profiiliekraanil, läheme laiendatud vaate juurde rattasõidu olekute järgi. Uuesti koputades liigume tagasi vaikeseisunditesse, nii et see naaseb väikesele ringile. Mõlemad interaktsioonid käsitlevad samu koodiridu:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Selle ploki esimene rida seab avatari kihile klõpsude käitleja. Iga kord, kui seda puudutatakse, olenemata sellest, kuidas seda kärbitakse või mis suurus see on, käivitatakse järgnevad avaldused.
Seejärel viidame lihtsalt igale kihile ja kasutame olekute vahetamiseks meetodit layer.states.next (). Kui kasutate layer.states.next (), kasutab Framer sisemisi animatsiooni vaikesätteid. See on äärmiselt mugav, kuid saate animatsioonikõveraid peenestades veelgi paremaid animatsioone meisterdada.
Selliste olekute kasutamisel nagu meie oleme siin, saate iga animatsioonikõverat hõlpsasti eraldi muuta, kasutades omadust layer.states.animationOptions. Vaid kolme väikese kohanduse korral tundub animatsioon täiesti erinev:
sketch.content.states.animationOptions = kõver: "lihtsus", aeg: 0.3 headerMask.states.animationOptions = kõver: "spring (150, 20, 0)" mask.states.animationOptions = kõver: "spring (300, 30, 0) "
Hääbuva ja sisselülituva sisukihi jaoks valime lihtsa kõvera eelseadistuse, lihtsuse ja määrame animatsiooni kestuseks 0,3, et see oleks väga kiire.
HeaderMask ja mask kihtide jaoks kasutage vedrukõverat. Meie eesmärkidel peate lihtsalt teadma, et vedrukõvera väärtused muudavad animatsiooni kiirust ja põrkumist. Maskikihi väärtused muudavad selle animatsiooni palju kiiremaks kui headerMask ja sisu. Lisateavet vedrukõvera sätete kohta leiate Frameri dokumentatsioonist aadressil framerjs.com/docs.
Proovige seda päris mobiilseadmes
Disaini nägemine reaalses seadmes on palju tõhusam kui emulaatorite kasutamine ja näete oma töö eeliseid. Framer sisaldab peeglifunktsiooni, mis on sisseehitatud server, mis pakub teie prototüübile URL-i kohalikus võrgus. Külastage lihtsalt oma seadme abil URL-i.
Olete Frameris õppinud kõike, mida peate teadma oma kujunduse prototüüpimiseks. Mida sa ootad?
Sõnad: Jarrod Drysdale
Jarrod Drysdale on autor, disainikonsultant, digitaalsete toodete valmistaja. See artikkel ilmus algselt ajakirja netiväljaanne 270.
Meeldis see? Loe neid!
- Looge Sketchis klõpsatavad elusprototüübid
- Kuidas blogi alustada
- Parimad fototoimetajad
