Share
Acest sfat rapid iOS vă va învăța cum să animați cu ușurință obiecte cu UIKit. Indiferent dacă aveți nevoie de meniuri de alunecare sau de maimuțe care zboară, este ușor să le faceți, iar acest sfat vă va arăta cum!
Animația în aplicațiile mobile poate fi o caracteristică foarte importantă. Dintr-un punct de vedere practic, UX poate permite utilizatorului să știe că ceva a fost schimbat sau mutat. Dintr-un punct de vedere mai distractiv, acesta poate mișca sprite de joc sau hărți de țigle în jurul ecranului, tragând utilizatorul într-o experiență interactivă pe deplin.
Din fericire, este foarte ușor să obțineți obiecte UIView care se deplasează în aplicațiile dvs. iOS și nici măcar nu trebuie să vă faceți griji cu privire la calcularea ecuațiilor geometrice criptice sau a altor astfel de voodoo!
Înainte de a intra în animația reală, trebuie să fim familiarizați cu proprietățile de animație de bază ale obiectelor UIView. Următoarea este o listă cu toate proprietățile de iOS 5.1:
Nu avem suficient spațiu în acest sfat rapid pentru a trece peste toate aceste proprietăți, dar vom analiza câteva dintre cele mai comune: centru, alfa și transformare.
[Animații animateWithDuration: animații NSTimeInterval: animații ^ (void)]
În forma sa cea mai de bază, cele de mai sus este tot ce aveți nevoie pentru a anima o vizualizare UIV. Este destul de simplu - treceți o durată (cât durează animația) și apoi proprietățile care urmează să fie animate (valorile pe care doriți să le aveți la sfârșitul animației pentru proprietățile UIView).
Pentru un exemplu rapid, dacă avem un UIView numit "theView" și dorim să-l facem să se estompeze până când este invizibil în timp de 0,5 secunde, sunăm:
[UIView animateWithDuration: 0.5f animații: ^ [theView setAlpha: 0.0f]; ];
Și am terminat! Durata animației este stabilită de animateWithDuration: parametru și un bloc Objective-C de acțiuni de animație specifice este furnizat la animații: parametru. Este atât de ușor!
Adesea, vom dori să facem ceva după finalizarea animației. Vom lua un joc de exemplu. Să presupunem că dorim să arătăm unui jucător că au finalizat cu succes o acțiune. Vom face acest lucru făcând o stea să zboare în colțul din stânga al ecranului și apoi un punct va fi adăugat la scorul lor. Există două lucruri pe care le vom dori să le facem după terminarea zborului:
Pentru a face acest lucru, vom numi metoda noastră de animație cu un bloc de completare, după cum urmează:
[Animații animateWithDuration: animații NSTimeInterval: finalizare animații ^ (void): ^ (BOOL finalizat) finalizare];
De exemplu, dacă avem un UIImageView (adică o subclasă de vizualizare UIV) numită "starImageView", cu o imagine a unei stele și cu o anumită variabilă numită "puncte", am sunat:
[UIView animateWithDuration: 0.7f animații: ^ [starView setCenter: CGPointMake (0, 0)]; completare: ^ (BOOL terminat) [starView removeFromSuperView]; puncte ++; ];
Merită să remarcăm că va trebui să re-adăugăm "starView" ca o subiectivă a UIView-ului nostru dacă dorim să reluăm această animație. Puteți vedea acest lucru în exemplul de cod furnizat ca atașament la acest tutorial Mobiletuts +.
În sfârșit, există o metodă care ne va permite să definim mai detaliat procesul nostru de animație, inclusiv o întârziere înainte de începerea animației și stabilirea tipului de "relaxare" pentru animația noastră. Aceste tipuri de "relaxare" pot fi găsite (și descrise) în fișierul antet UIView.h ca enums:
typedef enum UIViewAnimationCurveEaseInOut, // încet la început și la sfârșit UIViewAnimationCurveEaseIn, // lent la început UIViewAnimationCurveEaseOut, // lent la sfârșit UIViewAnimationCurveLinear UIViewAnimationCurve;
Vă încurajez să jucați cu aceștia, introducându-i în parametrul "opțiuni" al următoarei metode de animație:
[UView animateWithDuration: (NSTimeInterval) întârziere: (NSTimeInterval) opțiuni: (UIViewAnimationOptions) animații: ^ (void) completarea animațiilor: ^ (BOOL terminat) finalizare];
Și din nou, folosind exemplele anterioare combinate, vom întârzia animația noastră cu 0,1 secunde, apoi vom începe să ne mișcăm (încet la început, apoi accelerați și apoi mergeți încet din nou la sfârșit). De asemenea, în timp ce ne mișcăm imaginea, vom scădea la 0% opacitate. În cele din urmă, după terminarea animației, vom adăuga un punct la scorul nostru și vom elimina imaginea din UIView.
[UIView animateWithDuration: 0.6f întârziere: 0.1f opțiuni: UIViewAnimationCurveEaseInOut animații: ^ [starView setCenter: CGPointMake (0, 0)]; [starView setAlpha: 0.0f]; completare: ^ (BOOL terminat) [starView removeFromSuperview]; puncte ++; ];
Dupa cum puteti vedea, este foarte usor sa iti animati UIView-urile, asa ca ia ceva timp sa te joci cu diferitele proprietati UIView animabile si sa vezi ce lucruri noi poti descoperi!
Pentru practici suplimentare, utilizați următoarea comandă pentru a roti imaginea:
[starView setTransform: CGAffineTransformRotate (starView.transform, 90.0f)];
Acum, vedeți ce alte lucruri sunt posibile cu animații pentru UIViews! Și amintiți-vă, există mai multe subclase ale UIView care pot fi animate cu aceleași metode și proprietăți, cum ar fi (dar nu se limitează la acestea):
Imaginea stea utilizată în acest tutorial a fost lansată cu o licență GNU / GPL de la FindIcons
Accentsconagua