Share
Het nieuwe besturingssysteem voor Apple Watch, watchOS 2, is een paar weken geleden geïntroduceerd op WWDC 2015. Het brengt veel verbeteringen met zich mee, voornamelijk voor ontwikkelaars die een Apple Watch-app willen maken. Dit zijn de dingen die ik het belangrijkst vind voor ontwikkelaars:
Voordat we ons gaan bezighouden met de moesjes en bouten, wil ik graag even stilstaan bij het doel van animaties in Apple Watch-apps.
De voor de hand liggende reden is dat ze de gebruikersinterface aangenamer maken als ze op de juiste manier worden gebruikt. En als het op Apple Watch aankomt, is dat een groot succes als. Omdat de meeste app-interacties maar een paar seconden duren, wil je echt niet overboord gaan met animaties.
De tweede, en volgens mij belangrijker reden, is dat ze aangepaste navigatiehiërarchieën toelaten in Apple Watch-apps. Laten we veronderstellen dat je een scherm moet presenteren dat de gebruiker alleen kan verlaten door een specifieke actie te ondernemen. Normaal gesproken hebben Apple Watch-apps altijd een annuleerknop in de linkerbovenhoek wanneer een modale interface-controller wordt gepresenteerd. Met animaties en slimme lay-outmanipulatie kunt u uw eigen "huidige weergavecontroller" -routine maken die de volledige inhoud van uw app laat zien en die door die specifieke actie wordt afgewezen. Dat is een van de dingen die je in deze tutorial zult leren.
Voordat je je verdiept in deze tutorial, moet je een basiskennis hebben van hoe het lay-outsysteem werkt op WatchKit. Zelfs als u een ervaren iOS-ontwikkelaar bent, is de op groepen gebaseerde lay-out in WatchKit heel anders dan wat u op iOS gewend bent. Je moet op een heel andere manier over de lay-out nadenken. Maar als u er eenmaal aan gewend bent, kunt u de meeste lay-outs zonder veel moeite creëren.
Als de lay-out van WatchKit nieuw voor u is, is er een geweldige tutorial over Tuts + van mijn vriend Patrick Balestra, het Lay-out-systeem van WatchKit. Met behulp van een voorbeeldapp legt hij alles uit wat je moet weten om op snelheid te komen.
Ook zijn er veel WWDC-sessies die dit onderwerp raken. De sessie die ik het meest aanbeveel en die WatchKit-animaties omvat, is deze met de titel Layout- en animatietechnieken voor WatchKit.
Het principe van animaties op watchOS 2 is eenvoudig, u plaatst een of meer van de animeerbare eigenschappen in een animatieblok. Het volgende voorbeeld illustreert hoe dit werkt.
[self animateWithDuration: 0.5 animations: ^ [self.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentRight]; ];
Deze methode veroorzaakt de circleGroup rechts uitgelijnd, met een animatie met een duur van 0,5 seconde. Zoals je kunt zien, bellen we animateWithDuration: animaties: op zelf, wat een voorbeeld is van WKInterfaceController. Dit is anders dan iOS, waar de animatiemethoden class-methoden zijn UIView.
De onderstaande lijst toont welke eigenschappen animeerbaar zijn:
Houd er rekening mee dat het op watchOS 2 nog steeds niet mogelijk is om tijdens runtime elementen van de gebruikersinterface te maken. Maar aangezien je ze kunt verbergen of hun alpha op 0 kunt zetten in het storyboard, zou dit niet zo'n groot probleem moeten zijn.
Dat is het. Gewapend met uw kennis van het lay-outsysteem van WatchKit bent u nu klaar om te gaan werken met native animaties op watchOS. Laten we aan de slag gaan door een voorbeeldapp te maken, zodat ik u een paar voorbeelden kan laten zien van hoe dit allemaal bij elkaar past.
We gaan een eenvoudige watchOS 2-app maken die een aantal van deze animatieconcepten zal introduceren. Het is geenszins proberen een compleet overzicht te geven van alle mogelijke dingen. In plaats daarvan toont het het basisidee, dat u hopelijk in staat zal stellen oplossingen te bedenken voor wat u nodig hebt.
Op het moment van schrijven is Xcode 7 nog steeds in bèta. Om een watchOS 2-app te maken, moet je Xcode 7 gebruiken, dus dat is wat ik ga gebruiken.
Open Interface.storyboard in de WatchApp groep zoals hieronder getoond.
Voeg een groep toe aan de interface door deze van de. Te slepen Objectbibliotheek aan de rechterkant. In de Kenmerken Inspector aan de rechterkant, verander de lay-out in Verticaal en stel de hoogte in op Ten opzichte van Container.
Voeg een tweede groep toe aan de groep die we zojuist hebben toegevoegd. In de Kenmerken Inspector, stel de verticale positie in op Bodem.
Voeg vier knoppen toe aan de tweede groep. Stel voor elke knop in Grootte naar Ten opzichte van Container met een waarde van 0.25. Stel de titels van de knoppen in op ←, →, ↑ en ↓. Na deze stap ziet de gebruikersinterface er als volgt uit:
Om het eerste deel van de gebruikersinterface te voltooien, voegt u nog een groep toe aan de hoofdgroep en configureert u deze als volgt:
In de volgende schermafbeelding ziet u hoe de cirkel moet worden geconfigureerd.
In de Project navigator, breid het uit WatchApp-extensie groeperen en selecteren InterfaceController.m. Vervang de implementatie van de InterfaceController les met het volgende:
#import "InterfaceController.h" @interface InterfaceController () @property (nonatomic, weak) IBOutlet WKInterfaceGroup * circleGroup; @end @implementation InterfaceController // Cirkelrichtingsknoppen - (IBAction) leftButtonPressed [self animateWithDuration: 0.5 animations: ^ [self.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentLeft]; ]; - (IBAction) rightButtonPressed [self animateWithDuration: 0.5 animations: ^ [self.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentRight]; ]; - (IBAction) upButtonPressed [self animateWithDuration: 0.5 animations: ^ [self.circleGroup setVerticalAlignment: WKInterfaceObjectVerticalAlignmentTop]; ]; - (IBAction) downButtonPressed [self animateWithDuration: 0.5 animations: ^ [self.circleGroup setVerticalAlignment: WKInterfaceObjectVerticalAlignmentBottom]; ]; @end
Met deze acties wordt de rode cirkel in een specifieke richting verplaatst. En zoals je kunt zien, bereiken we dat door de verticale en / of horizontale uitlijning in een animatieblok in te stellen.
Open Interface.storyboard en verbind de stopcontacten zoals hieronder getoond.
Dat zou het moeten doen. Voer het project uit en als u de bovenstaande stappen hebt gevolgd, kunt u de rode cirkel rond het scherm verplaatsen met de pijlknoppen.
In het tweede deel van deze tutorial maken we een push-animatie. Aangezien de meeste van de betrokken stappen vergelijkbaar zijn, zal ik deze keer wat sneller gaan.
Open InterfaceController.m en maak een nieuw verkooppunt, firstScreenGroup, van type WKInterfaceGroup in de klasse-extensie van de InterfaceController klasse.
@interface InterfaceController () @property (nonatomic, weak) IBOutlet WKInterfaceGroup * circleGroup; @property (nonatomic, weak) IBOutlet WKInterfaceGroup * firstScreenGroup; @einde
Implementeer vervolgens de volgende acties in de InterfaceController klasse.
- (IBAction) pushButtonPressed [self animatedWithDuration: 0.1 animations: ^ [self.firstScreenGroup setAlpha: 0]; ]; [self animateWithDuration: 0.3 animations: ^ [self.firstScreenGroup setWidth: 0]; ]; - (IBAction) popButtonPressed [self animateWithDuration: 0.3 animations: ^ [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 animations: ^ [self.firstScreenGroup setAlpha: 1];];);
In pushButtonPressed, we verkleinen de eerste schermgroep (we zullen deze in de volgende stap maken) en in popButtonPressed we breiden die groep opnieuw uit. We animeren ook de alpha van de eerste schermgroep om de animatie een beetje aantrekkelijker te maken.
Open Interface.storyboard en voeg een nieuwe groep toe aan de gebruikersinterface. Zet de groep die er al was, die met Cirkel en de groep met knoppen, binnen die nieuwe groep. Stel zijn lay-out naar Horizontaal en hernoem de ingesloten groep om Eerste scherm. Dit zal later van pas komen. Het resultaat zou er als volgt uit moeten zien:
Voeg vervolgens een tweede groep toe die op hetzelfde niveau ligt als de Eerste scherm groep. Stel zijn lay-out naar Verticaal. Voeg een afbeelding en een knop toe aan de groep. Je kunt letterlijk elke afbeelding toevoegen, zorg er gewoon voor dat je er iets op zet, anders ziet de animatie er wat droog uit. Stel de titel van de knop in op "< Pop". Connect the button to the popButtonPressed actie die we eerder hebben gemaakt. De gebruikersinterface zou er nu als volgt uit moeten zien:
Voeg een knop toe aan de Eerste scherm groep. Zet de titel op "Push>" en de verticale positie op Bodem. Verbind de knop met de pushButtonPressed actie. De gebruikersinterface zou er nu als volgt uit moeten zien:
Er is één ding dat we moeten doen, het verbinden van de firstScreenGroup stopcontact naar de groep die we hebben genoemd Eerste scherm.
Wanneer u de app maakt en uitvoert, moet u het tweede scherm kunnen presenteren door op de knop met titel te tikken "Druk op>" onderaan. U kunt het tweede scherm sluiten door op de knop met titel te tikken "< Pop". It should look like this:
In deze tutorial hebben we de oorspronkelijke animaties op watchOS 2 bekeken. Ik hoop dat het je een voorproefje heeft gegeven van wat je kunt bereiken met animaties op watchOS. Als je vragen hebt, kun je hieronder een reactie plaatsen of contact met me opnemen op Twitter.
Accentsconagua