iOS SDK Tehnici avansate UIImage

În acest tutorial, vom examina unele dintre caracteristicile avansate și modelele de utilizare ale celor umili UIImage clasă în iOS. Până la sfârșitul acestui tutorial, veți fi învățat următoarele: cum să creați imagini în cod, cum să creați imagini redimensionabile pentru elementele UI, cum ar fi inscripționările și cum să creați imagini animate.


Prezentare generală teoretică

Dacă ați avut vreodată să afișați o imagine în aplicația dvs. iOS, probabil vă cunoașteți UIImage. Este clasa care vă permite să reprezentați imagini pe iOS. Aceasta este de departe cea mai obișnuită metodă de utilizare UIImage și este destul de simplu: aveți un fișier de imagine într-unul din mai multe formate de imagine standard (PNG, JPEG, BMP etc.) și doriți să îl afișați în interfața aplicației. Instigi un nou UIImage instanță prin trimiterea mesajului de clasă imageNamed:. Dacă aveți o instanță UIImageView, vă puteți seta imagine proprietate la UIImage exemplu, apoi puteți să vă lipiți în interfața dvs. prin afișarea imaginii pe ecran:

 UIImage * img = [UIImage imageNamed: numele fișierului]; UIImageView * imgView = [[UIImageView aloca] initWithImage: img]; // Setați cadrul, etc ... [self.view addSubview: imgView];

De asemenea, puteți efectua echivalentul procedurii de mai sus direct în Interface Builder.

Există și alte modalități de a instanțiza o imagine, cum ar fi de la o adresă URL sau de la o imagine arhivată care a fost stocată ca o imagine NSData tip, dar nu ne vom concentra pe acele aspecte din acest tutorial.

Înainte de a vorbi despre crearea de imagini în cod, amintiți-vă că la cel mai primitiv nivel, știm ce reprezintă o imagine 2D: o matrice bidimensională de valori ale pixelilor. Regiunea de memorie reprezentând matricea pixelilor pentru o imagine este deseori menționată ca a ei bitmap. Acest lucru este uneori util să vă păstrați în minte atunci când faceți considerații de memorie. Cu toate acestea, este important să se înțeleagă că: a UIImage este într-adevăr o abstractizare la nivel mai înalt a unei imagini decât cea a unei matrice pixeli și una care a fost optimizată în funcție de cerințele și scenariile de utilizare ale unei platforme mobile. Deși teoretic este posibil să creați o imagine populând o întreagă matrice de pixeli cu valori sau să ajungeți într-o imagine bitmap a unei imagini existente și să citiți sau să modificați valoarea unui pixel individual, este destul de incomod să faceți acest lucru pe iOS și nu este într-adevăr facilitat de API. Cu toate acestea, deoarece majoritatea dezvoltatorilor de aplicații rareori găsesc nevoia reală de a mizeria cu imagini la nivel de pixeli, de obicei nu este o problemă.

Ce UIImage (sau mai general, UIKit și Core Graphics) facilitează dezvoltatorul să facă este să creeze o imagine nouă prin compunerea imaginilor existente în moduri interesante sau să genereze o imagine prin rasterizarea unui desen vectorial construit folosind UIKit„s UIBezierPath clasa sau graficul principal CGPath ... funcții. Dacă doriți să scrieți o aplicație care permite utilizatorului să creeze un colaj de imagini, este ușor de făcut UIKit și UIImage. Dacă ați dezvoltat, să zicem, o aplicație de desenare gratuită și doriți să lăsați utilizatorul să-și salveze creația, atunci cea mai simplă abordare ar implica extragerea unei UIImage din contextul desenului. În prima secțiune a acestui tutorial, veți afla exact cum pot fi realizate ambele idei!

Este important să rețineți că a UIImage construit în acest fel nu este diferit de o imagine obținută prin deschiderea unei imagini din albumul foto sau descărcarea de pe Internet: poate fi salvată în arhivă sau încărcată în albumul foto sau afișată într-o UIImageView.

Modificarea imaginii este un tip important de manipulare a imaginii. Evident, doriți să evitați mărirea unei imagini, deoarece aceasta face ca calitatea și claritatea imaginii să sufere. Cu toate acestea, există anumite scenarii în care sunt necesare imagini redimensionabile și există, de fapt, moduri sensibile de făcut astfel încât să nu degradeze calitatea imaginii. UIImage se ocupă de această situație, permițând imaginile care au o zonă interioară redimensionabilă și "inserții de margine" pe marginea imaginii care redimensionează într-o anumită direcție sau nu redimensionează deloc. Mai mult, redimensionarea poate fi realizată fie prin tiglarea fie prin întinderea porțiunilor redimensionabile pentru două efecte oarecum diferite care pot fi utile în diferite situații.

Cea de-a doua parte a implementării va arăta o implementare concretă a acestei idei. Vom scrie o clasă mică, care poate afișa orice sumă de text într-o imagine redimensionabilă!

În cele din urmă, vom vorbi puțin despre animarea imaginilor UIImage. Așa cum probabil puteți ghici, aceasta înseamnă "a juca" o serie de imagini în succesiune, dând naștere la iluzia de animație asemănătoare animațiilor GIF pe care le vedeți pe Internet. Deși acest lucru poate părea un pic limitat, în situații simple UIImagesuportul pentru imagini animate poate fi exact ceea ce aveți nevoie și tot ceea ce este nevoie este o serie de linii de cod pentru a intra în funcțiune. Asta vom urmări în secțiunea a treia și finală a acestui tutorial! E timpul să ne ridicăm mânecile și să mergem la muncă!


1. Pornirea unui nou proiect

Creați un nou proiect iOS în Xcode, cu "Cerere goală"șablon "UIImageFun". Verificați opțiunea pentru numărarea automată a referințelor, dar debifați opțiunile pentru datele de bază și testele de unitate.

Crearea unui nou proiect Xcode

O notă mică, înainte de a continua: acest tutorial utilizează mai multe seturi de imagini și pentru a obține acestea trebuie să faceți clic pe unde se afișează "Descărcați fișierele sursă" în partea de sus a acestei pagini. După descărcarea și dezarhivarea arhivei, trageți folderul numit "Imagini" în Project Navigator - fila din stânga din panoul din stânga în Xcode. Dacă panoul din stânga nu este vizibil, apăsați combinația de taste ⌘ + 0 pentru a fi vizibilă și pentru a asigura că fila din stânga - a cărei pictogramă arată ca un dosar - este selectată.

Glisați și plasați folderul Imagini în proiectul dvs. Asigurați-vă că "Copiați articolele în dosarul grupului de destinație (dacă este necesar)"opțiunea din caseta de dialog este bifată". Asigurați-vă că fișierele sunt copiate în folderul proiectului

Fișierul descărcat conține, de asemenea, proiectul complet Xcode cu imaginile deja adăugate la proiect, în cazul în care rămâneți blocați undeva.


2. Crearea unei imagini în cod

Creați un fișier nou pentru o clasă Obiectiv-C, sunați-l ViewController și să o facă o subclasă de UIViewController. Asigurați-vă că opțiunile legate de iPad și XIB sunt lăsate neconfirmate.

Faceți un nou controler de vizualizare

Înlocuiți tot codul în ViewController.m cu urmatoarele:

 #import "ViewController.h" @interface ViewController () UIImage * img; UIImageView * iv; NSMutableArray * ivs;  @end @implementation ViewController - (void) viewDidLoad [super viewDidLoad]; // (1) Crearea unui context bitmap, umplând-o cu galben ca "fundal" culoare: CGSize size = CGSizeMake (self.view.bounds.size.width, self.view.bounds.size.height); UIGraphicsBeginImageContextWithOptions (CGSizeMake (size.width, size.height), YES, 0.0); [[UICcolor galbenColor] setFill]; UIRectFill (CGRectMake (0, 0, mărimea lățimii, mărimea înălțime)); // (2) Creați un cerc printr-o cale bezier și stroking + umplându-l în contextul bitmap: UIBezierPath * bezierPath = [UIBezierPath bezierPathWithArcCenter: CGPointMake (size.width / 2, size.height / 2) raza: 140 startAngle: 0 endAngle: 2 * M_PI în sensul acelor de ceasornic: YES]; [[UICcolor negruColor] setStroke]; bezierPath.lineWidth = 5,0; [cursa cu bezierPath]; [[UICoror redColor] setFill]; [umplerea cu bezierPath]; // (3) Crearea unei game de imagini: NSArray * rocks = @ [[UIImage imageNamed: @ "rock1"], [UIImage imageNamed: @ "rock2"], : @ "rock4"], [UIImage imageNamed: @ "rock5"], [UIImage imageNamed: @ "rock6"], [UIImage imageNamed: @ "rock7"], : @ "rock9"]]; // (4) Desenarea rocilor într-o buclă, fiecare aleasă aleatoriu din setul de imagini și trasată la o poziție aleatorie într-un model circular: pentru (int i = 0; i < 100; i++)  int idx = arc4random() % rocks.count; NSLog(@"idx = %d", idx); int radius = 100; int revolution = 360; float r = (float)(arc4random() % radius); float angle = (float)(arc4random() % revolution); float x = size.width/2 + r * cosf(angle * M_PI/180.0); float y = size.height/2 + r * sinf(angle * M_PI/180.0); CGSize rockSize = ((UIImage *)rocks[idx]).size; [rocks[idx] drawAtPoint:CGPointMake(x-rockSize.width/2, y-rockSize.height/2)];  // (5) Deriving a new UIImage instance from the bitmap context: UIImage *fImg = UIGraphicsGetImageFromCurrentImageContext(); // (6) Closing the context: UIGraphicsEndImageContext(); // (7) Setting the image view's image property to the created image, and displaying iv = [[UIImageView alloc] initWithImage:fImg]; [self.view addSubview:iv];  @end

Configurați delegatul aplicației pentru a utiliza o instanță de ViewController ca controler de vedere rădăcină prin înlocuirea codului în AppDelegate.m cu urmatoarele:

 #import "AppDelegate.h" #import "ViewController.h" @implementation Aplicație AppDelegate - (BOOL): aplicație (UIApplication *) didFinishLaunchingWithOptions: (NSDictionary *) launchOptions self.window = [UIWindow alloc] initWithFrame: mainScreen] limite]]; self.window.rootViewController = [[ViewController alloc] init]; auto.window.backgroundColor = [UICcolor whiteColor]; [auto.window makeKeyAndVisible]; reveniți DA;  @Sfârșit

Să examinăm codul viewDidLoad: unde se desfășoară toată acțiunea. Vom face referire la numerele din contextul codului.

  1. Vrem să începem prin desenarea unei imagini, ceea ce înseamnă că avem nevoie de o "pânză". În terminologia corectă, aceasta se numește a contextul imaginii (sau context bitmap). Noi creăm una prin apelarea UIGraphicsBeginImageContextWithOptions () funcţie. Această funcție are ca argumente a CGSize, pe care le-am setat la mărimea vizualizării controlerului nostru, ceea ce înseamnă întreg ecranul. BOOL spuneți-ne dacă contextul este opac sau nu. Un context opac este mai eficient, dar nu îl puteți "vedea". Din moment ce nu este nimic interesant sub contextul nostru, ne-am propus DA. Factorul de scalare, care este a pluti pe care le-am setat la 0.0 (o valoare care asigură scala specifică dispozitivului). În funcție de dacă dispozitivul are un afișaj Retina, factorul de scalare va fi setat la 2,0 sau respectiv 1,0. Voi vorbi puțin mai mult despre factorul de scară în scurt timp, dar pentru o discuție cuprinzătoare, vă voi îndruma la documentația oficială (în special, secțiunea "Puncte vs. Pixeli" din Desen și Ghid de imprimare pentru iOS).

    Odată ce creăm un context de imagine în acest fel, acesta devine context actual. Acest lucru este important pentru a trage cu UIKit, trebuie să avem un context de desen curent în care se face tot desenul implicit. Acum setăm o culoare de umplere pentru contextul curent și completați un dreptunghi cu mărimea întregului context.

  2. Acum creăm un UIBezierPath exemplu, în forma unui cerc, pe care îl îndemnăm cu un contur gros și umplem cu o culoare diferită. Aceasta încheie porțiunea de desen a creării imaginii noastre.

  3. Creăm o serie de imagini, fiecare imagine fiind instanțiată prin imageNamed: inițializatorul lui UIImage. Este important să observăm aici că avem Două seturi de imagini rock: rock1.png, rock2.png, ... și [email protected], [email protected], acesta fiind de două ori rezoluția primului. Una dintre marile trăsături ale lui UIImage este faptul că în timpul rulării imageNamed: metoda caută automat o imagine cu sufix @ 2x presupusă a fi de două rezoluții pe un dispozitiv Retina. Dacă unul este disponibil, acesta este folosit! Dacă imaginea sufixată este absentă sau dacă dispozitivul este non-Retina, este utilizată imaginea standard. Rețineți că nu specificăm sufixul imaginii în inițializator. Utilizarea imaginilor cu o singură și dublă rezoluție împreună cu scala dependentă de dispozitiv (ca rezultat al setării scară la 0.0) asigură faptul că dimensiunea reală a obiectelor de pe ecran va fi aceeași. Firește, imaginile Retinei vor fi mai clare datorită densității mai mari a pixelilor.
  4. Dacă vizualizați imaginile rock, veți observa că imaginile cu rezoluție dublă sunt rotite în raport cu cele cu o singură rezoluție. Am făcut acest lucru în scop, astfel încât să putem confirma că în timpul rulării imaginile de rezoluție corectă au fost folosite - asta-i tot. În mod normal, cele două seturi de imagini ar fi aceleași (în afară de rezoluție).
  5. Ne compunem imaginea într-o buclă prin plasarea unei pietre alese aleatoriu din setul nostru de imagini într-un punct aleatoriu (constrâns să locuiți într-un cerc) în fiecare iterație. UIImage metodă drawAtPoint: trage imaginea rock selectată la punctul specificat în contextul imaginii curente.
  6. Acum extragem un nou UIImage obiect din conținutul contextului actual al imaginii, prin apel UIGraphicsGetImageFromCurrentImageContext ().
  7. Apelul la UIGraphicsEndImageContext () sfârșește contextul actual al imaginii și curăță memoria.
  8. În cele din urmă, am setat imaginea pe care am creat-o ca imagine proprietatea noastră UIImageView și afișați-l pe ecran.

Construiți și alergați. Rezultatul ar trebui să arate după cum urmează, numai în mod diferit:

UIImage creat prin desen și compoziție

Prin testarea dispozitivelor Retina și non-Retina sau prin schimbarea tipului de dispozitiv în Simulator sub Hardware , puteți asigura că rocile sunt rotite cu una față de cealaltă. Încă o dată, am făcut doar acest lucru, astfel încât să putem confirma cu ușurință că setul corect de imagini va fi selectat în timpul rulării. În mod normal, nu ai nici un motiv să faci asta!

Pentru a relua - cu riscul de a elabora punctul - am creat o nouă imagine (a UIImage obiect) prin compunerea imaginilor pe care le avem deja pe un desen pe care l-am desenat.

Până la următoarea parte a implementării!


3. Imagini redimensionabile

Luați în considerare figura de mai jos.

O descriere (stânga), deconstruită pentru a arăta modul în care imaginea ar putea fi redimensionată în mod sensibil (dreapta)

Imaginea din stânga afișează un indicativ sau "Bula de dialog"similar cu cel observat în multe aplicații de mesagerie.Evident, am dori ca extensia să se extindă sau să se micșoreze în funcție de cantitatea de text din ea.Aș dori, de asemenea, să folosim o singură imagine din care să putem genera descrieri ale oricărei Dacă mărim întreaga descriere în mod egal în toate direcțiile, întreaga imagine devine pixelată sau neclară în funcție de algoritmul de redimensionare utilizat, dar rețineți modul în care a fost proiectată imaginea de tipărit., poate fi extinsă în anumite direcții fără pierdere de calitate prin simpla replicare (Tigla) pixeli pe măsură ce mergem. Formele de colț nu pot fi redimensionate fără a schimba calitatea imaginii, dar pe de altă parte, mijlocul este doar un bloc de pixeli de culoare uniformă, care se poate face orice dimensiune ne place. Partea superioară și cea inferioară pot fi întinse orizontal fără să piardă calitatea, iar partea stângă și cea dreaptă verticală. Toate acestea sunt prezentate în imaginea de pe partea dreaptă.

Din fericire pentru noi, UIImage are câteva metode pentru a crea imagini de dimensiuni reduse de acest tip. Cel pe care îl vom folosi este resizableImageWithCapInsets:. Aici "capacele de inserție"reprezintă dimensiunile colțurilor non-stretchable ale imaginii (începând de la marginea superioară și deplasându-se în sens invers acelor de ceasornic) și sunt încapsulate într-o struct de tip UIEdgeInsets compus din patru plutis:

 typedef struct float top, stânga, fund, dreapta;  UIEdgeInsets;

Figura de mai jos trebuie să clarifice ce reprezintă aceste numere:


Să exploatăm capacitatea de redimensionare UIImages pentru a crea o clasă simplă care ne permite să închidem orice sumă de text într-o imagine redimensionabilă!

Creeaza o NSObject subclasa numită Notă și introduceți codul următor Note.h și Note.m respectiv.

 #import  @interface Notă: NSObject @property (nonatomic, readonly) NSString * text; @property (nonatomic, readonly) UIImageView * noteView; - (id) initWithText: (NSString *) text fontSize: (float) fontSize notăChrome: (UIImage *) img edgeInsets: (UIEdgeInsets) insera maximumWidth: (CGFloat) latime topLeftCorner: (CGPoint) colț; @Sfârșit
 #import "Notă.h" @implementare Notă - (id) initWithText: (NSString *) text fontSize: (float) fontSize noteChrome: (UIImage *) img edgeInsets: (UIEdgeInsets) inscrie maximumWidth: (CGFloat) width topLeftCorner: ) colț if (self = [super init]) #define LARGE_NUMBER 10000 // doar un număr mare (dar arbitrar), deoarece nu vrem să impunem nici o constrângere verticală asupra dimensiunii notei noastre _text = [NSString stringWithString: text] ; CGSize computedSize = [text sizeWithFont: [UIFont sistemFontOfSize: fontSize] constrainedToSize: CGSizeMake (lățime, LARGE_NUMBER) lineBreakMode: NSLineBreakByWordWrapping]; UILabel * textLabel = [[UILabel alocare] init]; textLabel.font = [UIFont sistemFontOfSize: fontSize]; textLabel.text = auto.text; textLabel.numberOfLines = 0; // număr nelimitat de linii textLabel.lineBreakMode = NSLineBreakByWordWrapping; textLabel.frame = CGRectMake (insets.left, insets.top, computedSize.width, computedSize.height); _noteView = [[UIImageView alocare] initWithFrame: CGRectMake (corner.x, corner.y, textLabel.bounds.size.width + insets.left + insets.right, textLabel.bounds.size.height + insets.top + insets.bottom )]; _noteView.image = [img resizableImageWithCapInsets: intrări]; [_noteView addSubview: textLabel];  întoarce-te;  @Sfârșit

Metoda de inițializare pentru Notă, -initWithText: fontSize: noteChrome: edgeInsets: maximumWidth: topLeftCorner: ia mai mulți parametri, inclusiv șirul de text care va fi afișat, dimensiunea fontului, nota "crom" (care poate fi redimensionată UIImage care va înconjura textul), inscripționările acestuia, lățimea maximă a imaginii imaginii notei și colțul din stânga sus al cadrului notei.

Odată inițializată, Notă clasă' noteView proprietate (de tip UIImageView) este elementul de interfață cu utilizatorul pe care îl vom afișa pe ecran.

Implementarea este destul de simplă. Noi exploatează o metodă foarte utilă din NSString's categorie pe UIKit, sizeWithFont: constrainedToSize: lineBreakMode:, care calculează dimensiunea pe care un bloc de text o va ocupa pe ecran, având în vedere anumiți parametri. Odată ce am făcut acest lucru, vom construi o etichetă de text (UILabel) și să o umpleți cu textul furnizat. Luând în considerare dimensiunile încadrării și mărimea textului calculat, îi atribuim etichetei un cadru adecvat, precum și al nostru noteView„s imagine suficient de mare (folosind resizableImageWithCapInsets metoda), astfel încât eticheta se potrivește confortabil în partea superioară a zonei interioare a imaginii.

În figura de mai jos, imaginea din stânga reprezintă ceea ce ar arăta o notă tipică conținând câteva linii în valoare de text în ea.

Folosind cea mai mică imagine posibilă pentru a construi o imagine redimensionabilă

Rețineți că interiorul nu are nimic de interes. Putem de fapt "paria" imaginea la minim (după cum se arată în partea dreaptă), prin eliminarea tuturor pixelilor din interior cu software-ul de editare a imaginilor. De fapt, în documentația Apple recomandă ca pentru cea mai bună performanță, zona interioară ar trebui să fie acoperită cu 1 x 1 pixeli. Asta reprezintă imaginea mică amuzantă din partea dreaptă și asta este cea pe care o vom trece la noi Notă initializare. Asigurați-vă că a fost adăugat la proiectul dvs. ca squeezednote.png când ai târât Imagini pentru proiectul dvs..

În ViewController.m, introduceți #import "Note.h" declarație în partea de sus. Comentariul anterior viewDidLoad: formați și introduceți următoarele:

 - (vid) viewDidLoad [super viewDidLoad]; NSString * text1 = @ "Bună ziua!"; NSString * text2 = @ "Eu mă dimensionez în funcție de conținutul meu!"; NSString * text3 = @ "Text aleatoriu standard: Puneți-l la dispoziție pentru a vă ajuta să vă asigurați că aveți o experiență minimă în acest domeniu. În consecință, în cazul în care este vorba despre o altă persoană care are dreptul la libertatea de ședere, aceasta nu poate fi luată în considerație decât în ​​cazul în care aceasta nu este în drept. UIImage * noteChrome = [UIImage imageNamed: @ "squeezednote"]; UIEdgeInsetsinsideInsets = UIEdgeInsetsMake (37, 12, 12, 12); Notă * note1 = [[Notă alocată] initWithText: text1 fontSize: 25.0 notăChromă: notăChrome edgeInsets: edgeInsets maximumWidth: 300 topLeftCorner: CGPointMake (10, 10)]; Notă * note2 = [[Notă alocată] initWithText: text2 fontSize: 30.0 notăChromă: notăChrome edgeInsets: edgeInsets maximumWidth: 300 topLeftCorner: CGPointMake (200, 10)]; Notă * note3 = [[Notă alocată] initWithText: text3 fontSize: 16.0 notăChromă: notăChrome edgeInsets: edgeInsets maximumWidth: 300 topLeftCorner: CGPointMake (10, 200)]; [self.view addSubview: note1.noteView]; [self.view addSubview: note2.noteView]; [self.view addSubview: note3.noteView]; 

Pur și simplu creăm Notă obiecte cu o cantitate diferită de text. Construiți, rulați și observați cât de frumos este "cromul" din jurul notei, pentru a se potrivi textului în limitele sale.

O notă redimensionabilă

Din motive de comparație, iată ce ar arăta producția dacă "squeezednote.png"au fost configurate ca un" normal " UIImage instanțiată cu imageNamed: și redimensionate în mod egal în toate direcțiile.

Modificați nota necorespunzătoare

Desigur, nu vom folosi de fapt o imagine "minimală" precum "squeezednote", dacă nu folosim în primul rând imagini cu dimensiuni reduse, astfel încât efectul afișat în captura de ecran precedent este mult exagerat. Cu toate acestea, problema de estompare ar fi cu siguranță acolo.

În partea finală a tutorialului!


4. Imagini animate

Prin imaginea animată, înseamnă de fapt o secvență de imagini 2D individuale care sunt afișate succesiv. Aceasta este practic doar animația sprite care este folosită în majoritatea jocurilor 2D. UIImage are o metodă de inițializare animatedImageNamed: Durata: la care treceți un șir care reprezintă prefixul secvenței de imagini care urmează să fie animat, astfel încât imaginile dvs. să fie numite "robot1.png", "robot2.png", ..., "robot60.png", ar trebui să treci pur și simplu în șirul "robot" la această metodă. Durata animației este, de asemenea, trecută. Asta este destul de mult! Atunci când imaginea este adăugată la a UIImageView, animă continuu pe ecran. Să implementăm un exemplu.

Comentați versiunea anterioară de viewDidLoad: și introduceți următoarea versiune.

 - (vid) viewDidLoad [super viewDidLoad]; ivs = [array NSMutableArray]; img = [UIImage animatedImageNamed: @ "durata exploziei": 2,0]; UITapGestureRecognizer * atingeți = [[UITapGestureRecognizer alloc] initWithTarget: acțiune auto: @selector (explozie :); [self.view addGestureRecognizer: apăsați];  - (void) explozie: (UITapGestureRecognizer *) t CGPoint loc = [t locInView: self.view]; pentru (UIImageView * v în ivs) if ([v pointInside: [v convertPoint: loc dinView: self.view] withEvent: nil]) [ivs removeObject: v]; [v removeFromSuperview]; întoarcere;  UIImageView * v = [[UIImageView alocare] initWithImage: img]; v.center = loc; [ivs addObject: v]; [self.view addSubview: v]; 

Am adăugat un set de imagini PNG în proiectul nostru, explosion1.png prin explosion81.png care reprezintă o secvență animată a unei explozii de foc. Codul nostru este destul de simplu. Detectăm o apăsare pe ecran și fie punem o nouă animație explozivă în punctul de aprindere, fie în cazul în care se întâmpla deja o explozie în acel moment, o eliminăm. Rețineți că codul esențial constă doar în crearea unei imagini animate prin animatedImageNamed: la care trecem șirul @"explozie" și o valoare float pentru durata.

Va trebui să rulați aplicația pe simulator sau pe un dispozitiv pentru a vă bucura de afișarea focurilor de artificii, dar aici este o imagine care captează un singur cadru al acțiunii, cu mai multe explozii în același timp.

Animații explozive

Desigur, dacă ați fi în curs de dezvoltare un joc de acțiune de mare ritm, cum ar fi un shoot 'em sus sau un platformer lateral scrolling, atunci UIImagesuportul pentru imagini animate ar părea destul de primitiv. Nu ar fi abordarea dvs. go-to pentru implementarea animației. Nu este chiar ceea ce UIImage este construit pentru, dar în alte scenarii mai puțin exigente, ar putea fi doar biletul! Din moment ce animația rulează continuu până când eliminați imaginea animată sau imaginea de pe interfață, puteți face animațiile să se oprească după un anumit interval de timp prin trimiterea unui mesaj întârziat cu - performSelector: withObject: afterDelay: sau folosiți un NSTimer.


Concluzie

În acest tutorial, ne-am uitat la unele caracteristici utile, dar mai puțin bine cunoscute ale UIImage clasa care poate veni la îndemână. Vă sugerez să vă uitați la UIImage Referință la clasă deoarece unele dintre caracteristicile discutate în acest tutorial au mai multe opțiuni. De exemplu, imaginile pot fi compuse folosind unul din mai multe opțiuni amestecate. Imaginile redimensionabile pot fi configurate în unul din două moduri de redimensionare, tigla (care este cea utilizată implicit) sau întindere. Chiar și imaginile animate pot avea inserturi. Nu am vorbit despre elementele de bază CGImage tipul opac care UIImage împachetează în jur. Trebuie să te descurci CGImagedacă programați la Core Graphics nivel, care este API pe bază de C care se află la un nivel mai jos UIKit în cadrul iOS. Core Graphics este mai puternic decât UIKit pentru a programa cu, dar nu la fel de ușor. De asemenea, nu am vorbit despre imagini create cu date de la a Imagine de bază obiect, deoarece acest lucru ar avea mai mult sens în a Imagine de bază tutorial.

Sper că ați găsit acest tutorial util. Păstrați codificarea!

Cod