Animert Komponenter med UIKit Dynamics: Part 1

Animated Komponenter med UIKit Dynamics: Del 1
22
Del
Del
Del

Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Innledning

I denne opplæringen jeg skal vise deg en splitter ny tillegg til iOS SDK som ble introdusert i iOS 7, UIKit Dynamics og jeg ll vise deg hvordan det kan brukes til å skape attraktive, iøynefallende animasjonseffekter.

Formålet med grensesnittet er å tillate utviklere å legge realisme til sine programmer på en enkel og grei måte. I denne opplæringen, vil vi se en rekke eksempler som illustrerer dette.

I den første delen av denne opplæringen, vil jeg vise hvordan å lage en animert meny og i den andre delen vil vi fokusere på å skape en tilpasset animerte varsling visning. Vi vil skape menyen og en våken utsikt som frittstående komponenter for å maksimere gjenbruk.

1. UIKit Dynamics Essentials

Før vi begynner å skrive kode, er det nødvendig å ta en titt på det vesentlige av de UIKit Dynamics. UIKit Dynamics er en del av UIKit rammeverk, noe som betyr at du ikke trenger å legge til noen ekstra rammer til dine prosjekter til å bruke den.

Det gir utviklere med et grensesnitt for å legge realistiske effekter til visningen lag søknader dine. Det er viktig å nevne at UIKit Dynamics gjør bruk av en fysikkmotor for å gjøre sitt arbeid. Dette tillater utviklere å fokusere på funksjonalitet de ønsker å legge til deres søknad i stedet for gjennomføringen. En grunnleggende forståelse av matematikk og fysikk er alt du trenger for å komme i gang med UIKit Dynamics.

Den viktigste komponenten i UIKit Dynamics grensesnitt er den UIDynamicAnimator klassen, som også er kjent som dynamisk animatør
. Denne klassen er ansvarlig for å utføre animasjoner ved hjelp av en fysikkmotor under panseret. Selv om den dynamiske animatør er hjertet av UIKit Dynamics grensesnitt, kan den ikke brukes på egen hånd.

For å kunne arbeide, bestemte atferd
må legges til den dynamiske animatør. Disse atferd er en samling av fysikk krefter som definerer animasjon som resulterer fra å legge til ett eller flere atferd. Programmatisk sett, disse dynamiske atferd er klasser av UIKit Dynamics grensesnitt og hver opptreden har spesielle egenskaper som kan endres for å påvirke animasjonen.

Basen klassen av disse atferd er UIDynamicBehavior klasse. Selv om du er fri til å lage dine egne oppførsel, kommer UIKit Dynamics med en rekke enkle å bruke underklasser som etterligner vanlige atferd, for eksempel gravitasjon og kollisjoner

UIGravityBehavior. Dette UIDynamicBehavior underklasse legger tyngdekraften til et element. Som et resultat, beveger elementet til en viss retning definert av gravitasjons oppførsel

UICollisionBehavior. Denne klassen definerer hvordan to elementer kolliderer med hverandre, eller hvor et element støter sammen med en forhåndsdefinert grense, synlig eller usynlig <. br>
UIPushBehavior: Som navnet indikerer, gir denne atferden et element et push, det akselererer elementet. Push kan være kontinuerlig
eller momentant
. En kontinuerlig trykk oppførsel gjelder gradvis kraften av push mens en øyeblikkelig presse oppførsel gjelder styrken øyeblikket atferden blir lagt

UISnapBehavior. En snap atferd definerer hvordan et element snaps til en annen vare eller et punkt i rommet . Snap oppførsel er passelig på flere måter. For eksempel kan elementet enten festes til et punkt uten bounciness eller jiggle for en liten stund før du kommer til å stoppe opp

UIAttachmentBehavior. Et vedlegg oppførsel definerer hvordan to dynamiske elementer er koblet til hverandre eller hvordan en dynamiske elementet er koblet til et forankringspunkt.

Dette er de viktigste dynamiske atferd i dag levert av UIKit Dynamics grensesnittet. For at disse atferd å gjøre sitt arbeid, de trenger å bli initialisert, konfigurert, og lagt til en dynamisk animatør
objekt, som vi dekket tidligere.

Kombinere atferd er mulig så lenge de ikke forårsake noen konflikter. Vær også oppmerksom på at noen atferd kan kun påføres når den dynamiske animatør objektet. For eksempel vil legge til to forekomster av UIGravityBehavior klassen til den dynamiske animatør resultere i et unntak.

Den atferd brukes alltid til dynamiske elementer. En dynamisk element er et objekt som er i samsvar med UIDynamicItem protokollen. Det som er bra er at UIView og UICollectionViewLayoutAttributes klasser allerede er i samsvar med denne protokollen. Dette betyr at hver visning i programmet kan utnytte UIKit Dynamics.

Det er ett mer UIDynamicBehavior underklasse som er verdt å nevne, UIDynamicItemBehavior. I stedet for å definere en bestemt atferd, og tilbyr en base dynamisk animasjon konfigurasjon som kan brukes til dynamiske elementer. Den har en rekke egenskaper til å definere atferden:

elastisitet: Denne egenskapen definerer elastisiteten i en kollisjon mellom dynamiske elementer eller en dynamisk element og en grense. Verdien varierer fra 0.0 til 1.0 med sistnevnte er en meget elastisk kollisjon

tetthet. Denne egenskapen definerer massen av et dynamisk element med en høy verdi som resulterer i en tung gjenstand. Dette kan være nyttig hvis du ikke ønsker et dynamisk element som skal flyttes når et annet element kolliderer med det

motstand. Eiendommen navn taler for seg selv. Egenskapen definerer hastigheten demping av et dynamisk element

angularResistance.: Denne er lik den motstand egenskapen, men angularResistance egenskapen definerer vinkelhastighet dempe

friksjon. Denne egenskapen definerer friksjon eller motstand av to dynamiske elementer som glir mot hverandre

allowsRotation:.. Dette man bare spesifiserer om et dynamisk element er lov til å rotere eller ikke

Kombinere dynamiske atferd kan gi spektakulære resultater. I denne opplæringen, vil vi bruke det meste av atferd som er nevnt ovenfor.

Jeg oppfordrer deg til å besøke Apples offisielle dokumentasjon og lese mer om de viktigste klasser av UIKit Dynamics. Også, etter å ha avsluttet denne opplæringen, er det nyttig å leke seg med resultatet for å få en bedre forståelse av begrepene og de ulike atferd definert av UIKit Dynamics.

2. Søknad Oversikt

Jeg har allerede nevnt i innledningen at vi kommer til å lage to gjenbrukbare komponenter som vil utnytte UIKit Dynamics. I denne opplæringen, vil vi lage en tilpasset animert meny. Ta en titt på det endelige resultatet nedenfor.

Denne komponenten er en UIView objekt som glir inn og ut av skjermen. For å gjøre menyen dukker opp og forsvinner, er en enkel swipe gest brukt. Elementene i menyen er oppført i en vanlig tabellvisning. Animasjonen du ser i skjermbildet over oppnås ved å kombinere en rekke dynamiske atferd.

3. Opprette prosjekt

Start med å lansere Xcode og opprette et nytt prosjekt. Velg Enkel visning Application mal i programkategori av iOS delen. Klikk Neste
å fortsette.

Navn prosjektet DynamicsDemo og sørg for at enheter er satt til iPhone. For denne opplæringen, har jeg forlatt Class Prefix
feltet stå tomt, men gjerne legge inn din egen klasse prefiks. Klikk Neste
, forteller Xcode hvor du ønsker å lagre prosjektet, og trykk på Opprett
.

Last ned kildefilene for denne opplæringen og legge bildene fra Xcode prosjekt til prosjekt i Images.xcassets
mappe i Prosjekt Navigator

( Bilde Copyright: icons8).
< h2> 4. Forstå Meny

Før vi begynner å implementere menyen komponent, er det viktig å ta en nærmere titt på hvordan det skal fungere. Som jeg allerede har nevnt, bør menyen vise seg ved å skyve til syne fra høyre til venstre og skjule seg ved å skyve ut av syne fra venstre til høyre.

Vise og skjule den menyen er utløst av en swipe gest. UIKit Dynamics vil være ansvarlig for oppførselen eller animasjon av menyen. Atferd vi vil bruke er:

Gravity atferd: Alvoret oppførsel vil gjøre menyen skritt i riktig retning, til venstre eller høyre. Uten alvoret oppførsel, vil menyen ikke gjøre mye

Kollisjon oppførsel. Kollisjonen oppførsel er like viktig. Uten den, ville menyen ikke slutte å bevege seg når tyngdekraften ble brukt til det. En usynlig grense vil utløse en kollisjon og gjøre menyen stopp der vi vil at den skal stoppe

Trykk atferd. Selv om gravitasjon og kollisjons atferd kan animere menyen inn og ut, vil vi gi det en ekstra push eller akselerasjon ved hjelp av en push atferd. Dette vil gjøre animasjonen kjappere

Dynamisk element atferd. Vi vil også legge til et dynamisk element atferd for å definere elastisitet av menyen. Dette vil resultere i en bouncy kollisjon.

I stedet for å opprette forekomster ovenfor atferd hver gang de trenger for å tre i kraft, vil vi initial dem en gang. Vi bruker og konfigurere atferd når vi trenger dem, som vil avhenge av plasseringen av menyen og retningen det er behov for å bevege seg i.

5. Egenskaper, strukturer og initialisering

Trinn 1: Opprette Class

La oss begynne med å legge en ny klasse til prosjektet. Trykk Kommando-N
velger Objective-C klasse fra listen over maler i iOS > Cocoa Touch
delen. Klikk Neste
å fortsette.

navn den nye klassen MenuComponent og sørge for at klassen arver fra
NSObject. Klikk Neste
, forteller Xcode hvor du vil lagre class filer, og trykk på Opprett

Trinn 2:. Erklærte Properties

Åpne MenuComponent.h Hotell og definere en opplisting som vil representere menyen retning. Retningen kan stå mot høyre eller høyre mot venstre. Legg inn følgende kode under import uttalelse
typedef enum MenuDirectionOptionTypes {menuDirectionLeftToRight, menuDirectionRightToLeft} MenuDirectionOptions;
Åpne MenuComponent.m
, legge en klasse forlengelse, og erklærer følgende egenskaper:.
interface MenuComponent () @ eiendom (nonatomic, sterk) UIView * menuView;property (nonatomic, sterk) UIView * backgroundView;property (nonatomic, sterk) UIView * targetView;property (nonatomic, sterk) UITableView * optionsTableView; property (nonatomic, sterk) NSArray * menuOptions;property (nonatomic, sterk) NSArray * menuOptionImages;property (nonatomic, sterk) UIDynamicAnimator * animatør,property (nonatomic) MenuDirectionOptions menuDirection;property (nonatomic) CGRect menuFrame; @ Eiendommen (nonatomic) CGRect menuInitialFrame;property (nonatomic) BOOL isMenuShown;end

menuView: Dette er utsikten objekt av menyen som vil bli animert inn og ut av syne. Tabellvisningen vil være en subview av dette synet

backgroundView:.. Bakgrunnen syn er en semi-transparent visning som vil hindre brukeren i å peke på noe, men menyvisningen

targetView: Denne er The Super som meny og bakgrunns synspunkter vil bli lagt

optionsTableView. Dette er tabellvisningen som vil liste menyalternativene

menuOptions. Denne rekken vil inneholde menyalternativene som visningen tabellen vil vise

menuOptionImages. Denne rekken vil inneholde filnavnene på bildene som til venstre på hvert bord visning celle

animatør. Dette er UIDynamicAnimator eksempel som vil animere menyen

menuDirection:.. Denne eiendommen er av typen MenuDirectionOptions og bestemmer hvilken retning menyen vil flytte

menuFrame. Dette er rammen av menyen

menuInitialFrame: Og dette er den første rammen av menyen

isMenuShown:.. Et flagg som indikerer om menyen vises eller ikke

I tillegg til disse private eiendommer, vi også trenger å erklære noen offentlige eiendommer. Revidere MenuComponent.h Hotell og legge inn følgende kode:
interface MenuComponent: NSObject @ eiendom (nonatomic, sterk) UIColor * menuBackgroundColor;property (nonatomic, sterk) NSMutableDictionary * tableSettings;property ( nonatomic) CGFloat optionCellHeight;property (nonatomic) CGFloat akselerasjon;end

menuBackgroundColor: Denne egenskapen brukes til å stille inn menyen bakgrunnsfarge

tableSettings: Dette er ordlisten jeg nevnte i. forrige avsnitt. Det vil gi oss konfigurere tabellvisningen ved å sette en rekke alternativer

optionCellHeight. Dette er den eneste tabellen visning egenskap som ikke kan stilles inn med tableSettings ordbok. Den angir rad høyden på tabellen vise celler

akselerasjon. Denne egenskapen angir omfanget av push atferd, med andre ord, hvor mye kraft som påføres menyvisningen når det er rappet inn og ut av syne .

Trinn 3: Implementering av initialisering Method

I dette trinnet, erklærer vi en tilpasset initializer der satt vi:

den endelige rammen av menyvisningen, er at rammen når animasjonen er ferdig og menyen er synlig

målet visningen som menyvisningen vil bli lagt til som en subview

rekken av alternativer og bilder som vises av utsikten bordet

retning av animasjonen når menyen vises

Grensesnittet i tilpassede initializer er vist nedenfor. Legg det til felles grensesnitt for MenuComponent klasse Anmeldelser - (id) initMenuWithFrame:. (CGRect) ramme targetView: (UIView *) targetView retning: (MenuDirectionOptions) tangent alternativer: (NSArray *) alternativer optionImages: (NSArray *) optionImages;
La oss ta en titt på gjennomføringen av tilpasset initializer. Legg inn følgende kode til gjennomføringen fil av MenuComponent klassen. Gjennomføringen er ganske grei som du kan se nedenfor Anmeldelser - (id) initMenuWithFrame:. (CGRect) ramme targetView: (UIView *) targetView retning: (MenuDirectionOptions) tangent alternativer: (NSArray *) alternativer optionImages: (NSArray *) optionImages {if (selv = [super init]) {self.menuFrame = ramme; self.targetView = targetView; self.menuDirection = retning; self.menuOptions = alternativer; self.menuOptionImages = optionImages; } Returnere selv;}
6. Sette alt opp

Det finnes en rekke egenskaper som må initialisert og jeg tror det er derfor en god idé å gruppere dem sammen i et par private metoder. Naviger til klassen forlengelse av MenuComponent klassen og erklærer følgende metode:
interface MenuComponent () ...- (void) setupMenuView, - (void) setupBackgroundView, - (void) setupOptionsTableView; - (void) setInitialTableViewSettings; - (void) setupSwipeGestureRecognizer;end
setupMenuView

I setupMenuView, setter vi opp menyvisningen. Fordi menyen i utgangspunktet må være ute av skjermens synlige området, starter vi ved å beregne menyen opprinnelige rammen. Vi deretter initialmenyvisningen med sin opprinnelige ramme, setter sin bakgrunnsfarge, og legge det til som en subview til målet eller forelder visning Anmeldelser -. (Void) setupMenuView {if (self.menuDirection == menuDirectionLeftToRight) {selv. menuInitialFrame = CGRectMake (-self.menuFrame.size.width, self.menuFrame.origin.y, self.menuFrame.size.width, self.menuFrame.size.height); } Else {self.menuInitialFrame = CGRectMake (self.targetView.frame.size.width, self.menuFrame.origin.y, self.menuFrame.size.width, self.menuFrame.size.height); } Self.menuView = [[UIView alloc] initWithFrame: self.menuInitialFrame]; [self.menuView setBackgroundColor: [UIColor colorWithRed: 0.0 grønt: 0,47 blå: 0.39 alpha: 1.0]]; [self.targetView addSubview: self.menuView];}
setupBackgroundView

I setupBackgroundView, setter vi opp bakgrunnen visning. Merk at alfaverdien av bakgrunnen visningen er i utgangspunktet satt til 0,0. Vi oppdaterer denne verdien øyeblikket menyen vises Anmeldelser - (void) setupBackgroundView {self.backgroundView = [[UIView alloc] initWithFrame: self.targetView.frame].; [self.backgroundView setBackgroundColor: [UIColor grayColor]]; [self.backgroundView setAlpha: 0.0]; [self.targetView addSubview: self.backgroundView];}
setupOptionsTableView

I setupOptionsTableView, starter vi ved å initial tabellen ved å påberope initWithFrame: hvor menyvisningen størrelse brukes for tabellvisningen størrelse. Den MenuComponent eksempel er angitt som tabellvisningen datakilde og delegat Anmeldelser - (void) setupOptionsTableView {self.optionsTableView = [[UITableView alloc] initWithFrame. CGRectMake (0.0, 0.0, self.menuFrame.size.width, self. menuFrame.size.height stil): UITableViewStylePlain]; [self.optionsTableView setBackgroundColor: [UIColor clearColor]]; [self.optionsTableView setScrollEnabled: NO]; [self.optionsTableView setSeparatorStyle: UITableViewCellSeparatorStyleNone]; [self.menuView addSubview: self.optionsTableView]; [self.optionsTableView setDelegate bolig:]; [self.optionsTableView setDataSource bolig:];}
Ved å sette den MenuComponent eksempel som tabellvisningen datakilde og delegat, forteller kompilatoren oss at MenuComponent klassen ikke er i overensstemmelse med de UITableViewDataSource og UITableViewDelegate protokoller. La oss løse dette ved å oppdatere topptekstfilen av MenuComponent klassen som vist nedenfor
interface MenuComponent: NSObject < UITableViewDataSource, UITableViewDelegate >
setupInitialTableViewSettings

I setupInitialTableViewSettings, vi initial og fylle tableSettings ordbok. at vi erklærte tidligere i klassens felles grensesnitt Anmeldelser - (åpne) setInitialTableViewSettings {self.tableSettings = [[NSMutableDictionary Alloc] initWithObjectsAndKeys:. [UIFont fontWithName: @ "American Typewriter" størrelse: 15,0] @ "font", [ ,,,0],NSNumber numberWithInt: NSTextAlignmentLeft] @ "textAlignment", [UIColor whiteColor] @ "textcolor", [NSNumber numberWithInt: UITableViewCellSelectionStyleGray] @ "selectionStyle", nil];}
setupSwipGestureRecognizer

I setupSwipeGestureRecognizer, vi initial og konfigurere swipe gest gjenkjenner som brukes til å skjule menyvisningen Anmeldelser - (void) setupSwipeGestureRecognizer {UISwipeGestureRecognizer * hideMenuGesture = [[UISwipeGestureRecognizer alloc] initWithTarget: selv handling:selector (hideMenuWithGesture :)].; if (self.menuDirection == menuDirectionLeftToRight) {hideMenuGesture.direction = UISwipeGestureRecognizerDirectionLeft; } Else {hideMenuGesture.direction = UISwipeGestureRecognizerDirectionRight; } [Self.menuView addGestureRecognizer: hideMenuGesture];}
To ting er verdt å peke på. Først retning av sveip bevegelsen er avhengig av verdien av menuDirection egenskapen. Sekund, hideMenuWithGesture: er metoden en privat metode som startes hver gang gest kjenneren oppdager en swipe gest. Vi vil implementere denne metoden senere, men for å bli kvitt den kompilatoren advarsel, erklære metoden i privat klasse forlengelse av MenuComponent klassen som vist nedenfor.
interface MenuComponent () ...- (void) hideMenuWithGesture : (UISwipeGestureRecognizer *) gest;end
La oss dra nytte av det arbeidet vi gjorde ved å påberope de hjelpemetoder i initialisering metoden som vist nedenfor Anmeldelser - (id) initMenuWithFrame: (CGRect) ramme targetView :(. UIView *) targetView retning: (MenuDirectionOptions) tangent alternativer: (NSArray *) alternativer optionImages: (NSArray *) optionImages {if (selv = [super init]) {... //Setup bakgrunnen visning. [selvtillit setupBackgroundView]; //Oppsett menyvisningen. [selvtillit setupMenuView]; //Setup visningen alternativer tabellen. [selvtillit setupOptionsTableView]; //Sett de første tabellen vise innstillinger. [selvtillit setInitialTableViewSettings]; //Setup Swipe gest kjenneren. [selvtillit setupSwipeGestureRecognizer]; } Returnere selv;}
Legg merke til at bakgrunnen visningen er satt opp før menyvisningen er å sørge for at bakgrunnen visningen er plassert under menyvisningen

Til slutt initial de resterende egenskaper etter å påkalle de hjelpemetoder. som vist nedenfor Anmeldelser - (id) initMenuWithFrame:. (CGRect) ramme targetView: (UIView *) targetView retning: (MenuDirectionOptions) tangentAlternativer: (NSArray *) alternativer optionImages: (NSArray *) optionImages {if (selv = [ ,,,0],super init]) {... //Initial animatøren. self.animator = [[UIDynamicAnimator alloc] initWithReferenceView: self.targetView]; //Sette utgangshøyde for hver celle rad. self.optionCellHeight = 50,0; //Sett innledende akselerasjonsverdi (push-magnitude). self.acceleration = 15,0; //Indikerer at utgangspunktet menyen ikke vises. self.isMenuShown = NO; } Returnere selv;}
7. Dynamic Behaviors

Hver gang menyvisningen vises eller forsvinner, vi bruker de samme dynamiske atferd. Vi vil derfor bruke de dynamiske atferd. Det eneste som er forskjellig er retningen av menyen under animasjonen.

Vi kommer til å lage en metode der vi initial og bruke de nødvendige dynamiske atferd, og vi vil kalle denne metoden hver gang menyen staten må endres. Start med å oppdatere klassens privat klasse forlengelse med toggleMenu metoden
interface MenuComponent () ...- (void) toggleMenu;.end
Jeg har allerede nevnt at de dynamiske atferd som skal brukes til å animere menyen er gravitasjon, kollisjon, og push. Hver av disse atferd har en eller flere egenskaper som, når den er modifisert, bestemmer retningen på animasjonen.

Alvoret oppførsel har en retning eiendom, en CGVector struktur som angir retning av tyngdekraften. For eksempel ved å sette retning eiendommen til {1,0, 0,0} trekker alvoret oppførselen til høyre mens en verdi av {0,0, 1,0} resulterer i en kraft som trekker mot bunnen.

De kollisjon atferds verk enten mellom to dynamiske elementer eller mellom et dynamisk element og en grense. I vårt eksempel, trenger vi en usynlig grense definert av to punkter som stopper menyvisningen.

Den push oppførsel har en magnitude eiendom definerer akselerasjon anvendt på en dynamisk element. Verdien bestemmer også retningen av skyve.

I toggleMenu metoden må beregne verdiene av de ovennevnte egenskaper. Vi deretter opprette og konfigurere dynamiske atferd, og legge dem til den dynamiske animatør objektet.

Det er viktig å understreke at verdiene av isMenuShown, som indikerer om menyen som vises eller ikke, og menuDirection, angi retning av animasjon, bestemme verdiene av de nevnte egenskapene.

animator objektet har en matrise som inneholder hver dynamisk oppførsel som har blitt lagt til. Hver gang toggleMenu metoden kalles, eksisterende dynamiske atferd må fjernes ved å fjerne tabellen, fordi noen dynamiske atferd ikke kan legges to ganger til den dynamiske atferd, som for eksempel gravitasjon atferd.

La oss begynne å implementere toggleMenu metode Anmeldelser -. (void) toggleMenu {//Fjern eventuelle tidligere atferd lagt til animatør. [self.animator removeAllBehaviors]; //Følgende variabler vil definere retning av menyvisningen animasjon. //Denne variabelen viser alvoret retning. CGFloat gravityDirectionX; //Disse to punktene angir en usynlig grense der menyvisningen skal kollidere. //Grensen må alltid være på siden av tyngderetningen, slik som menyvisningen kan //slutter å bevege seg. CGPoint collisionPointFrom, collisionPointTo; //Jo høyere trykk størrelsen verdien er, desto større blir akselerasjon av menyvisningen. //Hvis denne verdien er satt til 0,0, da bare tyngdekraften vil bli brukt til //menyvisning. CGFloat pushMagnitude = self.acceleration;}
De gravityDirectionX, collisionPointFrom, collisionPointTo, og pushMagnitude variabler vil holde de verdier som vi vil tildele til de dynamiske atferd senere. La oss sette sine verdier, avhengig av menyen tilstand og animasjon retning Anmeldelser -. (Void) toggleMenu {... //Sjekk om menyen vises eller ikke. if (! self.isMenuShown) {//Hvis menyvisningen er skjult, og det er i ferd med å bli vist, og angi hver variabel //verdi avhengig av animasjon retning. if (self.menuDirection == menuDirectionLeftToRight) {//Verdien 1,0 betyr at tyngdekraften "beveger" utsikten mot høyre side. gravityDirectionX = 1,0; //Fra og Til punkter definerer en usynlig grense, der X-opprinnelsespunkt //lik den ønskede X-opprinnelse punktet at menyvisningen skal kollidere, og de //Y-opprinnelsespunkt angir den høyeste og laveste punkt grensen. //Hvis menyvisningen blir vist fra venstre til høyre, da kollisjonen grensen //bør defineres slik som å være på høyre side av den første menyvisningen posisjon. collisionPointFrom = CGPointMake (self.menuFrame.size.width, self.menuFrame.origin.y); collisionPointTo = CGPointMake (self.menuFrame.size.width, self.menuFrame.size.height); } Else {//Verdien -1,0 betyr at tyngdekraften "trekker" utsikten mot venstre side. gravityDirectionX = -1,0; //Dersom menyvisningen er vist fra høyre til venstre, og deretter kollisjonen grensen //skal defineres slik at den er til venstre for den første menyvisningen stilling. collisionPointFrom = CGPointMake (self.targetView.frame.size.width - self.menuFrame.size.width, self.menuFrame.origin.y); collisionPointTo = CGPointMake (self.targetView.frame.size.width - self.menuFrame.size.width, self.menuFrame.size.height); //Sett til pushMagnitude variabel motsatt verdi. pushMagnitude = (-1) * pushMagnitude; } //Gjør bakgrunnen view semi-transparent. [self.backgroundView setAlpha: 0,25]; } Else {//Hvis menyen er i ferd med å bli skjult, da de nøyaktige motsatte verdiene skal være //satt til alle variabler for å lykkes motsatt animasjon. if (self.menuDirection == menuDirectionLeftToRight) {gravityDirectionX = -1,0; collisionPointFrom = CGPointMake (-self.menuFrame.size.width, self.menuFrame.origin.y); collisionPointTo = CGPointMake (-self.menuFrame.size.width, self.menuFrame.size.height); //Sett til pushMagnitude variabel motsatt verdi. pushMagnitude = (-1) * pushMagnitude; } Else {gravityDirectionX = 1,0; collisionPointFrom = CGPointMake (self.targetView.frame.size.width + self.menuFrame.size.width, self.menuFrame.origin.y); collisionPointTo = CGPointMake (self.targetView.frame.size.width + self.menuFrame.size.width, self.menuFrame.size.height); } //Gjør bakgrunnen utsikten helt gjennomsiktig. [self.backgroundView setAlpha: 0.0]; }}
Den ovenfor kodebiten er ganske enkel å forstå, til tross for sin størrelse. Kommentarene i koden vil hjelpe deg å forstå hva som skjer. Legg merke til at bakgrunnen visningen alpha verdien bestemmes av om menyen er i ferd med å bli vist eller skjult.

Det er på tide å legge de dynamiske atferd. La oss starte med alvoret atferd
UIGravityBehavior * gravityBehavior = [[UIGravityBehavior alloc] initWithItems: @ [self.menuView]];. [GravityBehavior setGravityDirection: CGVectorMake (gravityDirectionX, 0,0)] [self.animator addBehavior: gravityBehavior];
Vi bruker gravityDirectionX variabel for å angi tyngdekraften er gravityDirection eiendom
UICollisionBehavior * collisionBehavior = [[UICollisionBehavior Alloc] initWithItems: @ [self.menuView]] [collisionBehavior addBoundaryWithIdentifier:. @ "collisionBoundary" fromPoint: collisionPointFrom toPoint: collisionPointTo] [self.animator addBehavior: collisionBehavior];
Du har kanskje lagt merke til at initialisering metoder for tyngdekraften og kollisjon atferd godta en matrise som inneholder de dynamiske elementer som atferden vil bli anvendt. I vårt eksempel er det bare menyvisningen.

Før vi legger push oppførselen til den dynamiske animatør, la oss først opprette en dynamisk element oppførsel
, som er, enkelt sagt, en generell Hensikten atferd som vi vil bruke for å sette elastisitet
av kollisjonen. Jo større elastisitet verdi, jo større bounciness av kollisjonen mellom utsikten og den usynlige grensen. De aksepterte verdier varierer fra 0.0 til 1.0
UIDynamicItemBehavior * itemBehavior = [[UIDynamicItemBehavior Alloc] initWithItems: @ [self.menuView]];. [ItemBehavior setElasticity: 0,35]; [self.animator addBehavior: itemBehavior];
Vi kunne ha satt mer atferd attributter bruker itemBehavior objekt, for eksempel motstand
eller friksjon
. Du kan leke seg med disse egenskapene senere hvis du ønsker

La oss nå legge push atferd som vil akselerere menyen
UIPushBehavior * pushBehavior = [[UIPushBehavior Alloc] initWithItems.:. @ [Self.menuView] modus: UIPushBehaviorModeInstantaneous] [pushBehavior setMagnitude: pushMagnitude] [self.animator addBehavior: pushBehavior];
Ved å sette modus til UIPushBehaviorModeInstantaneous kraften av push atferd er anvendt på en gang i stedet for gradvis. De dynamiske atferd har nå blitt lagt til dynamisk animatør, som betyr at det er på tide å gjøre menyvisningen dukker opp og forsvinner.

8. Vise og skjule Menu

Trinn 1: VisMeny

For å vise og skjule den menyen, må vi påkalle private toggleMenu metoden. Menyen skal vises når et sveip gest blir oppdaget av målet utsikt i retning av sveip. La oss starte med å erklære en offentlig metode som vi kan påkalle for å vise menyen. Åpne ViewController.h Hotell og erklære VisMeny metoden som vist nedenfor
interface MenuComponent. NSObject < UITableViewDataSource, UITableViewDelegate > ...- (void) VisMeny;end
Gjennomføringen er veldig enkelt, fordi alt vi gjør er påberope toggleMenu metoden. Merk at vi oppdaterer isMenuShown å gjenspeile den nye staten av menyen Anmeldelser - (void) VisMeny {if (self.isMenuShown!) {[Selv toggleMenu].; self.isMenuShown = JA; }}
Trinn 2: Viser Menu

La oss begynne å bruke MenuComponent klassen i vårt syn kontrolleren. Åpne ViewController.m Hotell og legge en import uttalelse på toppen.
#import "MenuComponent.h"
I ViewController private class forlengelse, erklærer en menuComponent egenskap av type MenuComponent for menyen.
interface ViewController ()property (nonatomic, sterk) MenuComponent * menuComponent;end
Før vi initial menyen, la oss lage gest gjenkjenner som vil oppdage swipe bevegelser til å vise og skjule den menyen. Vi gjør dette i visningen kontrollerens viewDidLoad metode Anmeldelser - (void) viewDidLoad {[super viewDidLoad].; UISwipeGestureRecognizer * showMenuGesture = [[UISwipeGestureRecognizer alloc] initWithTarget: selv handling:selector (VisMeny :)]; showMenuGesture.direction = UISwipeGestureRecognizerDirectionLeft;

Previous:Komme i gang med Auto Layout i Xcode 5

Next Page:Lar Skriv en RubyMotion App: Part 2