după lansarea iOS 7 (și iOS 8), efectele de animație și mișcare au devenit esențiale pentru proiectarea aplicațiilor atât de la Apple, cât și de la dezvoltatorii 3rd party. iOS 7 a introdus un design plat, minimal pentru aplicații, ceea ce a dus inevitabil la unele aplicații care au o interfață de utilizare similară. Pentru a distinge aplicațiile lor de alte aplicații, dezvoltatorii au folosit funcții precum animații și efecte de mișcare pentru a-și face aplicațiile să iasă în evidență.

nu numai că animațiile sunt folosite pentru a vă separa aplicația, dar pot îmbunătăți experiența generală a utilizatorului aplicației dvs. Pentru exemple excelente despre modul în care animațiile sunt utilizate pentru a îmbunătăți UX, ar trebui să vă uitați la modul în care Apple folosește animațiile în aplicațiile lor. De exemplu, în aplicația Fotografii, atunci când selectați o fotografie dintr-o colecție, fotografia se extinde de la cea selectată și, la închiderea acesteia, se micșorează înapoi la fotografia selectată. Acest lucru se adaugă la navigarea aplicației prin faptul că vă permite să știți exact unde ați fost, dacă Răsfoiți multe imagini.

hârtia Facebook folosește, de asemenea, animații frumos pentru a adăuga la experiența generală a utilizatorului aplicației. Selectați un articol pentru a citi de flipping-l. Această acțiune, faptul că articolul se extinde din versiunea sa de miniatură, sugerează că, făcând opusul, adică răsturnând articolul în jos, l-ar micșora înapoi la miniatura sa. Aici, animația este folosită pentru a transmite modul în care funcționează aplicația și chiar și un utilizator pentru prima dată al aplicației va putea în curând să facă presupuneri cu privire la utilizarea acesteia și să-și dea seama de navigarea sa fără a avea nevoie de un tutorial.

nu numai că animațiile adaugă experienței utilizatorului aplicației, dar ar putea fi ceea ce încântă și impresionează utilizatorii dvs., garantând utilizarea repetată în loc să dezinstalați aplicația pentru una mai bună din App Store.

există numeroase modalități de a include animații în aplicațiile dvs., unele dintre ele fiind prin utilizarea dinamicii UIKit, animații strat, tranziții controler de vizualizare sau prin utilizarea unei biblioteci terță parte, cum ar fi biblioteca Pop Facebook sau cadrul JNWSpringAnimation.

în acest tutorial ne vom uita la animații vizualizare simplă. Puteți descărca proiectul starter, care este o singură aplicație de vizualizare cu o vizualizare de tabel care listează exemplele prezentate în tutorialul tutorial. Voi folosi acest lucru când vom ajunge la partea de exemple a tutorialului, în loc să începem de la zero.

tutorialul începe cu un rezumat al API-urilor utilizate pentru animarea vizualizărilor și se încheie cu câteva exemple care arată utilizarea unora dintre API-uri într-o aplicație.

animații de vizualizare de bază

crearea animațiilor pe vizualizările dvs. este o chestiune de schimbare a proprietăților pe ele și de a lăsa UIKit să le animeze automat. Proprietățile pe care le schimbăm sunt cele marcate Animatable.

următoarea listă prezintă proprietățile animabile.

  • centru
  • alfa
  • cadru
  • limite
  • transforma
  • backgroundColor
  • contentStretch

veți găsi că toate animațiile implică o schimbare a uneia sau mai multor proprietăți de mai sus.

pentru animații simple de vizualizare, UIKit oferă următoarele API-uri care pot fi utilizate pentru a anima vizualizări pe ecran.

primul are doi parametri – o valoare pentru durata ÎN SECUNDE a animației și o închidere în care specificați proprietățile pe care doriți să le modificați. UIKit va lua starea inițială a vizualizării și va crea o tranziție lină de la acea stare la starea finală în funcție de ceea ce ați specificat în închiderea animațiilor.

celelalte două API-uri sunt similare cu primele, dar iau parametri suplimentari care adaugă mai multă configurație animației. Al doilea are o închidere de finalizare pe care o puteți utiliza fie pentru a specifica o altă animație pe care doriți să o faceți după prima, fie puteți face o curățare a interfeței de utilizare, de exemplu, eliminând o vizualizare din ierarhia de vizualizare odată ce o altă vizualizare este animată pe scenă.

al treilea API are încă doi parametri – întârzierea, care este timpul să așteptați înainte de începerea animației și opțiunile, o constantă UIViewAnimationOptions, care indică modul în care doriți să efectuați animațiile. Următoarele arată opțiunile disponibile.

animațiile de primăvară

animațiile de primăvară încearcă să modeleze comportamentul unui izvor din viața reală, în sensul că, atunci când o vedere este mutată dintr-un punct în altul, va sări/oscila spre sfârșit înainte de a se așeza în poziție.

mai jos este blocul de metode pe care îl folosim pentru animațiile de primăvară.

  • UIView.animateWithDuration(_:, întârziere:, usingSpringWithDamping:, initialSpringVelocity:, opțiuni:, animații:, finalizare:)

cele de mai sus sunt similare cu metodele pe care le – am analizat mai devreme, cu excepția a doi parametri noi-usingSpringWithDamping și initialSpringVelocity. Amortizarea este o valoare de la 0 la 1 care determină cât de mult vizualizarea sare spre sfârșitul animației. Cu cât valoarea este mai aproape de 1, cu atât va fi mai puțin bouncy. initialSpringVelocity după cum spune și numele, determină viteza inițială a animației. Aceasta determină cât de puternică începe animația. Dacă doriți să înceapă viguros, apoi setați o valoare mai mare, dacă doriți o animație lină, atunci puteți seta valoarea la 0.

animații Keyframe

animații Keyframe vă permit să setați diferite etape ale unei animații. Puteți grupa diferite animații care împărtășesc unele proprietăți comune, dar totuși le puteți controla separat.

în loc de o animație care se mișcă doar de-a lungul unei căi, UIKit va executa diferitele etape ale animației.

API-urile de animație Keyframe sunt după cum urmează.

cele două metode de mai sus sunt utilizate împreună, a doua fiind imbricată în închiderea animațiilor primului.

prima metodă stabilește configurația generală a animației, cum ar fi cât durează, întârzierea și opțiunile acesteia. Apoi definiți una sau mai multe dintre a doua metodă(cadrele) în interiorul închiderii animațiilor pentru a seta diferitele etape ale animației.

timpul de pornire relativ și durata relativă a fiecărui cadru este o valoare cuprinsă între 0 și 1 care exprimă timpul procentual în durata totală a animației.

tranziții vizualizare

tranziții vizualizare sunt utilizate atunci când doriți să adăugați o nouă vizualizare în ierarhia vizualizare sau să eliminați o vizualizare din ierarhia vizualizare.

API-urile care sunt utilizate pentru a crea tranziții de vizualizare sunt

utilizați primul pentru a introduce o vizualizare în ierarhia de vizualizare. Metoda ia parametri similari așa cum am văzut în celelalte metode de animație.

cel de-al doilea este folosit pentru a lua o vizualizare din ierarhia vizualizării și pentru a plasa o nouă vizualizare în locul ei.

Exemple

vom analiza acum câteva exemple care utilizează unele dintre apelurile API de mai sus pentru a anima vizualizări în proiectul starter dat.

exemplul I

Dacă executați proiectul, veți vedea o vizualizare de tabel care listează exemplele prin care vom lucra. Selectați exemplul I din listă și ar trebui să vedeți un ecran de conectare al unei aplicații cu câmpurile de nume de utilizator și parolă și butonul de conectare.

dorim ca acestea să fie animate pe ecran atunci când începe aplicația.

pentru a începe, vom ascunde vizualizările de la vedere atunci când apare pentru prima dată vizualizarea. Înainte de aspectul automat, aceasta ar fi fost o chestiune simplă de a schimba poziția vizualizării specifice în cod, dar din moment ce setăm constrângeri de aspect automat asupra vizualizărilor din fișierul storyboard, va trebui să schimbăm constrângerile din cod, ceea ce va schimba poziția vizualizării.

în primul rând, trebuie să obținem o referință a constrângerilor pe care le vom schimba. Deschideți fișierul storyboard. Localizați următoarele constrângeri în scena exemplul I.

deschideți editorul asistent și asigurați-vă că este Exempluliviewcontroller.swift care apare lângă storyboard pe ecranul divizat. Trageți din Centrul X Alignment – View – Username constrângere la clasa ExampleIViewController. Creați o priză numită centerAlignUsername. Faceți același lucru pentru center X Alignment – View – Password și setați numele acestuia la centerAlignPassword. De asemenea, creați o priză pentru butonul de conectare numit loginButton și o acțiune pentru același buton și denumiți-l autentificare. Asigurați-vă că setați tipul acțiunii la UIButton. Ar trebui să aveți următoarele în cod.

1
2
3
4
5
6
7

@IBOutlet slab var centerAlignUsername: NSLayoutConstraint!
@ IBOutlet slab var centerAlignPassword: NSLayoutConstraint!
@IBOutlet slab var loginButton: UIButton!
@IBAction func login (expeditor: UIButton) {
}

în Exempluiviewcontroller.swift adaugă următoarea metodă care este apelată înainte ca vizualizarea să fie prezentată pe ecran.

aceasta mută câmpurile de nume de utilizator și parolă doar din vedere și setează valoarea alfa a butonului la 0, ceea ce îl face invizibil.

adăugați următoarea metodă care se numește dreapta atunci când apare vizualizarea.

aici folosim UIView.animateWithDuration () metoda pe care am văzut-o mai devreme. Includem Uiviewanimationopțiuni.Opțiunea CurveEaseOut care face ca animația să înceapă rapid, apoi să încetinească la sfârșit. Puteți experimenta diferite opțiuni aici. Faceți clic pe comandă UIViewAnimationOptions pentru a vedea toate opțiunile disponibile.

animația durează 0,5 secunde și începe imediat. Aveți libertate pe durata, dar nu ar trebui să setați un număr atât de mare încât să vă enerveze utilizatorii atunci când animațiile din aplicația dvs. par să dureze prea mult. În mod normal, durata este setată între 0,5 și 0,7 secunde, dar așa cum am spus, acest lucru nu este stabilit în piatră și aveți libertatea de a-l seta la ceea ce vi se pare potrivit.

animația face exact opusul a ceea ce am făcut în viewWillAppear(). layoutIfNeeded () este folosit pentru a stabili punctele de vedere imediat acestea sunt schimbate. Dacă nu-l include, nu veți vedea le obține animat pe ecran, în schimb ele vor fi afișate doar în poziția lor finală. Rulați aplicația și ar trebui să vedeți următoarele.

cele de mai sus arată mai interesant decât o prezentare statică, dar vizualizările animate în același timp nu creează un efect atât de mare. Modificați metoda așa cum se arată mai jos.

rulați aplicația și animația rezultată are vizualizările animate pe ecran în momente diferite. Privind Codul, puteți vedea că după primul bloc de animație, am stabilit o întârziere pe cele ulterioare.

în ecranele de conectare, când autentificarea eșuează, există de obicei o animație care indică utilizatorului că autentificarea a eșuat. Acest lucru se face uneori ca o scuturare a câmpurilor de text sau a butonului de conectare și un mesaj care permite utilizatorului să știe că autentificarea a eșuat. Vom adăuga un astfel de efect asupra butonului de conectare folosind arcuri. Modificați funcția login () așa cum se arată.

cele de mai sus modifică dimensiunea butonului de conectare atunci când este apăsat și animă acțiunea cu o animație de primăvară, care va determina lățimea butonului să se extindă și să sară puțin la sfârșit înainte de a se stabili.

Joacă-te cu valoarea de amortizare. Dacă îl setați la 1, Butonul se va extinde, fără a sări la sfârșit. De asemenea, puteți utiliza aceeași metodă în câmpurile Nume de utilizator și parolă. În loc să-i facă să vină pe ecran și să se oprească în loc la sfârșit, să fie ca niște primăvară și să sară puțin înainte de a se așeza.

exemplul II

în aplicația dvs., poate fi necesar să înlocuiți automat imaginea de fundal a unei vizualizări atunci când se întâmplă o acțiune. Ai putea face acest lucru într-un mod în care o imagine înlocuiește imediat un alt pe punctul de vedere, sau ai putea estompa încet pentru a crea o tranziție frumos. Vom crea acest efect aici. Deschideți ExampleIIViewController.swift și adăugați următoarele.

aici creăm o vizualizare a imaginii și o adăugăm la vizualizarea principală. Apoi numim imageFadeIn () care creează o a doua vizualizare cu o imagine diferită. Adăugăm această vizualizare deasupra primei vizualizări a imaginii și setăm alfa la 0. În blocul de animație, îi animăm valoarea alfa, făcându-l vizibil. Apoi folosim o închidere de finalizare pentru a seta imaginea vizualizării imaginii la a doua imagine și eliminăm a doua vizualizare a imaginii din ierarhia vizualizării, deoarece nu mai este necesară. Am adăugat o întârziere lungă, astfel încât animația să nu se întâmple chiar în momentul în care selectăm exemplul II din vizualizarea tabelului. Durata este, de asemenea, un pic mai lungă, astfel încât să putem vedea ce se întâmplă în demo.

următorul este efectul.

exemplul III

în continuare ne vom uita la animațiile keyframe. Deschideți Examplelliviewcontroller.swift și adăugați următoarea variabilă și funcții în fișier. Am comentat codul pentru a explica fiecare pas.

în viewDidLoad() apelați funcția createView (). Adăugați următoarele în partea de jos a viewDidLoad().

1
createView()

la rularea aplicației și selectarea exemplului III din vizualizarea tabelului, ar trebui să vedeți o vizualizare roșie cu o vizualizare a imaginii în partea de sus și un buton în mijloc.

vrem să avem punctul de vedere (pe care îl voi numi alertView de acum înainte) să se micșoreze în dimensiune și să cadă în jos din vedere.

când am creat butonul, Am adăugat un ascultător. Când butonul este apăsat, dismissAlert() este numit. Modificați funcția așa cum se arată.

în codul de mai sus, creăm cadre care reprezintă ceea ce ne dorim pentru cele două etape ale animării vizualizării. smallFrame se micșorează la jumătate din dimensiunea alertView, menținând punctul central și finalFrame are o poziție în partea de jos a ecranului, din vedere.

folosim o animație Keyframe cu două cadre cheie. Primul setează cadrul alertView la smallFrame și al doilea la finalFrame. Rezultatul va fi că alertView se va micșora la jumătate din dimensiunea sa și apoi va cădea din vedere. Observați că am pus un număr atât de mare pentru durata – 4 secunde. Puteți schimba acest lucru, am vrut doar animație rulează în slow-motion pentru demo. Rulați aplicația și selectați exemplul III.

animația nu este chiar ceea ce ne așteptam. Puteți vedea alertView roșu animat așa cum era de așteptat, dar amploarea copiilor săi nu se schimbă. Schimbarea cadrului părintelui, nu schimbă automat cadrele copiilor săi.

vom folosi o caracteristică introdusă în iOS 7 numită UIView snapshots pentru a repara animația. Acest lucru vă permite să faceți un instantaneu al unui UIView împreună cu ierarhia sa și să îl redați într-un nou UIView.

în dismutalert() adăugați următoarele chiar înainte de codul de animație Keyframe.

1
2
3
4

să instantaneu = alertView.snapshotViewAfterScreenUpdates (fals)
instantaneu.cadru = alertView.cadru
vedere.addSubview (instantaneu)
alertView.removeFromSuperview()

aici, creăm o vizualizare instantanee și o adăugăm la vizualizarea principală. Apoi eliminăm alertView din vizualizare, deoarece instantaneul îl va înlocui.

înlocuiți animația cadrului cheie cu următoarele.

rulați aplicația și la atingerea respingerii, vizualizarea(instantaneu, într-adevăr) ar trebui să animeze așa cum era de așteptat.

exemplul IV

am analizat modul în care puteți anima vizualizări simple. În acest exemplu, vom analiza modul în care puteți anima o vizualizare a tabelului.

dacă selectați exemplul IV din vizualizarea tabel, veți găsi o altă vizualizare tabel cu o listă de elemente în ea. Când este prezentată vizualizarea tabelului, elementele din listă sunt deja poziționate pe tabel. Vrem să le animăm pe Vizualizare pentru a crea un efect mai interesant.

Deschideți ExampleIVViewController.swift și adăugați următoarele metode.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

suprascrie func viewWillAppear(animat: Bool) {
animateTable()
}
func animateTable () {
tableView.reloadData()
să celule = tableView.visibleCells ()
să tableHeight: CGFloat = tableView.bounds.Dimensiune.înălțime
pentru i în celule {
să celulă: UITableViewCell = i ca UITableViewCell
celulă.transform = cgaffinetransformmaketranslation (0, tableHeight)
}
var index = 0
pentru a în celule {
să celulă: UITableViewCell = A ca UITableViewCell
UIView.animateWithDuration(1.5, întârziere: 0.05 * dublu (index), usingSpringWithDamping: 0.8, initialSpringVelocity: 0, opțiuni: zero, animații: {
celulă.transform = CGAffineTransformMakeTranslation(0, 0);
}, finalizare: zero)
index += 1
}
}

aici, când apare vizualizarea, se apelează funcția animateTable (). Reîncărcăm datele de vizualizare a tabelului și bucla prin celulele care sunt vizibile în prezent pe ecran și le mutăm pe fiecare în partea de jos a ecranului. Apoi repetăm peste toate celulele pe care le-am mutat în partea de jos a ecranului și le animăm înapoi în poziție cu o animație de primăvară.

rulați aplicația și ar trebui să vedeți următoarele.

concluzie

am analizat diferite API-uri pe care le puteți utiliza pentru a adăuga animații la vizualizările aplicației. Acesta nu este un ghid exhaustiv despre animație în iOS, dar folosind API-urile simple pe care le-am analizat, puteți crea diverse animații în aplicațiile dvs. Pentru a vă scufunda mai departe în animațiile iOS, puteți privi dinamica UIKit, animațiile stratului, tranzițiile controlerului de vizualizare și chiar efectele de mișcare. Ai putea uita, de asemenea, la biblioteci terțe părți, cum ar fi Facebook Pop și cadru JNWSpringAnimation care ar putea ajuta să construiască animații complicate mai ușor.

puteți descărca proiectul finalizat aici.

Lasă un răspuns

Adresa ta de email nu va fi publicată.