Mai bune animații iOS cu CATransacție

Core Animation, cadrul Cocoa responsabil pentru majoritatea animațiilor iOS și macOS, este un sistem complex, cu o mulțime de funcționalități ascunse și mai puțin cunoscute.

Core Animation vă gestionează animațiile din culise și, știind un pic mai mult cum funcționează, putem profita din plin de acestea și de a crea animații bine ajustate.

Animațiile sunt ușoare. Cu excepția cazurilor în care nu sunt.
BetterAnimations.playground

Animațiile sunt cel mai bun mod de a afișa schimbările către un utilizator. UIKit de la Apple (sau AppKit pentru macOS) face ca săriturile în animații să fie o briză. Probabil că ați folosit UIKit pentru majoritatea întâlnirilor dvs. de animație, iar codul arată probabil așa:

Este curat și ușor de utilizat. Cadrele UIKit / AppKit de nivel superior (care se situează deasupra Core Animation) fac o treabă excelentă pentru a facilita animațiile. Cu toate acestea, există unele capcane când doriți mișcări mai complexe.

Exemplu de animație

Luați în considerare acest lucru: aveți un UIButton, descendent al UIView și doriți să-l faceți o vedere circulară, iar atunci când atingeți, va modifica dimensiunea vizualizării.

Sună direct înainte. Putem anima stiledButton.layer.cornerRadius și îl putem seta pe jumătate din lățimea pe măsură ce cadrul nostru se schimbă. Dar stai ... există o problemă. UIView.animate (...) va gestiona numai animațiile de proprietate pentru vizualizare, nu și animațiile de proprietate stratificate. Dacă am încercat să schimbăm cadrul lui styledButton și cornerRadius of styledButton în blocul de animație de mai jos obținem un efect nedorit:

Rezultatul segmentului de cod

Cadrul se animă corect, însă cornerRadius sare direct la noua sa valoare, fără a anima. Mai târziu vom vorbi despre CATransacție și cum va rezolva această problemă. Dar mai întâi, este bine să știm ce se întâmplă sub capota animațiilor noastre și de ce se întâmplă acest lucru.

În interiorul animației de bază

Instanțele UIView (precum și instanțele NSView cu suport pentru straturi) au o proprietate CALayer numită strat pe care funcționează animațiile. Vizualizarea delegă redarea straturilor lor în animația de bază. Cu toate acestea, atunci când se adaugă animații la strat, proprietățile stratului nu sunt modificate direct.

Animația Core conține două ierarhii de arbori paralele: un arbore de strat model și arbore de strat de prezentare. Acestea pot fi văzute în proprietățile de prezentare CALayerLayer și modelLayer. Prezentarea Layer este cea care este responsabilă de afișarea oricărei modificări pe parcursul unei animații. Dacă ar trebui să animați proprietatea borderWidth a unui strat și să observați valoarea în timpul animației, valoarea borderWidth se va schimba numai în arborele de prezentare al stratului în timpul animației.

Prin CABasicAnimation putem anima proprietățile stratului. Dar nu lăsați cuvântul „de bază” să vă descurajeze - acesta este unul dintre cele mai puternice instrumente de animație pentru reglarea fină a animațiilor.

O notă practică: este o practică bună de animație să setați valoarea pe care o animați la noua valoare înainte de a adăuga animația. Este obișnuit să vedeți proprietatea fillMode setată la kCAFillModeForwards și isRemovedOnCompletion setată la false. Cu toate acestea, ceea ce face acest lucru este, în esență, „întrerupeți” stratul nostru de prezentare la sfârșitul animației. Este o practică bună să păstrați sincronizarea straturilor de model și prezentare, iar prin setarea valorii înainte de a adăuga animația, putem face doar acest lucru.

CATransacție - Pentru a netezi animațiile

O.K. Înapoi la exemplul nostru UIButton de mai devreme. Dorim să animăm proprietatea cornerRadius a stratului și să animăm în același timp proprietatea cadrului vizualizării și să ne asigurăm că acestea rămân perfect în sincronizare pentru cea mai bună animație.

CATransacție către salvare!

CATransaction este o clasă adesea neglijată de majoritatea dezvoltatorilor. Sarcina CATransaction este de a grupa mai multe acțiuni legate de animație împreună. Se asigură că modificările dorite de animație sunt angajate în același timp cu animația de bază.

Aici începem o tranzacție și putem schimba orice proprietăți activate pentru animația de bază, care vor fi animate unul lângă celălalt odată angajate.

Împreună totul

Deci, dorim să animăm proprietățile stratului și să vizualizăm în același timp. Aceasta este o utilizare perfectă pentru CATransaction. Putem chiar folosi codurile noastre existente UIView.animate () și CABasicAnimation!

Rezultat animație

În acest exemplu, folosesc atât o animație UIView, cât și o CABasicAnimation pentru a finaliza această sarcină. Orice lucru coordonat de CATransaction va fi transmis altor animații. De exemplu, funcția setAnimationDuration (dur: CFTimeInterval) se va aplica CABasicAnimation, astfel încât nu este necesar să specificăm nicio durată. Cu toate acestea, întrucât UIView.animate () ne face să specificăm durata, putem seta pur și simplu durata la aceeași dată specificată în setAnimationDuration de CATransaction.

Animații cu cadre cheie personalizate

O altă utilizare corectă este utilizarea funcției de sincronizare a unei CATransacții pentru a defini propria curbă de animație bezier. Dacă înfășurați UIView.animate () în interiorul unei tranzacții CAT, puteți obține un control precis asupra curbei de animație:

Animație finală cu funcție de sincronizare

rezumat

CATransaction este un coordonator puternic pentru animațiile dvs. și vă va economisi tone de timp în timp ce vă oferă un control precis asupra animațiilor. În plus, nu există o mulțime de blocuri imbricate - ceea ce este întotdeauna un plus de lizibilitate.

Proiectul complet Swift 3 de joacă folosind CATransaction alături de UIKit și CABasicAnimation poate fi găsit aici:

Multumesc pentru citit! Dacă aveți întrebări sau sugestii - nu ezitați să vă adresați!