Share
Noul sistem de operare pentru Apple Watch, watchOS 2, a fost introdus cu câteva săptămâni în urmă la WWDC 2015. Acesta aduce multe îmbunătățiri, în special pentru dezvoltatorii care doresc să creeze o aplicație Apple Watch. Acestea sunt lucrurile pe care le consider cele mai importante pentru dezvoltatori:
Înainte de a ajunge la nuci și șuruburi, aș vrea să petrec un minut vorbind despre scopul animațiilor pe aplicațiile Apple Watch.
Motivul evident este că ele fac interfața utilizator mai plăcută dacă este utilizată în mod corespunzător. Și când vine vorba de Apple Watch, asta e mare dacă. Întrucât majoritatea interacțiunilor aplicațiilor durează doar câteva secunde, într-adevăr nu doriți să treceți peste bord cu animații.
Cel de-al doilea, și cred că un motiv mai important, este că permit ierarhiile de navigare personalizate în aplicațiile Apple Watch. Să presupunem că trebuie să prezentați un ecran pe care utilizatorul nu îl poate lăsa decât să ia o acțiune specifică. În mod normal, aplicațiile Apple Watch au întotdeauna un buton de anulare în colțul din stânga sus atunci când este prezentat un controler de interfață modală. Cu ajutorul animațiilor și manipulării inteligente a aspectului, puteți crea propriul rutină "actuală a controlerului de vizualizare a vizualizării", care să afișeze conținutul aplicației pe ecran întreg, respingând-o prin acea acțiune specifică. Acesta este unul din lucrurile pe care le veți învăța în acest tutorial.
Înainte să vă înscrieți în acest tutorial, trebuie să aveți cunoștințe de bază despre modul în care sistemul de layout funcționează pe WatchKit. Chiar dacă sunteți un dezvoltator experimentat iOS, aspectul pe bază de grup din WatchKit este foarte diferit de ceea ce vă obișnuiți cu iOS. Trebuie să vă gândiți la aspect într-un mod foarte diferit. Dar, odată ce vă obișnuiți cu aceasta, veți putea crea cele mai multe planuri fără mult efort.
Dacă sunteți nou în ceea ce privește layout-ul pe WatchKit, există un tutorial excelent despre Tuts + de către prietenul meu Patrick Balestra, Înțelegerea sistemului WatchKit Layout. Folosind o aplicație de exemplu, el explică tot ce trebuie să știți pentru a ajunge la viteză.
De asemenea, există multe sesiuni WWDC care ating acest subiect. Sesiunea pe care o recomand cel mai mult și care se referă la animațiile WatchKit este acest titlu intitulat Layout and Animation Techniques for WatchKit.
Principiul animațiilor pe watchOS 2 este simplu, setați una sau mai multe proprietăți animabile în interiorul unui bloc de animație. Următorul exemplu ilustrează modul în care funcționează acest lucru.
[self animateWithDuration: 0.5 animații: ^ [auto.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentRight]; ];
Această metodă determină circleGroup pentru a fi aliniat la dreapta, cu o animație cu o durată de 0,5 secunde. După cum puteți vedea, sunăm animateWithDuration: animații: pe de sine, care este un exemplu de WKInterfaceController. Acest lucru este diferit de iOS în cazul în care metodele de animație sunt metode de clasă UIView.
Lista de mai jos arată care sunt proprietățile animabile:
Rețineți că încă nu este posibil ca pe watchOS 2 să se creeze elemente de interfață utilizator în timpul rulării. Dar, deoarece puteți să le ascundeți sau să le setați alfa la 0 în scenă, aceasta nu ar trebui să fie o problemă atât de mare.
Asta e. Înarmat cu cunoștințele dvs. despre sistemul de layout WatchKit, sunteți gata să începeți să lucrați cu animații native pe watchOS. Să începem prin crearea unei aplicații de probă, pentru a vă arăta câteva exemple despre cum se potrivesc toate acestea împreună.
Vom crea o aplicație simplă watchOS 2 care va introduce câteva dintre aceste concepte de animație. În nici un caz nu încearcă să ofere o imagine de ansamblu completă a tuturor lucrurilor care sunt posibile. În schimb, arată ideea de bază, care, sperăm, vă va permite să găsiți soluții la ceea ce aveți nevoie.
La momentul redactării, Xcode 7 este încă în beta. Pentru a crea o aplicație watchOS 2, trebuie să utilizați Xcode 7, astfel că asta voi folosi.
Deschis Interface.storyboard în WatchApp grup, după cum se arată mai jos.
Adăugați un grup la interfață prin glisarea lui din Biblioteca de obiecte pe dreapta. În Atribuții Inspector pe partea dreaptă, schimbați aspectul acesteia Vertical și a stabilit înălțimea lui În raport cu containerul.
Adăugați un al doilea grup la grupul pe care tocmai l-am adăugat. În Atribuții Inspector, setați poziția sa verticală la Fund.
Adăugați patru butoane în al doilea grup. Pentru fiecare buton, setați mărimea la În raport cu containerul cu o valoare de 0,25. Setați titlurile butoanelor la ←, →, ↑ și ↓. După această etapă, interfața de utilizator ar trebui să arate astfel:
Pentru a termina prima parte a interfeței cu utilizatorul, adăugați încă un grup în grupul principal și configurați-l după cum urmează:
Următoarea captura de ecran vă arată cum trebuie configurat cercul.
În Navigator de proiect, extindeți Extensie de tip WatchApp grup și selectați InterfaceController.m. Înlocuiți punerea în aplicare a InterfaceController clasă cu următoarele:
#import "InterfaceController.h" @interface InterfaceController () @property (nonatomic, slab) IBOutlet WKInterfaceGroup * cercGrup; @end @implementation InterfaceController // Butoane de direcție circulară - (IBAction) leftButtonPressed [self animateWithDuration: 0.5 animații: ^ [auto.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentLeft]; ]; - (IBAction) rightButtonPressed [auto animateWithDuration: 0.5 animații: ^ [auto.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentRight]; ]; - (IBAction) upButtonPressed [auto animateWithDuration: 0.5 animații: ^ [auto.circleGroup setVerticalAlignment: WKInterfaceObjectVerticalAlignmentTop]; ]; - (IBAction) downButtonPressed [auto animateWithDuration: 0.5 animații: ^ [auto.circleGroup setVerticalAlignment: WKInterfaceObjectVerticalAlignmentBottom]; ]; @Sfârșit
Aceste acțiuni vor muta cercul roșu într-o anumită direcție. Și, după cum puteți vedea, realizăm acest lucru prin setările sale de aliniere verticală și / sau orizontală în interiorul unui bloc de animație.
Deschis Interface.storyboard și conectați prizele după cum se arată mai jos.
Ar trebui să o facă. Rulați proiectul și, dacă ați urmat pașii de mai sus, ar trebui să puteți deplasa cercul roșu în jurul ecranului utilizând butoanele săgeată.
În a doua parte a acestui tutorial, vom crea o animație push. Deoarece majoritatea pașilor implicați sunt asemănătoare, mă voi mișca puțin mai repede de această dată.
Deschis InterfaceController.m și să creați o nouă priză, firstScreenGroup, de tip WKInterfaceGroup în extensia clasei InterfaceController clasă.
@ interfata InterfaceController () @property (nonatomic, slab) IBOutlet WKInterfaceGroup * cercGrup; @property (nonatomic, slab) IBOutlet WKInterfaceGroup * firstScreenGroup; @Sfârșit
Apoi, implementați următoarele acțiuni în InterfaceController clasă.
- (IBAction) pushButtonPressed [auto animateWithDuration: 0.1 animații: ^ [self.firstScreenGroup setAlpha: 0]; ]; [self animateWithDuration: 0.3 animații: ^ [self.firstScreenGroup setWidth: 0]; ]; - (IBAction) popButtonPressed [auto animateWithDuration: 0.3 animații: ^ [auto.firstScreenGroup setRelativeWidth: 1 cuAdjustment: 0]; ]; dispatch_time (DISPATCH_TIME_NOW, (int64_t) (0.2 * NSEC_PER_SEC)), dispatch_get_main_queue (), ^ [auto animateWithDuration: 0.1 animații: ^ [self.firstScreenGroup setAlpha: 1];
În pushButtonPressed, noi vom micșora primul grup de ecran (îl vom crea în pasul următor) și în popButtonPressed extindem din nou grupul respectiv. De asemenea, animăm alfa din primul grup de ecran pentru a face animația un pic mai atrăgătoare.
Deschis Interface.storyboard și adăugați un nou grup la interfața cu utilizatorul. Puneți grupul care era deja acolo, cel care conținea Cerc și grupul cu butoane, în cadrul acelui grup nou. Setați-o schemă la Orizontală și redenumiți grupul conținut Primul ecran. Acest lucru va fi util mai târziu. Rezultatul ar trebui să arate astfel:
Apoi, adăugați un al doilea grup care va fi la același nivel cu Primul ecran grup. Setați-o schemă la Vertical. Adăugați o imagine și un buton în grup. Puteți adăuga literalmente orice imagine, doar asigurați-vă că ați pus ceva acolo pentru că în caz contrar animația ar părea oarecum uscată. Setați titlul butonului la "< Pop". Connect the button to the popButtonPressed acțiune pe care am creat-o mai devreme. Interfața cu utilizatorul ar trebui să arate astfel:
Adăugați un buton la Primul ecran grup. Setați titlul la "Push>" și poziția sa verticală la Fund. Conectați butonul la pushButtonPressed acțiune. Interfața cu utilizatorul ar trebui să arate astfel:
Este un lucru pe care trebuie să-l facem să îl conectăm firstScreenGroup ieșiți la grupul pe care l-am denumit Primul ecran.
Când construiți și rulați aplicația, ar trebui să puteți prezenta al doilea ecran atingând butonul cu titlu "Push>" în partea de jos. Puteți renunța la cel de-al doilea ecran atingând butonul cu titlul "< Pop". It should look like this:
În acest tutorial, am aruncat o privire asupra animațiilor native pe watchOS 2. Sper că ți-a dat un gust de ceea ce poți realiza cu animațiile pe watchOS. Dacă aveți întrebări, puteți posta un comentariu mai jos sau puteți să mă contactați pe Twitter.
Accentsconagua