Introduzione a UIKit Dynamics

Il nuovo aspetto dell'interfaccia utente di iOS 7 si basa in gran parte su animazioni sottili che aiutano a dare agli utenti un senso più forte di manipolazione diretta. In questo tutorial, ti darò una panoramica delle classi di Uikit Dynamics e di come lavorano insieme.

1. Introduzione

Se tocchi l'icona della fotocamera sulla schermata di blocco, vedrai lo schermo scorrere leggermente verso l'alto per rivelare l'interfaccia della fotocamera prima di ricominciare da capo con una leggera protuberanza. Questa interazione è un suggerimento sottile che è possibile far scorrere verso l'alto la schermata di blocco per accedere alla telecamera. Allo stesso tempo, ti rassicura che se scivola accidentalmente per una breve distanza, ad esempio, mentre il tuo telefono è in tasca o in borsa, non ti ritroverai con un rullino fotografico pieno di foto inutili.

Toccando l'icona della fotocamera si fa scorrere la schermata di blocco, rivelando che la telecamera è nascosta dietro di essa.

Con l'aiuto di UIKit Dynamics, puoi aggiungere animazioni alle tue app senza dover codificare tutto da zero. Ci sono centinaia di versioni del menu Hamburger su GitHub. Ognuno consente di far scorrere lo schermo di lato per rivelare un menu nascosto e molti hanno un'animazione di rimbalzo all'apertura e alla chiusura.

Tuttavia, l'effetto di rimbalzo è stato implementato in modo diverso da ogni sviluppatore. Apple ha reso più facile agli sviluppatori aggiungere questi tocchi finali fornendo una struttura per le interazioni fisiche degli elementi sullo schermo. Con UIKit Dynamics, devi solo specificare come interagiscono gli elementi, non codificare la fisica di ogni interazione.

Ci sono molte nuove classi con cui avrai bisogno di familiarizzare. Lascia che ti passi attraverso di loro in questo articolo. Nel prossimo tutorial, ti mostrerò come usarli nei tuoi progetti.

2. Articoli dinamici

Qualsiasi classe che desideri animare deve essere conforme a UIDynamicItem protocollo, che in pratica significa che deve esporre i suoi limiti, il centro e trasformare le proprietà. UIView e UICollectionViewLayoutAttributes, e le loro sottoclassi, sono già conformi al protocollo per impostazione predefinita. Se si desidera aggiungere animazioni all'interfaccia esistente, probabilmente non sarà necessario interferire con le classi dei componenti. Se stai usando qualcosa di più esotico e hai un sacco di classi personalizzate, devi fare del lavoro extra prima di poter iniziare a utilizzare UIKit Dynamics.

3. Comportamento dinamico

Il modo in cui la tua applicazione sa come vuoi che i tuoi oggetti dinamici interagiscano, è creare un comportamento dinamico e informarlo sugli elementi dinamici. Il UIDynamicBehavior la classe è prontamente disponibile, ma fornisce poche funzionalità da sola. Puoi sottoclasse UIDynamicBehavior per dire all'applicazione come devono interagire gli oggetti dinamici, ma probabilmente si desidera utilizzare una delle sottoclassi predefinite che fanno interagire gli oggetti dinamici in modi diversi.

UIAttachmentBehavior

Un comportamento di attaccamento collega oggetti dinamici tra loro o ad un punto di ancoraggio come se fossero collegati da molle. Quando si muove un oggetto dinamico o il punto di ancoraggio, anche l'oggetto dinamico allegato si sposta. Il comportamento dell'allegato ha diverse proprietà, che possono essere configurate per controllare il comportamento della molla virtuale che connette gli elementi dinamici.

• Attenuazione: Definisce la velocità con cui la molla smette di rimbalzare dopo che uno degli oggetti si muove.
• Frequenza: Definisce la velocità con cui la molla rimbalza quando uno degli oggetti si muove.
• Lunghezza: Definisce per quanto tempo la molla è una volta che smette di rimbalzare.

Nota come i messaggi spaziano e si raggruppano insieme nell'applicazione Messaggi in iOS? Lo spazio su 1 aumenta e lo spazio su 2 si chiude quando il messaggio si sposta sullo schermo.

UICollisionBehavior

Un comportamento di collisione consente agli elementi dinamici di entrare in collisione tra loro o con un riquadro di delimitazione specificato. Un oggetto dinamico non entrerà in collisione con un oggetto dinamico che non fa parte dello stesso comportamento di collisione. Il comportamento di collisione consente di impostare se gli elementi dinamici entrano in collisione solo con altri elementi, solo il riquadro di delimitazione o altri elementi e il riquadro di delimitazione.

UIGravityBehavior

Un comportamento gravitazionale fa sì che i suoi oggetti dinamici cadano nella direzione in cui agisce la gravità. Per impostazione predefinita, la gravità agisce verso il basso, ma puoi impostare qualsiasi angolo tu scelga cambiando la proprietà dell'angolo. È possibile modificare la proprietà della magnitudine del comportamento gravitazionale per far cadere oggetti più velocemente o più lentamente.

UIPushBehavior

Un comportamento di spinta applica una forza ai suoi oggetti dinamici facendoli muovere nella direzione della forza. Hai un maggiore controllo su un comportamento di spinta rispetto a un comportamento gravitazionale dato che la forza applicata può essere continua o istantanea.

Toccando l'icona della fotocamera della schermata di blocco viene richiesto UIPushBehavior a 1, prima UIGravityBehavior prende in consegna a 2 e poi UICollisionBehavior causa il rimbalzo a 3 e 4.

UISnapBehavior

Un comportamento a scatto fa muovere il suo oggetto dinamico in un punto specificato come se fosse collegato ad esso da una molla. Come il comportamento di attaccamento, un comportamento di snap farà sì che l'oggetto dinamico superi il punto finale prima di tornare indietro. È possibile impostare la proprietà di smorzamento del comportamento per definire la velocità di attenuazione delle oscillazioni.

UIDynamicItemBehavior

Dovresti usare UIDynamicItemBehavior se vuoi controllare come si muove ogni oggetto dinamico. È possibile aggiungere indipendentemente la rotazione o il movimento e impostare le proprietà per controllare il movimento. Richiede più sviluppo rispetto ai comportamenti predefiniti, ma ti permetterà di modellare molti più scenari fisici se hai in mente un comportamento specifico.

4. Animatore dinamico

Dopo aver creato alcuni comportamenti dinamici, è necessario un animatore dinamico per fornire il contesto e i calcoli per gli elementi dinamici che si desidera animare. L'animatore dinamico aggiornerà la posizione e la rotazione degli oggetti dinamici in base ai comportamenti dinamici. Creare UIDynamicAnimator con initWithReferenceView: se hai intenzione di animare viste individuali, o con initWithCollectionViewLayout: se pensi di animare una vista collezione.

Conclusione

Ci sono nuovi meccanismi in iOS 7 per aiutarti a implementare animazioni sottili senza richiedere molto lavoro extra. Le viste che si desidera animare devono essere elementi dinamici, ovvero devono essere conformi a UIDyamicItem protocollo.

È quindi possibile creare uno o più comportamenti dinamici, istanze di UIDynamicBehavior o una qualsiasi delle sue sottoclassi, per rappresentare le interazioni che si desidera simulare. Infine, trasferisci i comportamenti a un animatore dinamico, responsabile dell'aggiornamento della posizione e della rotazione degli elementi dinamici in base ai comportamenti specificati. Nel prossimo tutorial, ti mostrerò un esempio concreto di queste dinamiche di UIKit in azione.