{"id":2235,"date":"2010-03-01T10:38:34","date_gmt":"2010-03-01T09:38:34","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=2235"},"modified":"2010-03-01T10:38:34","modified_gmt":"2010-03-01T09:38:34","slug":"t026-creiamo-un-animazione-di-una-palla-con-un-nstimer-by-icodeblog","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t026-creiamo-un-animazione-di-una-palla-con-un-nstimer-by-icodeblog\/","title":{"rendered":"T#026 – Creiamo un’Animazione di una Palla con un NSTimer (by iCodeBlog)"},"content":{"rendered":"

\"\" Ancora una volta ringraziamo il Team di iCodeBlog<\/a> che ci ha concesso di tradurre e proporre ai nostri utenti i suoi tutorial e le sue guide. In questo nuovo tutorial, di brandontreb<\/a>, vedremo come creare una semplice applicazione in cui una palla si muover\u00e0 automaticamente e “liberamente” in tutto lo schermo del vostro iPhone, rimbalzando sui lati. Per creare quest’animazione utilizzeremo un’immagine e un oggetto NSTimer. Tutto ci\u00f2 potrebbe tornare sicuramente utile soprattutto nello sviluppo di giochi, infatti questa \u00e8 una caratteristica principale di famosi giochini che sono passati alla storia, come “Pong”<\/em> o “Hockey da Tavolo”<\/em> (Air Hockey).<\/p>\n

Partiamo aprendo Xcode e creando un nuovo progetto. Dall\u2019elenco dei template disponibili scegliamo “View-based Application” e proseguiamo. Diamo ora un nome alla nostra applicazione, ad esempio “Palla”, scegliamo la posizione dove salvare il progetto e andiamo avanti.<\/p>\n

Per questo tutorial avrete bisogno di un’immagine in formato .png<\/strong> preferibilmente avente forma circolare, per simulare la presenza di una palla. Io ne ho creata una con il logo di devAPP.it potete scaricarla (tasto destro > “Salva Immagine con Nome….”) oppure potete creare una vostra come meglio credete:<\/p>\n


\n\"\"
\n<\/center><\/p>\n

Una volta scaricata o creata l’immagine della palla, trascinatela nella cartella “Resources” del vostro progetto in Xcode, facendo attenzione di mettere la spunta nell’opzione “Copy items into destination’s group folder (if needed)”<\/p>\n


\n\"\"
\n<\/center><\/p>\n

Adesso l’immagine \u00e8 parte del nostro progetto. Clicchiamo sul file “PallaViewController.h” ed andiamo a scrivere un po’ di codice. Dichiariamo un oggetto di tipo UIImageView e un oggetto di tipo CGPoint, che useremo per decidere di quanto si dovr\u00e0 muovere la nostra palla (se vogliamo una sorta di velocit\u00e0), infine, dichiariamo la solita @property:<\/p>\n

\r\n#import \r\n\r\n@interface PallaViewController : UIViewController {\t\r\n\tIBOutlet UIImageView *palla;\r\n\tCGPoint pos;\r\n}\r\n\r\n@property (nonatomic,retain) IBOutlet UIImageView *palla;\r\n\r\n@end\r\n<\/pre>\n
Salviamo il file .h e andiamo a costruire la nostra semplice interfaccia grafica con Interface Builder. Clicchiamo quindi due volte su “PallaViewController.xib” e si aprir\u00e0 IB. Ecco la nostra vista principale. Dentro di essa trasciniamo semplicemente una ImageView dalla Library (se non la vedete cliccate in alto su Tools > Library).<\/p>\n
Ridimensioniamo l’ ImageView e clicchiamoci sopra. Apriamo quindi l’Attributes Inspector (Tools > Attribute Inspector) e nel campo image, apriamo la selezione multipla a tendina e scegliamo la nostra immagine dall’elenco “palla.png” (o eventualmente il nome che avete dato alla vostra palla caricata in precedenza).<\/p>\n
In questo modo apparir\u00e0 nell’ImageView proprio l’immagine della palla che avete incluso prima nel progetto.<\/p>\n

\n\"\"
\n<\/center><\/p>\n
A questo punto, sempre selezionando l’ImageView, clicchiamo contemporaneamente sulla nostra tastiera: Command<\/strong> e =<\/strong> (CMD + =<\/strong>) e i bordi dell’ImageView si allineeranno perfettamente alla palla. Potete benissimo abbellire la vista con molti elementi, ma noi cambieremo solo il colore di sfondo mettendo un Blu Oceano (per far ci\u00f2 selezionate la vista, cliccate su Attributes Inspector e cliccate accanto a Background)<\/p>\n

\n\"\"
\n<\/center><\/p>\n
Ora dobbiamo collegare l’immagine a ci\u00f2 che abbiamo dichiarato via codice. Clicchiamo quindi su “File’s Owner”, spostiamoci nel Connections Inspector e colleghiamo l’oggetto “palla” all’ImageView<\/p>\n

\n\"\"
\n<\/center><\/p>\n
Per quanto riguarda l’interfaccia grafica abbiamo finito, salviamo tutto e chiudiamo Interface Builder. Apriamo ora il file “PallaViewController.m” e aggiungiamo il solito “@synthesize” in questo caso per l’oggetto “palla”.<\/p>\n
Scommentiamo il metodo “viewDidLoad” e modifichiamo il suo codice come segue:<\/p>\n
\r\n- (void)viewDidLoad {\r\n        pos = CGPointMake(14.0, 7.0);\r\n        [NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(onTimer) userInfo:nil repeats:YES];\r\n}\r\n<\/pre>\n
Nella prima linea, settiamo i valori per l’oggetto pos. Pi\u00f9 questi saranno alti, maggiore sar\u00e0 lo spostamento della palla (vedremo dopo perch\u00e8). Ovviamente questi valori indicheranno anche il modo in cui si muover\u00e0 la nostra palla, in questo caso in modo obliquo. Successivamente creiamo un oggetto NSTimer, settiamo il suo metodo “scheduledTimerWithTimeInterval” a 0.05, che indica la velocit\u00e0 con cui si aggiorna costantemente il Timer e, grazie al parametro “selector”, diciamo al nostro Timer quale metodo richiamare ad ogni intervallo di tempo trascorso, nel nostro caso “onTimer”:<\/p>\n
\r\n- (void) onTimer {\r\n\tpalla.center = CGPointMake(palla.center.x+pos.x, palla.center.y+pos.y);\r\n\t\r\n\tif(palla.center.x > 320 || palla.center.x < 0)\r\n              pos.x = -pos.x;\r\n        if(palla.center.y > 460 || palla.center.y < 0)\r\n\t      pos.y = -pos.y;\r\n}\r\n<\/pre>\n
Ecco cosa succede. Ad ogni chiamata di questo metodo (onTimer), alla posizione della palla verranno aggiunti i valori settati in pos, quindi la palla si sposter\u00e0 di quei valori (x,y) indicati. Verr\u00e0 quindi verificato se la palla, con questo movimento, ha \"rimbalzato contro le pareti\" dell'iPhone. Se questo dovesse accadere, verranno invertiti i valori della x e rispettivamente della y cos\u00ec da far andare la palla nella direzione opposta, senza uscire quindi dallo schermo.<\/p>\n
Per quanto riguarda il codice \u00e8 tutto, clicchiamo su \"Build And Run\" e testiamo la nostra applicazione sul Simulatore, l'applicazione in esecuzione far\u00e0 capire molto meglio quello di cui stiamo parlando. Ecco uno screenshot dell'applicazioni in esecuzione:<\/p>\n

\n\"\"
\n<\/center><\/p>\n
Tutorial tradotto da David Pollak (bebus77) per devAPP.it.<\/p>\n","protected":false},"excerpt":{"rendered":"
Ancora una volta ringraziamo il Team di iCodeBlog che ci ha concesso di tradurre e proporre ai…<\/p>\n","protected":false},"author":40,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[90,124,126,5,120,23],"class_list":["post-2235","post","type-post","status-publish","format-standard","hentry","category-tutorial-pratici","tag-animazioni","tag-icodeblog","tag-nstimer","tag-objective-c","tag-tutorial","tag-xcode"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/2235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=2235"}],"version-history":[{"count":36,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/2235\/revisions"}],"predecessor-version":[{"id":2297,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/2235\/revisions\/2297"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=2235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=2235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=2235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}