Share
Det nye operativsystemet for Apple Watch, watchOS 2, ble introdusert for noen uker siden på WWDC 2015. Det gir mange forbedringer, for det meste for utviklere som ønsker å lage en Apple Watch-app. Dette er de tingene jeg synes å være viktigst for utviklere:
Før vi kommer til muttere og bolter, vil jeg gjerne bruke et minutt å snakke om formålet med animasjoner på Apple Watch-apper.
Den åpenbare grunnen er at de gjør brukergrensesnittet morsommere hvis det brukes riktig. Og når det gjelder Apple Watch, det er en stor hvis. Siden de fleste app-interaksjoner bare varer i noen sekunder, vil du virkelig ikke gå over bord med animasjoner.
Den andre, og jeg tror mer viktig grunn, er at de tillater tilpassede navigasjonshierarkier i Apple Watch-apper. La oss anta at du må presentere en skjerm som brukeren kun kan gå ved å ta en bestemt handling. Normalt har Apple Watch-apper alltid en avbryt-knapp øverst til venstre når en modal-grensesnittkontroller er presentert. Med animasjoner og smart layoutmanipulering kan du lage din egen "present view controller" -rutine som viser appens innhold i fullskjerm, og avviser det ved den spesifikke handlingen. Det er en av tingene du lærer i denne opplæringen.
Før du dykker inn i denne opplæringen, bør du ha grunnleggende kunnskap om hvordan layoutsystemet fungerer på WatchKit. Selv om du er en erfaren iOS-utvikler, er gruppebasert layout i WatchKit svært forskjellig enn det du pleier å bruke på iOS. Du må tenke på oppsettet på en helt annen måte. Men når du blir vant til det, vil du kunne lage de fleste oppsett uten mye innsats.
Hvis du er ny på layout på WatchKit, er det en flott opplæring på Tuts + av min venn Patrick Balestra, Forstå WatchKit Layout-systemet. Ved hjelp av et eksempel-app forklarer han alt du trenger å vite for å få fart.
Det er også mange WWDC økter som berører dette emnet. Økten som jeg anbefaler mest, og som dekker WatchKit-animasjoner, er dette tittelen Layout and Animation Techniques for WatchKit.
Prinsippet om animasjoner på watchOS 2 er enkelt, du setter en eller flere av de animerte egenskapene inne i en animasjonsblokk. Følgende eksempel illustrerer hvordan dette virker.
[self animatedWithDuration: 0.5 animasjoner: ^ [self.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentRight]; ];
Denne metoden forårsaker circleGroup å bli justert til høyre, med en animasjon med en varighet på 0,5 sekunder. Som du kan se, ringer vi animateWithDuration: animasjoner: på selv-, som er en forekomst av WKInterfaceController. Dette er forskjellig fra iOS der animasjonsmetodene er klassemetoder på UIView.
Underlisten viser hvilke egenskaper som kan animeres:
Husk at det fortsatt ikke er mulig på watchOS 2 å opprette brukergrensesnittelementer ved kjøring. Men siden du kan gjemme dem eller sette deres alfa til 0 i storyboardet, bør dette ikke være så stort av et problem.
Det er det. Bevæpnet med din kunnskap om WatchKit-layoutsystemet, er du nå klar til å begynne å jobbe med innfødte animasjoner på watchOS. La oss begynne med å lage en prøveapp, så jeg kan vise deg et par eksempler på hvordan alt dette passer sammen.
Vi skal lage en enkel watchOS 2 app som vil introdusere et par av disse animasjonskonseptene. Det er på ingen måte å prøve å gi en fullstendig oversikt over alle de mulighetene som er mulige. I stedet viser den grunnleggende ideen, som forhåpentligvis gir deg mulighet til å finne løsninger på hva du trenger.
På tidspunktet for skriving er Xcode 7 fortsatt i beta. For å opprette en watchOS 2 app må du bruke Xcode 7 så det er det jeg skal bruke.
Åpen Interface.storyboard i WatchApp gruppe som vist nedenfor.
Legg til en gruppe i grensesnittet ved å dra det fra Objektbibliotek til høyre. I Attributtsinspektør til høyre, endre oppsettet til vertikal og sett høyden til I forhold til container.
Legg til en annen gruppe i gruppen vi nettopp har lagt til. I Attributtsinspektør, sett sin vertikale posisjon til Bunn.
Legg til fire knapper til den andre gruppen. For hver knapp, sett Størrelse til I forhold til container med en verdi på 0.25. Sett knappene på knappene til ←, →, ↑ og ↓. Etter dette trinnet bør brukergrensesnittet se slik ut:
For å fullføre den første delen av brukergrensesnittet, legg til en gruppe til hovedgruppen og konfigurer den som følger:
Følgende skjermbilde viser deg hvordan sirkelen skal konfigureres.
I Prosjektnavigator, utvide WatchApp Extension gruppe og velg InterfaceController.m. Erstatt implementeringen av InterfaceController klasse med følgende:
#import "InterfaceController.h" @interface InterfaceController () @property (ikkeatomisk, svak) IBOutlet WKInterfaceGroup * circleGroup; @end @implementation InterfaceController // Sirkelretningsknapper - (IBAction) leftButtonPressed [self animatedWithDuration: 0.5 animasjoner: ^ [self.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentLeft]; ]; - (IBAction) rightButtonPressed [self animatedWithDuration: 0.5 animasjoner: ^ [self.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentRight]; ]; - (IBAction) upButtonPressed [self animatedWithDuration: 0.5 animasjoner: ^ [self.circleGroup setVerticalAlignment: WKInterfaceObjectVerticalAlignmentTop]; ]; - (IBAction) downButtonPressed [self animatedWithDuration: 0.5 animasjoner: ^ [self.circleGroup setVerticalAlignment: WKInterfaceObjectVerticalAlignmentBottom]; ]; @slutt
Disse handlingene vil flytte den røde sirkelen i en bestemt retning. Og som du kan se, oppnår vi det ved å sette inn vertikal og / eller horisontal justering i en animasjonsblokk.
Åpen Interface.storyboard og koble uttakene som vist nedenfor.
Det burde gjøre det. Kjør prosjektet, og hvis du har fulgt trinnene ovenfor, bør du kunne flytte den røde sirkelen rundt skjermen ved hjelp av piltastene.
I den andre delen av denne opplæringen lager vi en push animasjon. Siden de fleste trinnene er like, vil jeg bevege meg litt raskere denne gangen.
Åpen InterfaceController.m og opprett et nytt uttak, firstScreenGroup, av type WKInterfaceGroup i klassen forlengelse av InterfaceController klasse.
@interface InterfaceController () @property (ikkeatomisk, svak) IBOutlet WKInterfaceGroup * circleGroup; @property (nonatomic, weak) IBOutlet WKInterfaceGroup * firstScreenGroup; @slutt
Deretter implementerer du følgende handlinger i InterfaceController klasse.
- (IBAction) pushButtonPressed [self animatedWithDuration: 0.1 animasjoner: ^ [self.firstScreenGroup setAlpha: 0]; ]; [self animatedWithDuration: 0.3 animasjoner: ^ [self.firstScreenGroup setWidth: 0]; ]; - (IBAction) popButtonPressed [self animatedWithDuration: 0.3 animasjoner: ^ [self.firstScreenGroup setRelativeWidth: 1 withAdjustment: 0]; ]; dispatch_after (dispatch_time (DISPATCH_TIME_NOW, (int64_t) (0.2 * NSEC_PER_SEC)), dispatch_get_main_queue (), ^ [self animatedWithDuration: 0.1 animasjoner: ^ self.firstScreenGroup setAlpha: 1];];);
I pushButtonPressed, vi krymper den første skjermgruppen (vi vil lage den i neste trinn) og i popButtonPressed vi utvider den gruppen igjen. Vi animerer også alfaen i den første skjermgruppen for å gjøre animasjonen litt mer tiltalende.
Åpen Interface.storyboard og legg til en ny gruppe i brukergrensesnittet. Sett gruppen som allerede var der, den som inneholder Sirkel og gruppen med knapper, inne i den nye gruppen. Sett sin Oppsett til Horisontal og gi nytt navn til den innebygde gruppen til Første skjerm. Dette vil komme til nytte senere. Resultatet skal se slik ut:
Deretter legger du til en annen gruppe som vil være på samme nivå som Første skjerm gruppe. Sett sin Oppsett til vertikal. Legg til et bilde og en knapp til gruppen. Du kan legge til bokstavelig talt et bilde, bare sørg for at du legger noe der, da ellers ville animasjonen se litt tørr ut. Sett tittelen på knappen til "< Pop". Connect the button to the popButtonPressed handling vi opprettet tidligere. Brukergrensesnittet bør nå se slik ut:
Legg til en knapp til Første skjerm gruppe. Sett tittelen til "Push" og dens vertikale posisjon til Bunn. Koble til knappen til pushButtonPressed handling. Brukergrensesnittet bør nå se slik ut:
Det er en ting vi må gjøre, koble til firstScreenGroup uttak til gruppen vi heter Første skjerm.
Når du bygger og kjører appen, bør du kunne presentere den andre skjermen ved å trykke på knappen med tittelen "Push>" nederst. Du kan avvise den andre skjermen ved å trykke på knappen med tittelen "< Pop". It should look like this:
I denne opplæringen har vi tatt en titt på innfødte animasjoner på watchOS 2. Jeg håper det har gitt deg en smak av hva du kan oppnå med animasjoner på watchOS. Hvis du har spørsmål, kan du legge inn en kommentar nedenfor eller kontakte meg på Twitter.
Accentsconagua