Share
Denne opplæringen vil lære deg hvordan du bygger en glidende meny som ligner den som er omtalt i Facebook-programmet ved hjelp av Titanium Mobile.
Skyvemenyen består av et vindu i full størrelse (hovedvinduet) på toppen av en mindre som inneholder en tabellvisning (menyen). For å opprette glidende effekt må vi utløse en animasjon som vil spore og følge en berøringshendelse horisontalt. Men la oss lagre det til senere. For nå begynner vi å sette opp vinduene.
Først skal vi opprette menyen:
//// ---- Menyvindu, plassert til venstre var menuWindow = Ti.UI.createWindow (topp: 0, venstre: 0, bredde: 150); menuWindow.open (); //// ---- Meny Tabell // Meny Titler var menyTitler = [tittel: 'Meny 1', tittel: 'Meny 2', tittel: 'Meny 3', tittel: 'Meny 4 ', tittel:' Meny 5 ', tittel:' Meny 6 ']; // Tableview var tableView = Ti.UI.createTableView (data: menuTitles); menuWindow.add (Tableview);
Dette er en veldig grunnleggende tabellvisning, men det vil gjøre det. Så du burde nå ha noe som følger:
Nå trenger vi et vindu med navigasjonsfelt og en knapp i den som lar oss åpne menyen med en animasjon. Så, for å oppnå dette, trenger vi faktisk to vinduer: en som inneholder en navigasjonsgruppe (uunnværlig for å ha en navigeringslinje) og en annen som er i navigasjonsgruppen:
//// ---- Vindu med navigasjonsgruppen var navWindow = Ti.UI.createWindow (bredde: 320 // Angi bredden på skyvevinduet for å unngå å kutte ut fra animasjon); navWindow.open (); // Hovedvinduet var vinne = Ti.UI.createWindow (tittel: 'Hovedvindu', backgroundColor: '# 28292c', barColor: '# 28292c'); // NavigationGroup var navGroup = Ti.UI.iPhone.createNavigationGroup (vindu: seier); navWindow.add (navGroup); // Topp venstre knapp var menyButton = Ti.UI.createButton (tittel: 'Meny', veksle: false // Egendefinert egenskap for meny veksle); win.setLeftNavButton (menuButton);
Hei, du har sikkert lagt merke til det veksle: true eiendom i vår knapp, ikke sant? Det eksisterer ikke egentlig; Det er en egendefinert egenskap som jeg har lagt til. Du kan ganske mye nevne det, men du vil eller til og med lage en variabel for det (som var toggle = true;) hvis det gjør at du føler deg mer komfortabel. Imidlertid anbefaler jeg at du bruker dette lille trikset fordi det er veldig praktisk når du har mange egendefinerte egenskaper i appen din.
Her er vårt hovedvindu:
Ok, nå skal vi animere vinduet vårt slik at det glir fra venstre til høyre når vi trykker på "Meny" -knappen.
La oss se hvordan det fungerer:
Accentsconagua
menyenButton.addEventListener ('klikk', funksjon (e) // Hvis menyen åpnes hvis (e.source.toggle == true) navWindow.animate (left: 0, duration: 400, curve: Ti.UI .ANIMATION_CURVE_EASE_IN_OUT); e.source.toggle = false; // Hvis menyen ikke åpnes ellers navWindow.animate (venstre: 150, varighet: 400, kurve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT); e. source.toggle = true;); Du ser at når vi klikker på knappen, ringer vi Funksjonen (e), hvor e er vårt objekt (knappen). Ved å ringe e.source.toggle, vi sjekker den egendefinerte "bytte" eiendommen som er diskutert ovenfor (du kan også bruke menuButton.toggle, det er det samme). Hvis det er falsk, Vi flytter vinduet til høyre og bytter eiendommen til ekte. Så, selvfølgelig, hvis det er ekte, Vinduet går tilbake til normalt og vår eiendom er da satt til falsk en gang til.
De kurve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT er bare en måte å jevne animasjonen på.
Ja, dette ser ganske pent ut, ikke sant? Men det var den enkle delen, for nå blir vi seriøse! Vi sporer en berøringshendelse slik at vi kan avdekke menyen ved å flytte hovedvinduet horisontalt. Men før det legger vi til noen egendefinerte egenskaper:
// Hovedvindu var win = Ti.UI.createWindow (tittel: 'Hovedvindu', backgroundColor: '# 28292c', barColor: '# 28292c', flytting: false, // Tilpasset egenskap for bevegelsesakse: 0 // Egendefinert egenskap for X-aksen);
Igjen kan du nevne disse egenskapene du vil, eller du kan til og med skape dedikerte variabler for dem, men jeg anbefaler på det sterkeste at du bruker denne metoden fordi den sparer minne og det er lettere å lese enn en rekke variabler spredt over din fine fil.
Nå skal vi bruke touchstart hendelse for å få posisjonen til fingeren når den berører skjermen:
win.addEventListener ('touchstart', funksjon (e) // Start horisontal posisjon e.source.axis = parseInt (e.x);); Her tar vi den horisontale koordinaten (e.x) av arrangementet, analyser det som et heltall, og lagre det i vår egendefinerte egenskap akser.
Deretter skal vi animere vinduet avhengig av stillingen av vår finger:
win.addEventListener ('touchmove', funksjon (e) // Subtraherer nåværende posisjon til å starte horisontal posisjon var koordinater = parseInt (tdlobalPoint.x) - e.source.axis; // Oppdage bevegelse etter et 20px skift hvis koordinater> 20 || koordinater < -20) e.source.moving = true; // Locks the window so it doesn't move further than allowed if(e.source.moving == true && coordinates <= 150 && coordinates >= 0) // Dette vil glatte animasjonen og gjøre det mindre hoppende navWindow.animate (left: coordinates, duration: 20); // Definere koordinater som endelig venstre posisjon navWindow.left = koordinater; ); For å hindre at vinduet beveger seg hver gang vi berører det, venter vi på en bevegelse over 20 piksler før animasjonen. Vi sporer vår kontaktkoordinat med e.globalPoint.x og trekke den til utgangspunktet (akser) slik at vi kan flytte vinduet. Det kan heller ikke skli utover menybredden (150 piksler) eller utover venstre side av skjermen.
Hvis du prøver å kjøre appen din, ser du at vinduet ditt forblir akkurat der du forlater det. Det er ikke det vi vil ha. Vi må omplassere den når berøringshendelsen er over, så den åpner / lukker seg avhengig av hvor den er:
win.addEventListener ('touchend', funksjon (e) // Ikke lenger flytte vinduet e.source.moving = false; hvis (navWindow.left> = 75 && navWindow.left < 150) // Repositioning the window to the right navWindow.animate( left:150, duration:300 ); menuButton.toggle = true; else // Repositioning the window to the left navWindow.animate( left:0, duration:300 ); menuButton.toggle = false; ); Når fingeren ikke lenger berører skjermen, vil touchend Hendelsen avfyres, slik at vi kan justere stillingen til vinduet vårt.
Vi er ferdige! Som du ser, brukte vi en veldig grunnleggende animasjon og matte for å oppnå en flott og profesjonell effekt. Jeg håper virkelig du likte denne opplæringen og lærte noen få nye triks!
