Share
I disse dager trenger du ikke bildedigeringsprogramvare som Adobe Photoshop eller Gimp for å opprette brukergrensesnittmockups for mobilappene dine. En app som samsvarer med Googles materialdesignspråk består vanligvis av bare enkle geometriske former, solide farger, ikoner og tekst. En brukergrensesnitt prototype for en slik app kan opprettes enkelt ved hjelp av bare kode.
I denne todelte serien skal du lære grunnleggende om Framer, en åpen kildekode Javascript ramme som lar deg programmatisk lage interaktive og realistiske prototyper med vakre animasjoner for iOS og Android apps.
For å følge denne opplæringen må du:
Fordi en framer prototype er noe annet enn en vanlig nettside skrevet i HTML, CSS og Javascript, la oss starte med å lage en tom HTML-side. Jeg skal ringe denne siden index.html.
"html
"
For å kunne benytte Framer API på denne siden, bør du legge til en manus tag som peker til framer.js filen du lastet ned.
html
Siden Framer bruker protokollrelaterte nettadresser for å laste inn ulike ressurser, kan du ikke bare dobbeltklikke filen du opprettet for å åpne den i en nettleser. Å gjøre det vil føre til nettverksfeil. I stedet bør du få tilgang til det via en HTTP-server.
For å raskt lage en HTTP-server som kan betjene websiden din, kan du bruke Python SimpleHTTPServer modul.
Åpne en terminal, naviger til katalogen som inneholder nettsiden du opprettet, og utfør følgende kommando.
bash python -m SimpleHTTPServer 8000
Dette vil starte en server som kjører på port 8000 som standard. Du kan nå åpne Google Chrome og vise websiden din ved å besøke http: // localhost: 8000 /.
For å gjøre prototypen din realistisk på en stasjonær nettleser, bør du vise alle elementene i rammen til en mobilenhet. Framer lar deg tegne en rekke populære mobilenheter, for eksempel iPhones, Nexus-telefoner og -tabletter, iPads, Apple-klokker og mer. For denne opplæringen bruker jeg en rosa iPhone 5c.
For å tegne en enhet, bør du først opprette en forekomst av DeviceComponent klasse og ring det setupContext metode. Du kan da endre det Enhetstype til enheten du velger. Legg til en annen manus tag til HTML-siden du opprettet tidligere, og legg til følgende kode for den:
"javascript var device = ny Framer.DeviceComponent ();
device.setupContext (); device.deviceType = "iphone-5c-rosa"; "
Når du oppdaterer websiden din, bør du se følgende i nettleservinduet:
Hvis du vil, kan du også gjengi en hånd som holder enheten ved å legge til -hånd på slutten av Enhetstype streng. Hvis enheten ser for stor eller for liten ut, kan du bruke setDeviceScale metode for å endre størrelsen.
"javascript // Vis en hånd med enheten device.deviceType =" iphone-5c-pink-hand ";
// Endre størrelsen device.setDeviceScale (0.3); "
Dette fullfører det opprinnelige oppsettet. Resultatet skal se slik ut:
Nesten hvert element i din Framer-prototype vil være en forekomst av Lag klasse. EN Lag er veldig lik en HTML div element og kan brukes til å tegne rektangler, bilder og tekst.
Å opprette en Lag du må ringe sin konstruktør og sende den et JSON objekt som definerer ulike egenskaper til Lag. Mens du lager en Lag, du angir vanligvis sine dimensjoner (bredde og høyde) og posisjon (x og y). Du kan også bruke centerX og centery metoder for å sentrere det horisontalt og vertikalt. Her er et eksempel på hvordan du lager en Lag.
"javascript // Tegn en hvit firkant
var whiteSquare = nytt lag (backgroundColor: "#FFFFFF", bredde: 400, høyde: 400, y: 20);
// Senter horisontalt whiteSquare.centerX (); "
For å vise et bilde må du opprette en Lag hvem sin bilde Egenskapen peker til bildefilen du vil vise.
"javascript // Tegn et bilde
var pic = nytt lag (bilde: "painting.jpg", bredde: 400, høyde: 400, y: 440);
pic.centerX ();"
For å vise tekst (eller HTML), kan du bruke html eiendom. Du kan også legge til CSS styling til en Lag bruker sin stil eiendom.
"javascript // Skriv tekst
var text = nytt lag (width: Screen.width, height: 100, y: 860, html: "Dette er en prototype", stil: fontSize: "50px", textAlign: "center", farge: "# f1f2f3 ", PaddingTop:" 18px ");"
Med de tre Lag objekter vi opprettet i dette trinnet, ville prototypen se slik ut:
Du kan knytte hendelseshåndterere til en Lag bruker på metode. De på Metoden er mye som Javascript er addEventListener metode. Det tar navnet på en hendelse som sin første parameter og en funksjon som den andre parameteren.
Slik legger du til en klikk handler til tekst lag vi opprettet i forrige trinn:
javascript text.on ("click", function () text.html = "Jeg ble klikket";);
Du vil se flere hendelseshåndterere senere i denne opplæringen.
Framer skiller seg ut fra konkurransen takket være sine avanserte animasjonseffekter. Med Framer kan du animere nesten alle egenskapene til din Lag objekter som bruker animere metode. De animere Metoden tar som input et JSON-objekt som spesifiserer egenskapene som skal animeres.
JSON-objektet kan også inneholde forskjellige konfigurasjonsdetaljer av animasjonen, for eksempel varighet og oppførsel.
For eksempel, la meg vise deg hvordan du lager en animasjon som slår whiteSquare inn i en sirkel ved å endre dens borderRadius.
"javascript // Animer borderRadius
whiteSquare.animate (egenskaper: borderRadius: whiteSquare.width / 2,
tid: 2, // varighet er to sekunder kurve: "easy-in-out" // bruk lettelse); "
Her er et annet eksempel som viser hvordan du kan animere skyggen av whiteSquare når den klikkes.
"javascript // Animate Shadow
whiteSquare.on ("klikk", funksjon ()
Accentsconagua
// Sett skyggefarge først whiteSquare.shadowColor = "# 555555"; whiteSquare.animate ("properties": shadowBlur: 40, shadowSpread: 10,); );" Merk at bare de egenskapene hvis verdier er tall kan animeres. Som shadowColor er ikke et tall, det bør settes før du ringer animere.
Hvis du bruker Framer, er det sannsynlig at du prøver å lage en svært interaktiv prototype med mange animasjoner. Ringer på animere Metode flere ganger på a Lag kan bli kjedelig. I stedet kan du knytte en liste over stater med en Lag og bare bytte mellom statene når det er nødvendig.
Hver Lag har en stater eiendom som er en forekomst av LayerStates klasse. For å legge til nye stater i en Lag, du ringer til Legg til metode på stater eiendom. I følgende kodestykke legger vi til to nye stater til pic gjenstand.
"javascript // Legg til to stater
pic.states.add ("myState1": borderRadius: 100,
"myState2": borderRadius: 200); "
Å legge til en stat resulterer ikke i umiddelbar visuell endring. Men når a Lag bytter fra en stat til en annen, vil du kunne se animasjonen. For å endre tilstanden til a Lag, du ringer til bytte om metode på stater eiendom av Lag gjenstand. Følgende kodestykke viser deg hvordan du endrer tilstanden til pic når den klikkes.
"javascript // Endre tilstand når du klikker
pic.on ("klikk", funksjon () // Bytt til myState2 pic.states.switch ("myState2");); "
Å sykle gjennom tilstandene til a Lag, du kan ringe til neste metode av sin stater gjenstand.
javascript pic.states.next ();
Hvis du vil legge til en bakgrunnsfarge eller et bilde i prototypen din, oppretter du en BackgroundLayer gjenstand. EN BackgroundLayer er en Lag hvis dimensjoner er lik dimensjonene på enhetens skjerm. Slik legger du til et grått BackgroundLayer:
javascript var bg = ny BackgroundLayer (backgroundColor: "#BDBDBD");
Fordi Framer-prototypen er bare en vanlig HTML-side, kan du også bruke CSS til å stile den. Hvis du for eksempel ikke er fornøyd med den hvite fargen som omgir enheten, kan du endre den ved å bruke en ny stil til nettsiden kropp stikkord.
"html
"
Med disse endringene vil prototypen se slik ut når animasjonene er ferdige:
Å lage en Lag Draggable, alt du trenger å gjøre er å sette sin draggable.enabled eiendom til ekte.
"javascript // Tillat å dra
pic.draggable.enabled = true; "
Hvis en Lag er draggbar, kan du legge til hendelselyttere til det som svarer på ulike slepende relaterte hendelser, for eksempel dragend og dragmove. For eksempel, her er en dragend hendelseshåndterer som returnerer pic til sin opprinnelige posisjon:
"javascript // Handle dragend
pic.on ("dragend", funksjon () pic.animate ("properties": x: Screen.width / 2 - pic.width / 2, // Plasser ved Center y: 440 // Original Y );); "
I denne opplæringen lærte du grunnleggende om å lage interaktive prototyper for mobilapper ved hjelp av Framer. Da dine Framer-prototyper er statiske nettsider, kan du laste dem opp til hvilken som helst HTTP-server for å dele dem med dine venner og klienter..
Jeg vil også fortelle deg at hvis du er kompetent med Adobe Photoshop, trenger du ikke å opprette brukergrensesnittelementene til prototyper programmatisk. Du kan designe layoutet i Photoshop og konvertere laggruppene i PSD til Framer Lag objekter. Du har også mulighet til å kjøpe og bruke Framer Studio, en IDE bygget spesielt for å jobbe med Framer-prosjekter.
For å lære mer om Framer-rammen, kan du se Framers dokumentasjon. I den andre delen av denne serien vil jeg dykke dypere inn i navigering, rulling og animasjon.
