Share
Il nuovo sistema operativo per Apple Watch, watchOS 2, è stato presentato un paio di settimane fa al WWDC 2015. Offre molti miglioramenti, soprattutto per gli sviluppatori che desiderano creare un'app Apple Watch. Queste sono le cose che trovo più importanti per gli sviluppatori:
Prima di arrivare ai dadi, vorrei passare un minuto a parlare dello scopo delle animazioni sulle app di Apple Watch.
La ragione ovvia è che rendono l'interfaccia utente più divertente se utilizzata in modo appropriato. E quando si tratta di Apple Watch, questo è un grande Se. Poiché la maggior parte delle interazioni con le app dura solo pochi secondi, non vuoi davvero esagerare con le animazioni.
Il secondo, e credo sia un motivo più importante, è che consentono gerarchie di navigazione personalizzate all'interno delle app di Apple Watch. Supponiamo che tu debba presentare una schermata che l'utente può lasciare solo eseguendo un'azione specifica. Normalmente, le app di Apple Watch hanno sempre un pulsante di annullamento nell'angolo in alto a sinistra quando viene presentato un controller di interfaccia modale. Con le animazioni e la manipolazione intelligente del layout, è possibile creare la propria routine "presente controller di visualizzazione" che mostra il contenuto della tua app a schermo intero, ignorandolo con quella specifica azione. Questa è una delle cose che imparerai in questo tutorial.
Prima di approfondire questo tutorial, dovresti avere una conoscenza di base di come funziona il sistema di layout su WatchKit. Anche se sei uno sviluppatore iOS esperto, il layout basato su gruppi in WatchKit è molto diverso da quello a cui sei abituato su iOS. Devi pensare al layout in un modo molto diverso. Ma una volta che ti ci abitui, sarai in grado di creare la maggior parte dei layout senza troppi sforzi.
Se sei nuovo sul layout di WatchKit, c'è un ottimo tutorial su Tuts + del mio amico Patrick Balestra, Comprensione del sistema di layout di WatchKit. Usando un'app di esempio, spiega tutto ciò che è necessario sapere per essere al passo.
Inoltre, ci sono molte sessioni WWDC che toccano questo argomento. La sessione che consiglio di più e che riguarda le animazioni di WatchKit è questa intitolata Tecniche di layout e animazione per WatchKit.
Il principio delle animazioni su watchOS 2 è semplice, è possibile impostare una o più proprietà animabili all'interno di un blocco di animazione. Il seguente esempio illustra come funziona.
[auto animateWithDuration: 0.5 animazioni: ^ [self.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentRight]; ];
Questo metodo causa il circleGroup da allineare a destra, con un'animazione della durata di 0,5 secondi. Come puoi vedere, stiamo chiamando animateWithDuration: animazioni: sopra se stesso, che è un'istanza di WKInterfaceController. Questo è diverso da iOS in cui i metodi di animazione sono metodi di classe UIView.
L'elenco seguente mostra quali proprietà sono animabili:
Tenere presente che non è ancora possibile su watchOS 2 creare elementi dell'interfaccia utente in fase di runtime. Ma dal momento che puoi nasconderli o impostare il loro alfa su 0 nello storyboard, questo non dovrebbe essere un grosso problema.
Questo è tutto. Con la tua conoscenza del sistema di layout WatchKit, sei pronto per iniziare a lavorare con animazioni native su watchOS. Iniziamo con la creazione di un'app campione in modo da poterti mostrare un paio di esempi di come tutto ciò si adatta a tutti.
Creeremo una semplice app watchOS 2 che introdurrà un paio di questi concetti di animazione. Non è affatto il tentativo di fornire una panoramica completa di tutte le cose che sono possibili. Invece, mostra l'idea di base, che si spera ti consenta di trovare soluzioni a ciò di cui hai bisogno.
Al momento della scrittura, Xcode 7 è ancora in beta. Per creare un'app watchOS 2, devi usare Xcode 7 in modo che sia quello che userò.
Aperto Interface.storyboard nel WatchApp gruppo come mostrato di seguito.
Aggiungi un gruppo all'interfaccia trascinandolo dal Libreria di oggetti sulla destra. Nel Ispettore degli attributi a destra, cambia il suo layout in Verticale e impostare la sua altezza a Relativo al contenitore.
Aggiungi un secondo gruppo al gruppo che abbiamo appena aggiunto. Nel Ispettore degli attributi, imposta la sua posizione verticale a Parte inferiore.
Aggiungi quattro pulsanti al secondo gruppo. Per ogni pulsante, impostare Taglia a Relativo al contenitore con un valore di 0.25. Imposta i titoli dei pulsanti su ←, →, ↑ e ↓. Dopo questo passaggio, l'interfaccia utente dovrebbe assomigliare a questa:
Per completare la prima parte dell'interfaccia utente, aggiungi un altro gruppo al gruppo principale e configuralo come segue:
La seguente schermata mostra come deve essere configurato il cerchio.
Nel Navigatore di progetto, espandere il Estensione WatchApp raggruppa e seleziona InterfaceController.m. Sostituire l'implementazione del InterfaceController classe con il seguente:
#import "InterfaceController.h" @interface InterfaceController () @property (nonatomic, weak) IBOutlet WKInterfaceGroup * circleGroup; @end @implementation InterfaceController // Pulsanti Circle Direction - (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 animazioni: ^ [self.circleGroup setVerticalAlignment: WKInterfaceObjectVerticalAlignmentBottom]; ]; @fine
Queste azioni sposteranno il cerchio rosso in una direzione specifica. E come puoi vedere, lo realizziamo impostando il suo allineamento verticale e / o orizzontale all'interno di un blocco di animazione.
Aperto Interface.storyboard e collegare le prese come mostrato di seguito.
Questo dovrebbe farlo. Esegui il progetto e, se hai seguito i passaggi precedenti, dovresti essere in grado di spostare il cerchio rosso sullo schermo usando i pulsanti freccia.
Nella seconda parte di questo tutorial, creeremo un'animazione push. Poiché la maggior parte dei passaggi coinvolti sono simili, questa volta mi muoverò un po 'più veloce.
Aperto InterfaceController.m e creare un nuovo sbocco, firstScreenGroup, di tipo WKInterfaceGroup nell'estensione di classe del InterfaceController classe.
@interface InterfaceController () @property (nonatomic, weak) IBOutlet WKInterfaceGroup * circleGroup; @property (nonatomic, weak) IBOutlet WKInterfaceGroup * firstScreenGroup; @fine
Quindi, implementare le seguenti azioni in InterfaceController classe.
- (IBAction) pushButtonPressed [self animateWithDuration: 0.1 animations: ^ [self.firstScreenGroup setAlpha: 0]; ]; [auto animateWithDuration: 0.3 animazioni: ^ [self.firstScreenGroup setWidth: 0]; ]; - (IBAction) popButtonPressed [self animateWithDuration: 0.3 animazioni: ^ [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 animateWithDuration: 0.1 animazioni: ^ [self.firstScreenGroup setAlpha: 1];];);
Nel pushButtonPressed, riduciamo il primo gruppo di schermate (lo creeremo nel passaggio successivo) e in popButtonPressed espandiamo nuovamente quel gruppo. Stiamo anche animando l'alfa del primo gruppo di schermate per rendere l'animazione un po 'più attraente.
Aperto Interface.storyboard e aggiungi un nuovo gruppo all'interfaccia utente. Metti il gruppo che era già lì, quello contenente Cerchio e il gruppo con i pulsanti, all'interno di quel nuovo gruppo. Imposta la sua disposizione a Orizzontale e rinominare il gruppo contenuto in Primo schermo. Questo tornerà utile più tardi. Il risultato dovrebbe essere simile a questo:
Quindi, aggiungi un secondo gruppo che si troverà allo stesso livello di Primo schermo gruppo. Imposta la sua disposizione a Verticale. Aggiungi un'immagine e un pulsante al gruppo. Puoi aggiungere letteralmente qualsiasi immagine, assicurati di mettere qualcosa lì, altrimenti l'animazione sembrerebbe un po 'asciutta. Imposta il titolo del pulsante su "< Pop". Connect the button to the popButtonPressed azione che abbiamo creato in precedenza. L'interfaccia utente dovrebbe ora assomigliare a questa:
Aggiungi un pulsante al Primo schermo gruppo. Imposta il titolo su "Push>" e la sua posizione verticale su Parte inferiore. Collegare il pulsante al pushButtonPressed azione. L'interfaccia utente dovrebbe ora assomigliare a questa:
C'è una cosa che dobbiamo fare, connettere il firstScreenGroup sbocco al gruppo che abbiamo chiamato Primo schermo.
Quando crei ed esegui l'app, dovresti essere in grado di presentare il secondo schermo toccando il pulsante con il titolo "Push>" in basso. Puoi chiudere il secondo schermo toccando il pulsante con il titolo "< Pop". It should look like this:
In questo tutorial, abbiamo dato un'occhiata alle animazioni native su watchOS 2. Spero che ti abbia dato un assaggio di ciò che puoi ottenere con le animazioni su watchOS. Se hai domande, puoi postare un commento qui sotto o contattarmi su Twitter.
Accentsconagua