Share
I min tidligere opplæring om Framer lærte du hvordan du bruker lag, stater og hendelser for å lage enkle oppsummeringer for iOS- og Android-appene dine. Framer har mye mer å tilby skjønt. I denne opplæringen skal jeg fokusere på noen mer avanserte funksjoner i rammen som lar deg legge til mer komplekse interaksjoner og effekter på dine mock-ups.
Fordi et lag kan legges inn i et annet lag, kan du opprette komplekse laghierarkier med Framer. Et innebygd lag kalles et underlag, og laget som det er innebygd i kalles dets superlag. Følgende kodestykke viser deg hvordan du legger inn et lag i et annet lag ved hjelp av superLayer eiendom.
"javascript var layer1 = nytt lag (bredde: 200, høyde: 200);
var layer2 = nytt lag (bredde: 100, høyde: 100, superLayer: layer1 // gjør dette laget til et barn av lag1); "
Du kan gjøre bruk av laghierarkier for å simulere flere skjermer i mock-ups. La meg vise deg hvordan du gjør dette ved hjelp av et eksempel. Tenk på en mock-up som har to skjermer, en påloggingsskjerm og en velkomstskjerm.
Påloggingsskjermen inneholder inntastingsfelter for brukernavnet og passordet, og en innleveringsknapp. Velkomstskjermen inneholder et bilde og noen få linjer med tekst.
For å opprette en slik mock-up, kan du vurdere påloggings- og velkomstskjermer som superlayers og brukergrensesnittelementene de inneholder som underlag. La oss begynne med å lage superlayers først.
"javascript var loginScreen = nytt lag (bredde: Screen.width, height: Screen.height,);
var welcomeScreen = nytt lag (bredde: Screen.width, height: Screen.height,); "
Som du kan se, innlogging og welcomeScreen er tomme Lag gjenstander for nå. La oss legge til noen underlag til innlogging lag.
"javascript // CSS-stilene som skal brukes på lagene var style = paddingTop:" 25px ", farge:" # 999 ", bakgrunn:" #FFF ";
// Opprett brukernavn feltet var brukernavnField = nytt lag (bredde: 500, høyde: 100, y: 100, html: "Brukernavn", stil: stil, superLayer: loginScreen // barn på loginScreen); usernameField.centerX ();
// Opprett passordfeltet var passwordField = nytt lag (bredde: 500, høyde: 100, y: 220, html: "Passord", stil: stil, superLayer: loginScreen // barn på loginScreen); passwordField.centerX ();
// Opprett send-knappen var submitButton = nytt lag (bredde: Screen.width, høyde: 100, y: Screen.height - 100, html: "LOGIN", stil: paddingTop: "25px", farge: "# FFFFFF ", fontWeight:" bold ", backgroundColor:" # 2196F3 ", superLayer: loginScreen // barn på loginScreen);"
På samme måte, la oss legge til noen underlag til welcomeScreen lag.
"javascript // Lag et lag for å vise et profilbilde var profilePic = nytt lag (bredde: 400, høyde: 400, borderRadius: 200, bilde: 'profile.jpg', y: 100, superLayer: welcomeScreen // barn av welcomeScreen); profilePic.centerX ();
// Lag et lag for velkomstteksten var text = nytt lag (bredde: 400, høyde: 100, y: 600, html: "Velkommen Jenny", backgroundColor: "", stil: color: "#FFFFFF" , superLayer: welcomeScreen // velkomstskjermbildet); text.centerX ();"
På dette tidspunktet, hvis du prøver å vise prototypen din i en nettleser, vil det se litt rotete ut. Begge superlagene (innlogging og welcomeScreen) er synlige samtidig.
For å skjule et lag, setter du det synlig eiendom til falsk. Slik holder du welcomeScreen lag skjult når mock-up starter:
javascript welcomeScreen.visible = false;
For å endre visningen fra påloggingsskjermen til velkomstskjermen, kan du bare skjule innlogging lag og slå på synligheten til welcomeScreen lag. Følgende kodestykke viser deg hvordan du gjør det inne i klikk handler av submitButton:
javascript submitButton.on ("klikk", funksjon () loginScreen.visible = false; welcomeScreen.visible = true;);
Gå tilbake til nettleseren og oppdatere siden for å se din mock-up som er mer fornuftig nå. Husk at nettleseren du bruker for å vise mock-up, bør være WebKit-basert, for eksempel Chrome eller Safari.
Hvis du ikke liker øyeblikkelig bryter, kan du animere overgangen ved å bruke animere Funksjon å animere, for eksempel, opasitet av lagene.
"javascript submitButton.on (" klikk ", funksjon ()
welcomeScreen.opacity = 0; welcomeScreen.visible = true; // welcomeScreen er fortsatt usynlig // fordi dens opasitet er null loginScreen.animate (egenskaper: opacity: 0); welcomeScreen.animate (egenskaper: opacity: 1, time: 2 // Animasjonens varighet er 2 sekunder); );"
Slik ser overgangen nå ut:
Framer gir deg mulighet til å bruke en rekke bildeeffekter, for eksempel gaussisk uskarphet, nyanse rotasjon, lysstyrke / kontrastjustering, farge inversjon, sepia tone tillegg og mer til din Lag objekter.
Følgende kodestykke viser deg hvordan du bruker uklarhet effekt for å skape en sløret bakgrunn:
"javascript // Lag et bakgrunnslag var bg = ny BackgroundLayer (image:" bg.jpg ");
bg.blur = 5; // Sett Gaussisk uskarphet til 5 piksler "
Slik ser resultatet ut:
Resten av effektene brukes på en lignende måte. For eksempel, for å redusere kontrast av bg lag, må du endre kontrast eiendom:
javascript bg.contrast = 50;
For å lage et lag som kan rulles, må du legge det inn i innholdslaget av a ScrollComponent gjenstand. Opprette en ScrollComponent ligner på å skape en Lag gjenstand:
javascript var scroll1 = ny ScrollComponent (bredde: Screen.width, height: Screen.height,);
Følgende kodeblokk viser deg hvordan du legger inn en Lag objekt innenfor innhold av scroll1:
javascript var layer3 = nytt lag (bredde: 2000, høyde: 2000, bilde: "pattern.jpg", superLayer: scroll1.content // Legge inne innholdet i scroll1);
Her er hva a ScrollComponent ser ut som i aksjon:
Merk at rulling bare er mulig hvis dimensjonene til laget er større enn dimensjonene til ScrollComponent den er innebygd i.
Noen ganger, i stedet for kontinuerlig rulling, vil du kanskje presentere dataene dine som et sett med sider. For eksempel vil du kanskje opprette et grensesnitt hvor en bruker sveiper gjennom et sett med bilder. Dette kan gjøres ved å bruke en PageComponent. De PageComponent klassen er avledet fra ScrollComponent klasse og har en identisk konstruktør.
For å legge til en Lag til en PageComponent, du må bruke addPage funksjon. Følgende kode viser hvordan du lager en PageComponent og legg til noen bildelag til det:
"javascript // Opprett en PageComponent som fyller skjermvaren sideComponent = ny PageComponent (bredde: Screen.width, height: Screen.height);
// Lag tre bilder lag var image1 = nytt lag (bredde: Screen.width, høyde: Screen.height, image: "pink.jpg");
var image2 = nytt lag (bredde: skjermbredde, høyde: skjerm.høyde, bilde: "grey.jpg");
var image3 = nytt lag (bredde: skjermbredde, høyde: skjerm.høyde, bilde: "blue.jpg");
// Legg alle bildelagene til sideKomponent sideComponent.addPage (image1); pageComponent.addPage (image2); pageComponent.addPage (image3);"
Resultatet ser slik ut:
Du vet allerede at du kan bruke animere funksjon for å animere egenskapene til a Lag gjenstand. Men ringer animere starter animasjonen umiddelbart. Hvis du vil ha kontroll over når en animasjon starter eller stopper, kan du bruke animasjon objekter i stedet.
Slik lager du en animasjon gjenstand:
"javascript var animation1 = ny animasjon (layer: mylayer, // navnet på laget som skal // være animert
// Egenskaper som skal endre egenskaper: x: 400); "
Du kan da bruke det intuitivt navngitte start, Stoppe, og omvendt Funksjoner for å administrere animasjonen. For eksempel, for å starte animasjonen påkalle start funksjon:
javascript animation1.start ();
Du kan også legge til hendelsesbehandlere til animasjon objekter, ved hjelp av på funksjon. Denne funksjonen kan brukes til å lage kjedede animasjoner. For eksempel, her er en kodebit som reverserer animation1 når animasjonen avsluttes:
"javascript animation1.on (Events.AnimationEnd, function ()
// Opprett en omvendt kopi av animasjon1 og spill den animasjon1.reverse (). Start (); );"
Animasjonen ser slik ut:
Alle eksemplene jeg viste deg til nå gjengitt den mobile enheten i stående orientering. Hvis du vil bruke liggende orientering, må du tildele verdien 90 til orientering eiendom av DeviceComponent.
javascript device.orientation = 90;
I nettleseren vil enheten nå se slik ut:
For å animere endringen i orientering, bruker du setOrientation metode, passerer inn ekte som sin andre parameter.
javascript device.setOrientation (90, true);
I denne opplæringen lærte du hvordan du skal bruke Framers mer avanserte funksjoner, for eksempel nestede eller innebygde lag, lageffekter, rullebeholdere og animasjonshendelser. Med litt kreativitet og innsats kan du nå lage fantastiske prototyper ved hjelp av Framer-rammeverket. Her er noen flotte mock-ups for å inspirere deg.
Se Framers dokumentasjon for å lære mer om dette kraftige prototypingsrammeverket.
Accentsconagua