Beyond grunnleggende med Framer
21
Del
5
Del

Dette Cyber ​​Monday 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.Creating Prototyper for iOS og Android Med Framer. Basics
Innledning

I min forrige tutorial om Framer, lært deg hvordan du bruker lag, tilstander og hendelser for å lage enkle mock-ups for iOS og Android apps. Framer har mye mer å tilby skjønt. I denne opplæringen, jeg kommer til å fokusere på noen flere avanserte funksjoner av rammeverk som gjør at du kan legge til mer komplekse interaksjoner og effekter til mock-ups.

1. Hekkende Layers

På grunn av et lag kan bygges inne et annet lag, kan du lage komplekse lag hierarkier med Framer. En innebygd laget kalles en sublayer og laget at det er innebygd i heter sin superlayer. Følgende kodebiten viser deg hvordan du bygger et lag innen et annet lag med superLayer eiendommen
Var layer1 = new Layer ({width: 200, høyde: 200});. Var lag2 = new Layer ({width: 100, høyde: 100, superLayer: layer1 //gjør dette laget et barn av layer1});

Du kan benytte deg av lags hierarkier å simulere flere skjermer i dine mock-ups. La meg vise deg hvordan du gjør dette ved hjelp av et eksempel. Vurdere en mock-up som har to skjermer, en innloggingsskjerm og en velkomstskjerm.

Innloggingsskjermen inneholder input felt for brukernavn og passord, og en send-knappen. Velkomstbildet inneholder et bilde og et par linjer med tekst.

For å lage en slik en mock-up, kan du vurdere login og velkommen skjermer som superlayers og elementene i brukergrensesnittet de inneholder som sublayers. . La oss begynne med å skape de superlayers første
Var innlogging = new Layer ({width: Screen.width, høyde: Screen.height,}); Var welcomeScreen = new Layer ({width: Screen.width, høyde: Screen. høyde,});

Som du kan se, innlogging og welcomeScreen er tomme Layer objekter for nå. . La oss legge til noen sublayers til innlogging lag
//De CSS-stiler som skal brukes til layersvar style = {paddingTop: "25px", farge: "# 999", bakgrunnen: "#FFF"}; //Lag brukernavn fieldvar usernameField = new Layer ({width: 500, høyde: 100, y: 100, html: "Brukernavn", stil: stil, superLayer: innlogging //barn av innlogging}); usernameField.centerX (); //Opprett passord fieldvar passwordField = new Layer ({width: 500, høyde: 100, y: 220, html: "Passord", stil: stil, superLayer: innlogging //barn av innlogging}); passwordField.centerX (); //Opprett sende buttonvar submitButton = new Layer ({width: Screen.width, høyde: 100, y: Screen.height - 100, html: "Logg inn", stil: {paddingTop: "25px", farge: "#FFFFFF" , fontWeight: "fet"}, bakgrunnsfarge: "# 2196F3", superLayer. innlogging //barn av innlogging});

På samme måte, la oss nå legge til noen sublayers til welcomeScreen lag
//Lag et lag for å vise en profil picvar profilePic = new Layer ({width: 400, høyde: 400, borderRadius: 200, bilde: 'profile.jpg', y: 100, superLayer: welcomeScreen //barn av welcomeScreen}); profilePic. centerX (); //Opprett et lag for velkomst textvar tekst = new Layer ({width: 400, høyde: 100, y: 600, html: "Velkommen Jenny", bakgrunnsfarge: "", stil: {color: "# FFFFFF "}, superLayer: welcomeScreen //barn av welcomeScreen}); text.centerX ();

På dette punktet, hvis du prøver å vise prototype i en nettleser, det vil se litt rotete. Begge superlayers (innlogging og welcomeScreen) er synlige samtidig.

Hvis du vil skjule et lag, sette deg sin synlig eiendom til false. Her er hvordan du holder welcomeScreen lag skjult når mock-up begynner:
welcomeScreen.visible = false;

For å endre visningen fra innloggingsbildet til velkomstskjermen, kan du bare skjule innlogging lag og slå på synligheten av welcomeScreen lag. Følgende kodebiten viser deg hvordan du kan gjøre det inne et klikk behandleren av submitButton:
submitButton.on ("klikk", function () {loginScreen.visible = false; welcomeScreen.visible = true;});

Gå tilbake til nettleseren og oppdatere siden for å se din mock-up gjør mer fornuftig nå. Husk at nettleseren du bruker til å vise mock-up bør være WebKit-basert, slik som Chrome eller Safari.

Hvis du ikke liker den instant bryteren, kan du animere overgangen ved hjelp av animere funksjon å animere, for eksempel tettheten av lagene
submitButton.on ("klikk", function () {welcomeScreen.opacity = 0;. welcomeScreen.visible = true; //welcomeScreen er fortsatt usynlig //fordi gjennomsikt er null loginScreen.animate ({egenskaper: {opacity: 0}}); welcomeScreen.animate ({egenskaper: {opacity: 1}: 2 //Varighet av animasjon er 2 sekunder});}); < p> Dette er hva overgangen ser ut nå:

2. Bruke Layer Effects

Framer lar deg bruke en rekke bildeeffekter, for eksempel Gaussian Blur, hue rotasjon, lysstyrke /kontrast justering, farge inversjon, sepia tone tillegg og mer, til dine Layer stedene.

Følgende kodebiten viser deg hvordan du bruker blur effekt for å skape en uskarp bakgrunn:
//Lag en bakgrunn layervar bg = new BackgroundLayer ({image: "bg.jpg"}); bg.blur = 5; //Sett Gaussian Blur til 5 piksler

Dette er hva resultatet ser slik ut:

Resten av effektene er brukt på en lignende måte. For eksempel, for å redusere kontrasten i bg lag, må du endre kontrasten eiendommen:
bg.contrast = 50;
3. Opprette Scroll Layers

For å gjøre et lag rullbar, må du legge det i innholdet lag av en ScrollComponent objekt. Opprette et ScrollComponent ligner skape et lag objekt:
Var scroll1 = new ScrollComponent ({width: Screen.width, høyde: Screen.height,});

Følgende kode blokken viser deg hvordan du bygger inn en Layer objekt i innholdet på scroll1:
Var Layer3 = new Layer ({width: 2000, høyde: 2000, bilde: "pattern.jpg", superLayer: scroll1.content //Embed inne innholdet scroll1});

Her er hva en ScrollComponent ser ut i aksjon:

Merk at rulling er bare mulig hvis dimensjonene av laget er større enn dimensjonene på ScrollComponent det er innebygd i

4.. Viser paginated data

Noen ganger, i stedet for kontinuerlig rulling, kan det være lurt å presentere data som et sett av sider. For eksempel kan det være lurt å lage et grensesnitt der en bruker avleser gjennom et sett med bilder. Dette kan gjøres ved hjelp av en PageComponent. Den PageComponent klasse er avledet fra ScrollComponent klassen og har en identisk konstruktør.

Hvis du vil legge et lag til en PageComponent, må du bruke den addPage funksjonen. Følgende kode viser deg hvordan du oppretter en PageComponent og tilsett noen bilde lag til det:
//Lag en PageComponent som fyller opp screenvar pageComponent = new PageComponent ({width: Screen.width, høyde: Screen.height} ); //Lag tre bilder layersvar image1 = new Layer ({width: Screen.width, høyde: Screen.height, bilde: "pink.jpg"}); Var image2 = new Layer ({width: Screen.width, høyde : Screen.height, bilde: "grey.jpg"}); Var image3 = new Layer ({width: Screen.width, høyde: Screen.height, bilde: "blue.jpg"}); //Legg alle bilde lag til pageComponentpageComponent.addPage(image1);pageComponent.addPage(image2);pageComponent.addPage(image3);

The Resultatet ser slik ut:

5. Administrere Animasjoner

Du vet allerede at du kan bruke animere funksjonen til å animere egenskaper av en Layer objekt. Men begynner å ringe animere animasjons umiddelbart. . Hvis du ønsker å ha kontroll over når en animasjon starter eller stopper, kan du bruke animasjonsobjekter i stedet

Her er hvordan du oppretter et animasjonsobjekt:
Var animation1 = new Animation ({lag: mylayer, //navnet på laget som bør //animeres //Egenskaper som bør endre egenskaper: {x: 400}});

Du kan deretter bruke intuitivt heter start, stopp og revers funksjoner for å håndtere animasjonen. For eksempel, for å starte animasjonen påberope start funksjon:
animation1.start ();

Du kan også legge hendelsesbehandlinger til animasjonsobjekter, bruk av funksjonen. Denne funksjonen kan brukes til å lage lenket animasjoner. For eksempel, her er en kodebiten som reverserer animation1 når animasjonen slutter.
Animation1.on (Events.AnimationEnd, function () {//Lag en reversert kopi av animation1 og spille den animation1.reverse () start ();});

Animasjonen vil se slik ut:

6. Endre Device Orientering

Alle de eksemplene jeg viste deg til nå gjengitt den mobile enheten i stående retning. Hvis du ønsker å bruke liggende retning, må du tilordne verdien 90 til orientering eiendommen av DeviceComponent
device.orientation = 90;

I nettleseren, enheten vil nå se slik ut:.

For å animere endringen i orientering, bruker du setOrientation metoden, passerer i sann som sin andre parameter
device.setOrientation (90, true);.
Konklusjon

I denne opplæringen lærte du hvordan du kan gjøre bruk av Framer mer avanserte funksjoner, som for eksempel nestet eller innebygde lag, laget effekter, rulling containere, og animasjons arrangementer. Med litt kreativitet og innsats, kan du nå lage imponerende prototyper bruker Framer rammene. Her er noen vakre mock-ups for å inspirere deg.

Se Framer dokumentasjon for å lære mer om denne kraftige prototyping rammeverket. Anmeldelser