Creating Prototyper for iOS og Android Med Framer: Basics
31
Del
22
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Dette innlegget er en del av en serie som heter Opprette Prototyper for iOS og Android Med Framer.Beyond grunnleggende med Framer
Innledning
I disse dager, trenger du ikke bilde redigering programvare som Adobe Photoshop eller Gimp til å lage brukergrensesnitt mock-ups for dine mobile apps. En app som samsvarer med Googles Material Design språket er vanligvis sammensatt av bare enkle geometriske former, solide farger, ikoner og tekst. Et brukergrensesnitt prototype for en slik app kan lages enkelt ved å bruke bare kode.
I denne todelte serien, du kommer til å lære det grunnleggende Framer, en åpen kildekode Javascript rammeverk som lar deg programma lage interaktive og realistiske prototyper med vakre animasjoner for iOS og Android-apps
Forutsetninger
For å følge denne opplæringen, trenger du:.
den siste versjonen av Framer rammeverket
Google Chrome eller andre WebKit-basert nettleser
Python 2.7 eller høyere
en teksteditor
en grunnleggende forståelse av HTML, CSS og Javascript
1. Initial Setup
Trinn 1: Lag en HTML-side
Fordi en Framer prototype er noe annet enn en vanlig nettside skrevet på HTML, CSS og Javascript, la oss begynne med å lage en tom HTML-side. Jeg kommer til å kalle denne siden index.html
. ≪! DOCTYPE html > < html > < head > < /head > < body > < /body > < /html >.
For å gjøre bruk av Framer API på denne siden, bør du legge et script tag som peker til de framer.js filen du lastet ned
< script src = "framer JS "> < /script >
Trinn 2: Lag en HTTP Server
Som Framer gjør bruk av protokoll relative URLer å laste ulike ressurser, kan du ikke bare å dobbeltklikke på filen du opprettet for å åpne den i en nettleser. Gjør du det vil føre til nettverksfeil. I stedet bør du tilgang til det gjennom en HTTP-server.
Hvis du raskt lage en HTTP-server som er i stand til å betjene nettsiden din, kan du bruke Pythons SimpleHTTPServer modulen.
Åpne en terminal, navigere til katalogen som inneholder nettsiden du opprettet, og kjør følgende kommando.
python -m SimpleHTTPServer 8000
Dette vil starte en server som kjører på port 8000 som standard. Nå kan du åpne Google Chrome og vise din nettside ved å besøke http: //localhost:. 8000 /
Trinn 3: Tegn en enhet
For å gjøre prototype føler realistisk på en stasjonær nettleser , bør du vise alle sine elementer inne i rammen av en mobil enhet. Framer lar deg tegne en rekke populære mobile enheter, slik iPhone, Nexus-telefoner og tabletter, iPads, Apple Klokker og mer. For denne opplæringen, vil jeg bruke en rosa iPhone 5c.
Hvis du vil tegne en enhet, bør du først opprette en forekomst av DeviceComponent klassen og kaller sin setupContext metoden. Du kan deretter endre deviceType til enheten du ønsker. Legg til en annen skriptmerket til HTML-siden du opprettet tidligere, og legge til følgende kode i det:
Var enhet = new Framer.DeviceComponent (); device.setupContext (); device.deviceType = "iphone-5c-rosa";
Når du oppdaterer nettsiden din, bør du se følgende i nettleservinduet:
Hvis du vil, kan du også gjøre en hånd å holde enheten ved å legge til -Hand Dette fullfører første oppsettet. Resultatet bør ser slik ut: Nesten hver element i Framer prototype vil være en forekomst av Layer klassen. Et lag er svært lik en HTML div element, og kan brukes til å tegne rektangler, bilder og tekst. Hvis du vil opprette et lag du må ringe sin konstruktør og gi det en JSON objekt som definerer ulike egenskaper Layer. Mens du oppretter en Layer, du vanligvis spesifisere målene (bredde og høyde) og posisjon (x og y). Du kan også bruke centerX og centery metoder for å sentrere den horisontalt og vertikalt. Her er et eksempel på hvordan du oppretter en Layer For å vise et bilde, må du opprette en Layer hvis bilde eiendom poeng til bildefilen du ønsker å vise For å vise tekst (eller HTML), kan du bruke html eiendommen. Du kan også legge til CSS styling til et lag med sin stil eiendom Med de tre Layer objektene vi opprettet i dette trinnet, vil prototypen ligne dette: Du kan legge hendelsesbehandlinger til et lag som bruker på metoden. Den på metoden er mye som Javascript er addEventListener metode. . Det tar navnet på en hendelse som sin første parameter og en funksjon som sin andre parameter Her er hvordan du legger til et klikk behandleren til teksten laget vi opprettet i forrige trinn: Du vil se flere hendelsesbehandlinger senere i denne opplæringen Framer skiller seg ut fra konkurrentene takket være sine avanserte animasjonseffekter. Med Framer, kan du animere nesten hver eiendom for dine Layer objekter ved hjelp av animere metoden. Animere metoden tar som input en JSON objekt som spesifiserer egenskapene som bør animerte. JSON objekt kan også inkludere ulike konfigurasjons detaljer om animasjon, slik som dens varighet og atferd. Som et eksempel, la meg vise deg hvordan du oppretter en animasjon som viser whiteSquare inn i en sirkel ved å endre sin borderRadius Her er et annet eksempel som viser hvordan å animere skyggen av whiteSquare når den blir klikket Merk at bare de eiendommer der verdiene er tall kan være animert. Som shadowColor er ikke et tall, bør det settes før du ringer animere. Hvis du bruker Framer, er det sannsynlig at du prøver å lage et interaktivt prototype med masse animasjoner. Ringe animere metoden flere ganger på et lag kan få kjedelige. I stedet kan du knytte en liste over stater med et lag og bare bytte mellom statene når det trengs. Hver Layer har statene eiendom som er en forekomst av LayerStates klassen. For å legge til nye stater til et lag, kaller du add metoden på statene eiendommen. I det følgende kodebiten, legger vi to nye stater til pic objektet Legge til en stat ikke resulterer i en umiddelbar visuell endring. Men når et lag bytter fra en tilstand til en annen, vil du kunne se animasjonen. Å endre status for et lag, kaller du bryteren metoden på tilstander eiendom i Lag-objekt. Følgende kodebiten viser deg hvordan du kan endre tilstanden pic når det klikkes. Hvis du vil bla gjennom delstatene et lag, kan du ringe den neste metode for sine stater protesterer For å legge til en bakgrunnsfarge eller bilde til din prototype, oppretter du en BackgroundLayer objekt. En BackgroundLayer er et lag hvis dimensjoner er lik dimensjonene på enhetens skjerm. Her er hvordan du legger til en grå BackgroundLayer: Fordi Framer prototype er bare en vanlig HTML-side, kan du også bruke CSS for å style det. For eksempel, hvis du ikke er fornøyd med den hvite fargen rundt enheten, kan du endre den ved å bruke en ny stil til websiden kropp tag Med disse endringene, vil prototypen ser slik ut når animasjonene er ferdig: For å gjøre en Layer flyttbare, alt du trenger å gjøre er å sette sin draggable.enabled eiendom for å true Hvis en Layer er flyttbare, er du i stand til å legge hendelsen lyttere til at svare på ulike dra relaterte hendelser, som for eksempel dragend og dragmove. For eksempel, her er en dragend hendelseshåndterer som returnerer pic til sin opprinnelige stilling: I denne opplæringen, lært deg det grunnleggende for å skape interaktive prototyper for mobile applikasjoner som bruker Framer. Som dine Framer prototyper er statiske nettsider, kan du laste dem opp til enhver HTTP-server for å dele dem med venner og klienter. Jeg vil også gjerne fortelle deg at hvis du er kompetent med Adobe Photoshop, du trenger ikke å lage elementene i brukergrensesnittet av dine prototyper programmatisk. Du kan designe layouten i Photoshop og konvertere de laggrupper i PSD inn Framer Layer stedene. Du har også muligheten til å kjøpe og bruke Framer Studio, en IDE bygget spesielt for å arbeide med Framer prosjekter. Hvis du vil vite mer om Framer rammeverk, kan du referere til Framer dokumentasjon. I den andre delen av denne serien, vil jeg dykke dypere inn navigasjon, rulling, og animasjon.
enden av deviceType strengen. Hvis enheten ser for stor eller for liten, kan du bruke setDeviceScale metode for å endre størrelsen
//Vise en hånd med devicedevice.deviceType = "iphone-5c-rosa-hånd."; //Endre sizedevice .setDeviceScale (0,3);
2. Tegning bokser, tekst og Images
//Tegn en hvit squarevar whiteSquare = new Layer ({bakgrunnsfarge: "#FFFFFF", bredde: 400, høyde: 400, y: 20});. //Senter horizontallywhiteSquare .centerX ();
//Tegn en imagevar pic = new Layer ({image:. "maleri .jpg ", bredde: 400, høyde: 400, y: 440}); pic.centerX ();
//Skriv textvar tekst = new Layer ({width:. Screen.width, høyde: 100, y: 860, html: "Dette er en prototype", style: {skrift: "50 piksler", Tekstjustering: "sentrum", farge: "# f1f2f3", paddingTop: "18px"}});
3. Legge Hendelser
text.on ( "klikk", function () {text.html = "Jeg ble klikket";});
4.. Legge Animasjon
//Animate borderRadiuswhiteSquare.animate ({egenskaper.: {borderRadius: whiteSquare.width /2}, tid: 2 , //varighet er to sekunder kurve: "ease-in-out" //gjelder lettelser});
//Animate ShadowwhiteSquare. .på ("klikk", function () {//Sett skyggefargen første whiteSquare.shadowColor = "# 555555"; whiteSquare.animate ({"egenskaper": {shadowBlur: 40, shadowSpread: 10,}});} );
5. Bruke States
//Legg to-statespic.states.add (. {"MyState1": {borderRadius: 100}, "myState2": {borderRadius: 200}} );
//Endre tilstand når clickedpic.on ("klikk", function () {//Bytt til myState2 pic.states.switch (" myState2 ");});
pic.states.next ();.
6. Endre bakgrunner
Var bg = new BackgroundLayer ({bakgrunnsfarge: "#BDBDBD"});
. ≪ style type = "text /css" > body {background: # C5CAE9} < /style >
7. Håndtering Dra Operations
//Tillat draggingpic.draggable.enabled = true;.
//Handle dragendpic.on ("dragend", function () {pic.animate ({"egenskaper": {x: Screen.width /2 - pic.width /2, //Place på Center y: 440 //Original Y}});});
Konklusjon