Share
Det nya operativsystemet för Apple Watch, watchOS 2, introducerades för några veckor sedan vid WWDC 2015. Det ger många förbättringar, främst för utvecklare som vill skapa en Apple Watch-app. Det här är de saker som jag tycker är viktigast för utvecklare:
Innan vi kommer till muttrar och bultar, skulle jag vilja spendera en minut prata om syftet med animationer på Apple Watch-appar.
Den uppenbara orsaken är att de gör användargränssnittet roligare om de används på rätt sätt. Och när det gäller Apple Watch är det en stor om. Eftersom de flesta app-interaktioner bara varar i några sekunder, vill du verkligen inte gå överbord med animeringar.
Den andra, och jag tror mer viktig anledning, är att de tillåter anpassade navigeringshierarkier i Apple Watch-appar. Låt oss anta att du måste presentera en skärm som användaren bara kan lämna genom att vidta en specifik åtgärd. Normalt har Apple Watch-apparaten alltid en avbrytningsknapp i det övre vänstra hörnet när en modal gränssnittsregulator presenteras. Med animeringar och smart layoutmanipulation kan du skapa din egen "present view controller" -rutin som visar appens innehåll i helskärm och avvisar den genom den specifika åtgärden. Det är en av de saker du lär dig i den här handledningen.
Innan du gräver i denna handledning borde du ha grundläggande kunskaper om hur layoutsystemet fungerar på WatchKit. Även om du är en erfaren iOS-utvecklare är den gruppbaserade layouten i WatchKit väldigt annorlunda än vad du är van vid iOS. Du måste tänka på layouten på ett helt annat sätt. Men när du väl är van vid det, kommer du att kunna skapa de flesta layouterna utan mycket ansträngning.
Om du är ny på layout på WatchKit finns det en bra handledning på Tuts + av min vän Patrick Balestra, Förstå WatchKit Layout-systemet. Med hjälp av ett exempelapp förklarar han allt du behöver veta för att få fart.
Det finns också många WWDC-sessioner som berör detta ämne. Den session som jag rekommenderar mest och som täcker WatchKit-animationer är det här titeln Layout and Animation Techniques for WatchKit.
Principen om animeringar på watchOS 2 är enkel, du ställer in en eller flera av de animerbara egenskaperna i ett animationsblock. Följande exempel illustrerar hur detta fungerar.
[self animatedWithDuration: 0.5 animeringar: ^ [self.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentRight]; ];
Denna metod orsakar circleGroup justeras till höger med en animering med en varaktighet på 0,5 sekunder. Som ni kan se ringer vi animateWithDuration: animationer: på själv, vilket är en förekomst av WKInterfaceController. Detta skiljer sig från iOS där animeringsmetoderna är klassmetoder på UIView.
Nedan listas vilka egenskaper som är animerbara:
Tänk på att det fortfarande inte är möjligt på watchOS 2 att skapa användargränssnittelement vid körning. Men eftersom du kan gömma dem eller sätta deras alfa till 0 i storyboardet, borde det inte vara så stort av ett problem.
Det är allt. Beväpnad med din kunskap om WatchKit-layoutsystemet, är du nu redo att börja arbeta med inbyggda animeringar på watchOS. Låt oss börja med att skapa en provapp så jag kan visa dig några exempel på hur det här passar ihop.
Vi ska skapa en enkel watchOS 2 app som introducerar ett par av dessa animeringskoncept. Det är inte på något sätt att försöka ge en fullständig översikt över alla möjliga saker. I stället visar den grundläggande idén, som förhoppningsvis kommer att göra det möjligt för dig att hitta lösningar på vad du behöver.
I skrivande stund är Xcode 7 fortfarande i beta. För att skapa en watchOS 2 app måste du använda Xcode 7 så det är vad jag ska använda.
Öppna Interface.storyboard i WatchApp grupp som visas nedan.
Lägg till en grupp i gränssnittet genom att dra det från Objektbibliotek till höger. I Attribut Inspector till höger ändra dess layout till Vertikal och ställ dess höjd till Relativt till behållaren.
Lägg till en andra grupp till gruppen vi just lagt till. I Attribut Inspector, sätt sin vertikala position till Botten.
Lägg till fyra knappar till den andra gruppen. För varje knapp, ställ in Storlek till Relativt till behållaren med ett värde av 0,25. Ställ in knapparnas titlar på ←, →, ↑ och ↓. Efter detta steg ska användargränssnittet se ut så här:
För att slutföra den första delen av användargränssnittet, lägg till en grupp till huvudgruppen och konfigurera den enligt följande:
Följande skärmdump visar hur cirkeln ska konfigureras.
I Projektnavigator, expandera WatchApp Extension grupp och välj InterfaceController.m. Byt ut genomförandet av InterfaceController klass med följande:
#import "InterfaceController.h" @interface InterfaceController () @property (nonatomic, weak) IBOutlet WKInterfaceGroup * circleGroup; @end @implementation InterfaceController // Cirkelriktningsknappar - (IBAction) leftButtonPressed [self animatedWithDuration: 0.5 animationer: ^ [self.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentLeft]; ]; - (IBAction) rightButtonPressed [self animatedWithDuration: 0.5 animeringar: ^ [self.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentRight]; ]; - (IBAction) upButtonPressed [self animatedWithDuration: 0.5 animeringar: ^ [self.circleGroup setVerticalAlignment: WKInterfaceObjectVerticalAlignmentTop]; ]; - (IBAction) downButtonPressed [self animateWithDuration: 0.5 animeringar: ^ [self.circleGroup setVerticalAlignment: WKInterfaceObjectVerticalAlignmentBottom]; ]; @slutet
Dessa åtgärder kommer att flytta den röda cirkeln i en specifik riktning. Och som du kan se gör vi det genom att ställa in sin vertikala och / eller horisontella inriktning i ett animeringsblock.
Öppna Interface.storyboard och anslut uttagen enligt nedan.
Det borde göra det. Kör projektet och om du har följt ovanstående steg borde du kunna flytta den röda cirkeln runt skärmen med pilknapparna.
I den andra delen av denna handledning skapar vi en push animation. Eftersom de flesta av stegen är liknande kommer jag att flytta lite snabbare den här gången.
Öppna InterfaceController.m och skapa ett nytt uttag, firstScreenGroup, av typ WKInterfaceGroup i klassens förlängning av InterfaceController klass.
@interface InterfaceController () @property (nonatomic, weak) IBOutlet WKInterfaceGroup * circleGroup; @property (nonatomic, weak) IBOutlet WKInterfaceGroup * firstScreenGroup; @slutet
Följ sedan följande åtgärder i InterfaceController klass.
- (IBAction) pushButtonPressed [self animateWithDuration: 0.1 animeringar: ^ [self.firstScreenGroup setAlpha: 0]; ]; [self animatedWithDuration: 0.3 animations: ^ [self.firstScreenGroup setWidth: 0]; ]; - (IBAction) popButtonPressed [self animatedWithDuration: 0.3 animeringar: ^ [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 animeringar: ^ self.firstScreenGroup setAlpha: 1];];);
I pushButtonPressed, vi krymper den första skärmgruppen (vi kommer att skapa den i nästa steg) och i popButtonPressed vi utökar den gruppen igen. Vi animerar också alfabetet från den första skärmgruppen för att göra animationen lite mer tilltalande.
Öppna Interface.storyboard och lägg till en ny grupp i användargränssnittet. Sätt den gruppen som redan var där, den som innehåller Cirkel och gruppen med knappar, inuti den nya gruppen. Ställ in dess Layout till Horisontell och byt namn på den innehöll gruppen till Första skärmen. Detta kommer att vara till nytta senare. Resultatet ska se ut så här:
Lägg sedan till en andra grupp som ligger på samma nivå som Första skärmen grupp. Ställ in dess Layout till Vertikal. Lägg till en bild och en knapp i gruppen. Du kan lägga till bokstavligen en bild, bara se till att du sätter något där för annars skulle animationen se lite torr ut. Ställ in titeln på knappen till "< Pop". Connect the button to the popButtonPressed Åtgärd som vi skapade tidigare. Användargränssnittet ska nu se ut så här:
Lägg till en knapp till Första skärmen grupp. Ställ in titeln på "Push>" och dess vertikala position till Botten. Anslut knappen till pushButtonPressed verkan. Användargränssnittet ska nu se ut så här:
Det är en sak vi behöver göra, koppla samman firstScreenGroup utlopp till gruppen vi namngav Första skärmen.
När du bygger och kör appen bör du kunna presentera den andra skärmen genom att trycka på knappen med titeln "Push>" längst ner. Du kan avvisa den andra skärmen genom att trycka på knappen med titeln "< Pop". It should look like this:
I denna handledning har vi tittat på inhemska animationer på watchOS 2. Jag hoppas att det har gett dig en smak av vad du kan uppnå med animeringar på watchOS. Om du har några frågor kan du skicka en kommentar nedan eller kontakta mig på Twitter.
Accentsconagua