Åpne Interface.storyboard i den WatchApp gruppe som vist nedenfor.

Legg en gruppe til grensesnittet ved å dra det fra objektbiblioteket til høyre. I attributter Inspektør på høyre, endre layout til Vertikal Hotell og sette høyden til I forhold til Container
.

Legg en annen gruppe til gruppe vi nettopp lagt. I attributter Inspector
, setter sin vertikale stilling til Bottom
.

Legg fire knappene til den andre gruppen. For hver knapp, satt Size å Relativt Container med en verdi på 0,25. Still titlene på knappene for å ←, →, ↑, og ↓. Etter dette trinnet, bør brukergrensesnittet ser slik ut:

For å fullføre den første delen av brukergrensesnittet, legge til én gruppe til hovedgruppen og konfigurere den som følger :

For klarhet, sette navn til Circle ved å endre sitt navn i dokument Outline på venstre

Sett farge til rød
Sett radius på 20 poeng.

Sett sin størrelse, bredde og høyde, til 40 poeng.

Følgende skjermbilde viser deg hvordan sirkelen bør konfigureres.

Trinn 4: Legg Animasjoner

Prosjekt navigator
, utvide WatchApp Extension
gruppen, og velg InterfaceController.m
. Bytt gjennomføringen av InterfaceController klassen med følgende:
#import "InterfaceController.h"@interface InterfaceController () @ eiendom (nonatomic, svak) IBOutlet WKInterfaceGroup * circleGroup; @ enden @ implementering InterfaceController //Circle Direction buttons- ( IBAction) leftButtonPressed {[selv animateWithDuration: 0,5 animasjoner: ^ {[self.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentLeft]; }];} - (IBAction) rightButtonPressed {[selv animateWithDuration: 0,5 animasjoner: ^ {[self.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentRight]; }];} - (IBAction) upButtonPressed {[selv animateWithDuration: 0,5 animasjoner: ^ {[self.circleGroup setVerticalAlignment: WKInterfaceObjectVerticalAlignmentTop]; }];} - (IBAction) downButtonPressed {[selv animateWithDuration: 0,5 animasjoner: ^ {[self.circleGroup setVerticalAlignment: WKInterfaceObjectVerticalAlignmentBottom]; }];} @ slutten

Disse handlingene vil flytte den røde sirkelen i en bestemt retning. Og som du ser, vi oppnå det ved innstillinger sin vertikale og /eller horisontale justeringen inne en animasjon blokk

Trinn 5:. Koble Outlets

Åpne Interface.storyboard Hotell og koble uttakene som vist nedenfor.

Det burde gjøre det. Kjør prosjektet, og hvis du har fulgt trinnene ovenfor, bør du være i stand til å flytte den røde sirkelen rundt på skjermen ved hjelp av piltastene.

5. Mer komplekse animasjoner

I den andre delen av denne opplæringen, vil vi lage en push animasjon. Siden de fleste av trinnene involvert er like, vil jeg flytte litt raskere denne gangen

Trinn 1:. Opprett Animasjon

Åpne InterfaceController.m og opprette et nytt utløp, firstScreenGroup, av type WKInterfaceGroup i klassen forlengelse av InterfaceController klassen
interface InterfaceController () @ eiendom (nonatomic, svak) IBOutlet WKInterfaceGroup * circleGroup;.property (nonatomic, svak) IBOutlet WKInterfaceGroup * firstScreenGroup;end

Deretter implementere Følgende handlinger i InterfaceController klassen Anmeldelser - (IBAction) pushButtonPressed {[selv animateWithDuration: 0,1 animasjoner: ^ {[self.firstScreenGroup setAlpha:. 0]; }]; [selvtillit animateWithDuration: 0.3 animasjoner: ^ {[self.firstScreenGroup setWidth: 0]; }];} - (IBAction) popButtonPressed {[selv animateWithDuration: 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 () ^ {[selv animateWithDuration: 0,1 animasjoner: ^ {[self.firstScreenGroup setAlpha: 1];}];});}

I pushButtonPressed, vi krympe det første skjermbildet gruppe (vi vil lage det i neste trinn) og i popButtonPressed vi utvide denne gruppen på nytt. Vi er også animere alpha av den første skjermen gruppen for å gjøre animasjonen litt mer tiltalende

Trinn 2:. Forleng brukergrensesnitt

Åpne Interface.storyboard og legge til en ny gruppe til brukergrensesnittet. Sett den gruppen som allerede var der, den ene inneholder Circle og gruppen med knapper, inne som ny gruppe. Sette sitt Layout til horisontal og endre navn på inneholdt gruppen til Første skjermen
. Dette vil komme godt med senere. Resultatet skal se slik ut:

Deretter legger du til en annen gruppe som vil være på samme nivå som Første skjermbilde
gruppe. Sette sitt Layout til Vertikal
. Legg et bilde og en knapp til gruppen. Du kan legge til bokstavelig talt et bilde, bare sørg for at du legger noe der fordi ellers animasjonen ville se noe tørr. Still tittelen på knappen for å "< Pop". Koble knappen til popButtonPressed handlingen vi opprettet tidligere. Brukergrensesnittet skal nå se slik ut:

Legg til en knapp på Første skjermbilde
gruppe. Satt sin tittel til "Push >" og vertikal posisjon til Bottom
. Koble på knappen til pushButtonPressed handling. Brukergrensesnittet skal nå se slik ut:.

Det er en ting vi må gjøre, kobler firstScreenGroup uttaket til gruppen vi heter First skjermen

Trinn 3: Bygg og Kjør

Når du bygge og kjøre app, bør du være i stand til å presentere den andre skjermen ved å trykke på knappen med tittelen "Push >" på bunnen. Du kan avvise den andre skjermen ved å trykke på knappen med tittelen "< Pop". Det skal se slik ut:

Konklusjon

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 kan kontakte meg på Twitter.