Efectuarea de animații iOS pe vizualizări cu UIKit și UIView

Sunt un dezvoltator iOS de peste un deceniu și am văzut rar articole care să consolideze toate modalitățile posibile de a realiza animații în iOS. Acest articol își propune să fie o inițiere despre animațiile iOS, cu intenția de a acoperi în mod exhaustiv diferitele moduri de a face același lucru.

Având în vedere amploarea subiectului, am acoperi fiecare parte succint la un nivel destul de înalt. Scopul este de a educa cititorul cu un set de opțiuni pentru a adăuga animații la aplicația lui iOS.

Înainte de a începe cu subiecte legate de iOS, să aruncăm o scurtă privire asupra vitezei de animație.

Animație la 60 FPS

În general, în videoclipuri, fiecare cadru este reprezentat de o imagine, iar rata de cadre determină numărul de imagini răsturnate în secvență. Aceasta este denumită „cadre pe secundă” sau FPS.

FPS determină numărul de imagini statice răsturnate într-o secundă, ceea ce înseamnă literal că, cu cât este mai mare numărul de imagini/cadre, mai multe detalii/informații sunt afișate în videoclip. Acest lucru este valabil și pentru animații.

FPS este de obicei folosit pentru a determina calitatea animațiilor. Există o opinie populară conform căreia orice animație bună ar trebui să ruleze la 60 fps sau mai mare - orice mai puțin de 60 fps s-ar simți puțin neplăcut.

Vrei să vezi diferența dintre 30FPS și 60FPS? Verifica acest lucru!

Ai observat diferența? Ochii umani pot simți cu siguranță agitația la fps mai mici. Prin urmare, este întotdeauna o practică bună să vă asigurați că orice animație pe care o creați respectă regula de bază de a rula la 60 FPS sau mai mult. Acest lucru îl face să se simtă mai realist și mai viu.

După ce ne-am uitat la FPS, să ne aprofundăm acum în diferitele cadre de bază iOS care ne oferă o modalitate de a realiza animații.

Cadre de bază

În această secțiune, vom atinge cadrele din SDK-ul iOS care pot fi folosite pentru a crea animații de vizualizare. Vom face o scurtă plimbare prin fiecare dintre ele, explicând setul de caracteristici cu un exemplu relevant.

UIKit/ UIView Animații

UIView este clasa de bază pentru orice vizualizare care afișează conținut în aplicațiile iOS.

UIKit, cadrul care ne oferă UIView, ne oferă deja câteva funcții de animație de bază care fac ca dezvoltatorii să obțină mai mult făcând mai puțin.

API-ul, UIView.animate , este cel mai simplu mod de a anima vizualizări, deoarece proprietățile oricărei vizualizări pot fi animate cu ușurință prin furnizarea valorilor proprietăților în sintaxa bazată pe bloc.

În animațiile UIKit, se recomandă să modificați numai proprietățile animabile ale UIVIew, altfel vor exista repercusiuni în care animațiile ar putea face ca vizualizarea să ajungă într-o stare neașteptată.

animație(cuDurata: animații: finalizare)

Această metodă ia în considerare durata animației, un set de modificări ale proprietăților animabile ale vizualizării care trebuie animate. Blocul de completare oferă un apel invers atunci când vizualizarea este finalizată cu efectuarea animației.

Aproape orice fel de animație, cum ar fi mutarea, scalarea, rotirea, decolorarea etc. pe o vizualizare poate fi realizată cu acest singur API.

Acum, luați în considerare că doriți să animați o modificare a dimensiunii unui buton sau doriți ca o anumită vizualizare să mărească ecranul. Iată cum o putem face folosind API-ul UIView.animate :

 let newButtonWidth: CGFloat = 60 UIView.animate(withDuration: 2.0) { //1 self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) //2 self.button.center = self.view.center //3 }

Iată ce facem noi aici:

1. Apelăm metoda UIView.animate cu o valoare de durată transmisă acesteia care reprezintă cât timp ar trebui să ruleze animația, descrisă în interiorul blocului.
2. Setăm noul cadru al butonului care ar trebui să reprezinte starea finală a animației.
3. Setăm centrul butonului cu center său de supraveghere astfel încât să rămână în centrul ecranului.

Blocul de cod de animație de mai sus ar trebui să declanșeze animația cadrului butonului cu schimbarea cadrului curent:

Width = 0, Height = 0

Până la cadrul final:

Width = Height = newButtonWidth

Și iată cum ar arăta animația:

animateWithDuration

Această metodă este ca o extensie a metodei animate în care puteți face tot ceea ce puteți efectua în API-ul anterior, cu unele comportamente fizice adăugate la animațiile de vizualizare.

De exemplu, dacă doriți să obțineți efecte de amortizare a arcului în animația pe care am făcut-o mai sus, atunci așa ar arăta codul:

 let newButtonWidth: CGFloat = 60 UIView.animate(withDuration: 1.0, //1 delay: 0.0, //2 usingSpringWithDamping: 0.3, //3 initialSpringVelocity: 1, //4 options: UIView.AnimationOptions.curveEaseInOut, //5 animations: ({ //6 self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) self.button.center = self.view.center }), completion: nil)

Iată setul de parametri pe care îl folosim:

1. duration
   Reprezintă durata animației care determină cât timp ar trebui să ruleze blocul de cod.
2. delay
   Reprezintă întârzierea inițială pe care dorim să o avem înainte de începerea animației.
3. SpringWithDamping
   Reprezintă valoarea efectului elastic pe care dorim să se comporte vederea. Valoarea trebuie să fie între 0 și 1. Cu cât valoarea este mai mică, cu atât oscilația arcului este mai mare.
4. velocity
   Reprezintă viteza cu care ar trebui să înceapă animația.
5. options
   Tipul de curbă de animație pe care doriți să o aplicați animației de vizualizare.
6. În sfârșit, blocul de cod în care setăm cadrul butonului care trebuie animat. Este la fel ca animația anterioară.

Și iată cum ar arăta animația cu configurația de mai sus:

UIViewPropertyAnimator

Pentru un control puțin mai mare asupra animațiilor, UIViewPropertyAnimator este util, unde ne oferă o modalitate de a întrerupe și a relua animațiile. Puteți avea sincronizare personalizată și ca animația dvs. să fie interactivă și întreruptibilă. Acest lucru este foarte util atunci când realizați animații care sunt, de asemenea, interacționabile cu acțiunile utilizatorului.

Gestul clasic „Alunecare pentru a debloca” și vizualizarea jucătorului închide/extinde animația (în aplicația Muzică) sunt exemple de animații interactive și întreruptibile. Puteți începe să mutați o vizualizare cu degetul, apoi să o eliberați și vizualizarea va reveni la poziția inițială. Alternativ, puteți surprinde vizualizarea în timpul animației și continuați să o trageți cu degetul.

Următorul este un exemplu simplu despre cum am putea realiza animația folosind UIViewPropertyAnimator :

 let newButtonWidth: CGFloat = 60 let animator = UIViewPropertyAnimator(duration:0.3, curve: .linear) { //1 self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) self.button.center = self.view.center } animator.startAnimation() //2

Iată ce facem:

1. Numim UIViewProperty API prin trecerea duratei și a curbei de animație.
2. Spre deosebire de ambele API-uri UIView.animate de mai sus, animația nu va începe decât dacă o specificați singur, adică aveți controlul deplin asupra întregului proces/flux de animație.

Acum, să presupunem că doriți și mai mult control asupra animațiilor. De exemplu, doriți să proiectați și să controlați fiecare cadru din animație. Există un alt API pentru asta, animateKeyframes . Dar înainte de a ne adânci în ea, să ne uităm rapid la ce este un cadru, într-o animație.

Ce este un frame ?

O colecție de modificări/tranziții ale vizualizării, de la starea de început la starea finală, este definită ca animation și fiecare poziție a vederii în timpul animației este numită frame .

animateKeyframes

Acest API oferă o modalitate de a proiecta animația în așa fel încât să puteți defini mai multe animații cu momente și tranziții diferite. Postați asta, API-ul integrează pur și simplu toate animațiile într-o singură experiență perfectă.

Să presupunem că vrem să ne mișcăm butonul de pe ecran într-un mod aleatoriu. Să vedem cum putem folosi API-ul de animație a cadrelor cheie pentru a face acest lucru.

 UIView.animateKeyframes(withDuration: 5, //1 delay: 0, //2 options: .calculationModeLinear, //3 animations: { //4 UIView.addKeyframe( //5 withRelativeStartTime: 0.25, //6 relativeDuration: 0.25) { //7 self.button.center = CGPoint(x: self.view.bounds.midX, y: self.view.bounds.maxY) //8 } UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.25) { self.button.center = CGPoint(x: self.view.bounds.width, y: start.y) } UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 0.25) { self.button.center = start } })

Iată defalcarea:

1. duration
   Apelați API-ul transmițând durata animației.
2. delay
   Durata inițială de întârziere a animației.
3. options
   Tipul de curbă de animație pe care doriți să o aplicați animației de vizualizare.
4. animations
   Bloc care preia toate animațiile de cadre cheie concepute de dezvoltator/utilizator.
5. addKeyFrame
   Apelați API-ul pentru a proiecta fiecare animație. În cazul nostru, am definit fiecare mișcare a butonului. Putem avea câte astfel de animații avem nevoie, adăugate la bloc.
6. relativeStartTime
   Definește ora de începere a animației în colecția blocului de animație.
7. relativeDuration
   Definește durata totală a acestei animații specifice.
8. center
   În cazul nostru, pur și simplu schimbăm proprietatea centrală a butonului pentru a muta butonul în jurul ecranului.

Și așa arată animațiile finale:

CoreAnimation

Orice animație bazată pe UIKit este tradusă intern în animații de bază. Astfel, cadrul Core Animation acționează ca un strat de suport sau coloană vertebrală pentru orice animație UIKit. Prin urmare, toate API-urile de animație UIKit nu sunt altceva decât straturi încapsulate ale API-urilor de animație de bază într-un mod ușor de consumat sau convenabil.

API-urile de animație UIKit nu oferă prea mult control asupra animațiilor care au fost realizate într-o vizualizare, deoarece sunt utilizate în principal pentru proprietățile animabile ale vizualizării. Prin urmare, în astfel de cazuri, în care intenționați să aveți control asupra fiecărui cadru al animației, este mai bine să utilizați direct API-urile de animație de bază. Alternativ, atât animațiile UIView, cât și animațiile de bază pot fi utilizate împreună.

UIView + animație de bază

Să vedem cum putem recrea aceeași animație de schimbare a butonului împreună cu specificarea curbei de sincronizare folosind API-urile UIView și Core Animation.

Putem folosi funcțiile de sincronizare ale CATransaction , care vă permit să specificați și să controlați curba de animație.

Să ne uităm la un exemplu de animație de modificare a dimensiunii unui buton cu raza de colț utilizând funcția de sincronizare a CATransaction și o combinație de animații UIView:

 let oldValue = button.frame.width/2 let newButtonWidth: CGFloat = 60 /* Do Animations */ CATransaction.begin() //1 CATransaction.setAnimationDuration(2.0) //2 CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)) //3 // View animations //4 UIView.animate(withDuration: 1.0) { self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) self.button.center = self.view.center } // Layer animations let cornerAnimation = CABasicAnimation(keyPath: #keyPath(CALayer.cornerRadius)) //5 cornerAnimation.fromValue = oldValue //6 cornerAnimation.toValue = newButtonWidth/2 //7 button.layer.cornerRadius = newButtonWidth/2 //8 button.layer.add(cornerAnimation, forKey: #keyPath(CALayer.cornerRadius)) //9 CATransaction.commit() //10

Iată defalcarea:

1. begin
   Reprezintă începutul blocului de cod de animație.
2. duration
   Durata totală a animației.
3. curve
   Reprezintă curba de sincronizare care trebuie aplicată animației.
4. UIView.animate
   Prima noastră animație pentru a schimba cadrul butonului.
5. CABasicAnimation
   Creăm obiectul CABasicAnimation referindu-ne la cornerRadius al butonului ca cale cheie, deoarece asta dorim să animem. În mod similar, dacă doriți să aveți un control la nivel granular asupra animațiilor cadru-cheie, atunci puteți utiliza clasa CAKeyframeAnimation .
6. fromValue
   Reprezinta valoarea initiala a animatiei, adica valoarea initiala cornerRadius a butonului de unde trebuie sa inceapa animatia.
7. toValue
   Reprezintă valoarea finală a animației, adică valoarea finală cornerRadius a butonului în care trebuie să se termine animația.
8. cornerRadius
   Trebuie să setăm proprietatea cornerRadius a butonului cu valoarea finală a animației, altfel valoarea cornerRadius a butonului va fi revenită automat la valoarea inițială după finalizarea animației.
9. addAnimation
   Atașăm layer obiectul de animație care conține configurația întregului proces de animație reprezentând Keypath pentru care trebuie efectuată animația.
10. commit
    Reprezintă sfârșitul blocului de cod de animație și începe animația.

Iată cum ar arăta animația finală:

Acest blog este o lectură excelentă pentru a ajuta la crearea de animații mai avansate, deoarece vă ghidează cu atenție prin majoritatea API-urilor de bază ale cadrului de animație, cu instrucțiuni care vă ghidează prin fiecare pas al drumului.

UIKitDynamics

UIKit Dynamics este motorul de fizică pentru UIKit, care vă permite să adăugați orice comportament fizic, cum ar fi coliziune, gravitație, împingere, snap etc., la comenzile UIKit.

UIKitDynamicAnimator

Aceasta este clasa de administrare a cadrului UIKit Dynamics care reglementează toate animațiile declanșate de orice control UI dat.

UIKitDynamicBehavior

Vă permite să adăugați orice comportament fizic la un animator, ceea ce îi permite apoi să funcționeze pe vizualizarea atașată acestuia.

Diferite tipuri de comportamente pentru UIKitDynamics includ:

• UIAttachmentBehavior
• UICollisionBehavior
• UIFieldBehavior
• UIGravityBehavior
• UIPushBehavior
• UISnapBehavior

Arhitectura UIKitDynamics arată cam așa. Rețineți că articolele de la 1 la 5 pot fi înlocuite cu o singură vizualizare.

Să aplicăm un anumit comportament fizic butonului nostru. Vom vedea cum să aplicăm gravitația butonului, astfel încât să ne dea senzația de a avea de a face cu un obiect real.

 var dynamicAnimator : UIDynamicAnimator! var gravityBehavior : UIGravityBehavior! dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1 gravityBehavior = UIGravityBehavior(items: [button]) //2 dynamicAnimator.addBehavior(gravityBehavior) //3

Iată defalcarea:

1. UIKitDynamicAnimator
   Am creat un obiect UIKitDynamicAnimator care acționează ca un orchestrator pentru realizarea animațiilor. De asemenea, am trecut supervizualizarea butonului nostru drept vizualizare de referință.
2. UIGravityBehavior
   Am creat un obiect UIGravityBehavior și am trecut butonul nostru în elementele matricei în care este injectat acest comportament.
3. addBehavior
   Am adăugat obiectul gravitațional la animator.
   
   Aceasta ar trebui să creeze o animație așa cum se arată mai jos:
   

   

   Ar trebui să îi spunem animatorului să considere partea de jos a ecranului ca fiind solul. Aici intervine UICollisionBehavior .
   
   

    var dynamicAnimator : UIDynamicAnimator! var gravityBehavior : UIGravityBehavior! var collisionBehavior : UICollisionBehavior! dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1 gravityBehavior = UIGravityBehavior(items: [button]) //2 dynamicAnimator.addBehavior(gravityBehavior) //3 collisionBehavior = UICollisionBehavior(items: [button]) //4 collisionBehavior.translatesReferenceBoundsIntoBoundary = true //5 dynamicAnimator.addBehavior(collisionBehavior) //6

4. UICollisionBehavior
   Am creat un obiect UICollisionBehavior și am trecut de-a lungul butonului, astfel încât comportamentul să fie adăugat elementului.
5. translatesReferenceBoundsIntoBoundary
   Activarea acestei proprietăți îi spune animatorului să ia granița vederilor de referință ca sfârșit, care este partea de jos a ecranului în cazul nostru.
6. addBehavior
   Am adăugat comportamentul de coliziune la animator aici.
   
   Acum, butonul nostru ar trebui să lovească pământul și să stea nemișcat, așa cum se arată mai jos:
   

   

   
   E destul de frumos, nu-i așa?
   
   Acum, să încercăm să adăugăm un efect de săritură, astfel încât obiectul nostru să se simtă mai real. Pentru a face asta, vom folosi clasa UIDynamicItemBehavior .
   

    var dynamicAnimator : UIDynamicAnimator! var gravityBehavior : UIGravityBehavior! var collisionBehavior : UICollisionBehavior! var bouncingBehavior : UIDynamicItemBehavior! dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1 gravityBehavior = UIGravityBehavior(items: [button]) //2 dynamicAnimator.addBehavior(gravityBehavior) //3 collisionBehavior = UICollisionBehavior(items: [button]) //4 collisionBehavior.translatesReferenceBoundsIntoBoundary = true //5 dynamicAnimator.addBehavior(collisionBehavior) //6 //Adding the bounce effect bouncingBehavior = UIDynamicItemBehavior(items: [button]) //7 bouncingBehavior.elasticity = 0.75 //8 dynamicAnimator.addBehavior(bouncingBehavior) //9

7. UIDynamicItemBehavior
   Am creat un obiect UIDynamicItemBehavior și am trecut de-a lungul butonului astfel încât comportamentul să fie adăugat elementului.
8. elasticity
   Valoarea trebuie să fie între 0-1, reprezintă elasticitatea, adică de câte ori obiectul trebuie să sară pe și de pe sol atunci când este lovit. Aici se întâmplă magia - prin modificarea acestei proprietăți, puteți diferenția între diferite tipuri de obiecte, cum ar fi bile, sticle, obiecte dure și așa mai departe.
9. addBehavior
   Am adăugat comportamentul de coliziune la animator aici.

Acum, butonul nostru ar trebui să sară când lovește pământul, așa cum se arată mai jos:

Acest repo este destul de util și arată toate comportamentele UIKitDynamics în acțiune. De asemenea, oferă cod sursă pentru a juca cu fiecare comportament. Aceasta, în opinia mea, ar trebui să servească drept o listă extinsă de modalități de a realiza animații iOS pe vizualizări!

În secțiunea următoare, vom arunca o privire scurtă asupra instrumentelor care ne vor ajuta în măsurarea performanței animațiilor. De asemenea, ți-aș recomanda să te uiți la modalități de optimizare a versiunii Xcode, deoarece va economisi o cantitate imensă din timpul de dezvoltare.

Tuning de performanță

În această secțiune, vom analiza modalități de măsurare și reglare a performanței animațiilor iOS. În calitate de dezvoltator iOS, este posibil să fi folosit deja instrumente Xcode, cum ar fi pierderile de memorie și alocările pentru a măsura performanța aplicației generale. În mod similar, există instrumente care pot fi folosite pentru a măsura performanța animațiilor.

Instrument Core Animation

Încercați instrumentul Core Animation și ar trebui să puteți vedea FPS-ul pe care îl oferă ecranul aplicației dvs. Aceasta este o modalitate excelentă de a măsura performanța/viteza oricărei animații redate în aplicația dvs. iOS.

Desen

FPS este mult redus în aplicația care afișează conținut greu, cum ar fi imagini cu efecte precum umbre. În astfel de cazuri, în loc să atribuiți imaginea direct proprietății imaginii UIImageView , încercați să desenați imaginea separat într-un context folosind API-urile Core Graphics. Acest lucru reduce excesiv timpul de afișare a imaginii prin efectuarea logicii de decompresie a imaginii în mod asincron atunci când este realizată într-un fir separat în loc de firul principal.

Rasterizare

Rasterizarea este un proces folosit pentru a stoca în cache informațiile complexe ale straturilor, astfel încât aceste vizualizări să nu fie redesenate ori de câte ori sunt redate. Redenarea vizualizărilor este cauza majoră a reducerii FPS și, prin urmare, cel mai bine este să aplicați rasterizarea vizualizărilor care vor fi reutilizate de mai multe ori.

Încheierea

Pentru a încheia, am rezumat și o listă de resurse utile pentru animațiile iOS. Puteți găsi acest lucru foarte util atunci când lucrați la animații iOS. În plus, s-ar putea să găsiți acest set de instrumente de proiectare util ca pas (de proiectare) înainte de a explora animații.

Sper că am reușit să acopăr cât mai multe subiecte despre animațiile iOS. Dacă este ceva ce am ratat în acest articol, vă rugăm să-mi spuneți în secțiunea de comentarii de mai jos și aș fi bucuros să fac adăugarea!