In seguito al rilascio di iOS 7 (e anche iOS 8), gli effetti di animazione e movimento sono diventati centrali per la progettazione di app da parte di sviluppatori Apple e 3rd party. iOS 7 ha introdotto un design piatto e minimale alle app che ha inevitabilmente portato ad alcune app con un’interfaccia utente simile. Per distinguere le loro app da altre app, gli sviluppatori hanno impiegato funzionalità come animazioni ed effetti di movimento per far risaltare le loro app.

Non solo le animazioni vengono utilizzate per separare la tua app, ma possono migliorare l’esperienza utente complessiva della tua applicazione. Per grandi esempi di come le animazioni vengono utilizzate per migliorare UX, si dovrebbe guardare a come Apple utilizza le animazioni nelle loro applicazioni. Ad esempio, nell’app Foto, quando selezioni una foto da una raccolta, la foto si espande da quella selezionata e, chiudendola, torna alla foto selezionata. Questo aggiunge alla navigazione del app in quanto consente di sapere esattamente dove ti trovavi, se la navigazione molte immagini.

La carta di Facebook impiega anche animazioni magnificamente per aggiungere all’esperienza utente complessiva dell’app. Si seleziona un articolo da leggere lanciando in su. Questa azione, il fatto che l’articolo si espande dalla sua versione in miniatura, suggerisce che facendo il contrario, cioè capovolgendo l’articolo verso il basso, lo ridurrebbe alla sua miniatura. Qui, l’animazione viene utilizzata per trasmettere come funziona l’app e anche un utente per la prima volta dell’app sarebbe presto in grado di fare ipotesi sul suo utilizzo e capire la sua navigazione senza bisogno di un tutorial.

Non solo le animazioni aggiungono all’esperienza utente dell’app, ma potrebbero essere ciò che delizia e impressiona i tuoi utenti garantendo l’utilizzo ripetuto invece di disinstallare l’app per una migliore dall’App Store.

Esistono numerosi modi per includere animazioni nelle tue app, alcune delle quali utilizzando le dinamiche UIKit, le animazioni dei livelli, le transizioni del controller di visualizzazione o utilizzando una libreria di terze parti come la libreria Pop di Facebook o il framework JNWSpringAnimation.

In questo tutorial ci accingiamo a guardare semplici animazioni di visualizzazione. È possibile scaricare il progetto starter che è un’applicazione a vista singola con una vista tabella che elenca gli esempi presentati nel tutorial tutorial. Userò questo quando arriviamo alla parte esempi del tutorial, invece di partire da zero.

Il tutorial inizia con un riepilogo delle API utilizzate per animare le viste e termina con alcuni esempi che mostrano l’uso di alcune API in un’app.

Animazioni di visualizzazione di base

Creare animazioni sulle viste è una questione di cambiare le proprietà su di esse e lasciare che UIKit le animino automaticamente. Le proprietà che cambiamo sono quelle contrassegnate Animatable.

L’elenco seguente mostra le proprietà animabili.

  • centro
  • alfa
  • cornice
  • limiti
  • trasforma
  • backgroundColor
  • contentStretch

Si scopri che tutte le animazioni comportano una modifica di una o più delle proprietà di cui sopra.

Per le animazioni di visualizzazione semplici, UIKit fornisce le seguenti API che possono essere utilizzate per animare le viste sullo schermo.

Il primo prende due parametri: un valore per la durata in secondi dell’animazione e una chiusura in cui si specificano le proprietà che si desidera modificare. UIKit prenderà lo stato originale della vista e creerà una transizione graduale da quello stato allo stato finale in base a quanto specificato nella chiusura delle animazioni.

Le altre due API sono simili alla prima, ma prendono parametri aggiuntivi che aggiungono più configurazione all’animazione. Il secondo prende una chiusura di completamento che puoi usare per specificare un’altra animazione che vuoi fare dopo la prima o puoi fare un po ‘ di pulizia dell’interfaccia utente, ad esempio, rimuovendo una vista dalla gerarchia della vista una volta che un’altra vista è animata sulla scena.

La terza API richiede altri due parametri: il ritardo, che è il tempo di attesa prima dell’avvio dell’animazione e le opzioni, una costante UIViewAnimationOptions, che indica come si desidera eseguire le animazioni. Quanto segue mostra le opzioni disponibili.

Animazioni primaverili

Le animazioni primaverili cercano di modellare il comportamento di una molla reale, in quanto, quando una vista viene spostata da un punto all’altro, rimbalzerà/oscillerà verso la fine prima di stabilirsi in posizione.

Di seguito è riportato il blocco di metodo che usiamo per le animazioni primaverili.

  • UIView.animateWithDuration (_:, delay:, usingSpringWithDamping:, initialSpringVelocity:, options:, animations:, completion:)

Quanto sopra è simile ai metodi che abbiamo esaminato in precedenza, ad eccezione di due nuovi parametri: usingSpringWithDamping e initialSpringVelocity. Lo smorzamento è un valore da 0 a 1 che determina quanto la vista rimbalza verso la fine dell’animazione. Più vicino a 1 è il valore, meno rimbalzante sarà. initialSpringVelocity come dice il nome, determina la velocità iniziale dell’animazione. Questo determina quanto forte l’animazione inizia. Se vuoi che inizi vigorosamente, imposta un valore più grande, se vuoi un’animazione fluida, puoi impostare il valore su 0.

Animazioni dei fotogrammi chiave

Le animazioni dei fotogrammi chiave consentono di impostare diverse fasi di un’animazione. È possibile raggruppare diverse animazioni che condividono alcune proprietà comuni, ma essere comunque in grado di controllarle separatamente.

Invece di un’animazione che si muove solo lungo un percorso, UIKit eseguirà le diverse fasi dell’animazione.

Le API di animazione Keyframe sono le seguenti.

I due metodi precedenti vengono utilizzati insieme, il secondo viene annidato nella chiusura delle animazioni del primo.

Il primo metodo imposta la configurazione complessiva dell’animazione, come il tempo necessario, il ritardo e le sue opzioni. È quindi possibile definire uno o più del secondo metodo(i fotogrammi) all’interno della chiusura animazioni per impostare le diverse fasi dell’animazione.

L’ora di inizio relativa e la durata relativa di ciascun fotogramma sono un valore compreso tra 0 e 1 che esprime il tempo percentuale all’interno della durata totale dell’animazione.

Transizioni di visualizzazione

Le transizioni di visualizzazione vengono utilizzate quando si desidera aggiungere una nuova vista alla gerarchia di visualizzazione o rimuovere una vista dalla gerarchia di visualizzazione.

Le API utilizzate per creare transizioni di visualizzazione sono

Si utilizza la prima per introdurre una vista nella gerarchia di visualizzazione. Il metodo prende parametri simili a quelli che abbiamo visto negli altri metodi di animazione.

Il secondo viene utilizzato per prendere una vista dalla gerarchia della vista e posizionare una nuova vista al suo posto.

Esempi

Esamineremo ora alcuni esempi che utilizzano alcune delle chiamate API precedenti per animare le viste nel progetto iniziale specificato.

Esempio I

Se si esegue il progetto, verrà visualizzata una vista tabella che elenca gli esempi su cui lavoreremo. Seleziona Esempio I nell’elenco e dovresti vedere una schermata di accesso di un’app con i campi nome utente e password e il pulsante di accesso.

Vogliamo che questi siano animati sullo schermo all’avvio dell’app.

Per iniziare nasconderemo le viste alla vista quando la vista appare per la prima volta. Prima del layout automatico, sarebbe stata una semplice questione di cambiare la posizione della vista specifica nel codice, ma dal momento che abbiamo impostato i vincoli di layout automatico sulle viste nel file storyboard, dovremo cambiare i vincoli nel codice, che cambierà la posizione della vista.

In primo luogo, abbiamo bisogno di ottenere un riferimento dei vincoli che cambieremo. Aprire il file storyboard. Individuare i seguenti vincoli nella scena di esempio I.

Apri l’editor assistente e assicurati che sia ExampleIViewController.swift che appare accanto allo storyboard sullo schermo diviso. Trascinare dal vincolo Al centro X Alignment – View – Username alla classe ExampleIViewController. Creare una presa denominata centerAlignUsername. Fai lo stesso per Center X Alignment – View – Password e imposta il suo nome su centerAlignPassword. Crea anche una presa per il pulsante di accesso denominato loginButton e un’azione per lo stesso pulsante e chiamalo login. Assicurati di impostare il Tipo di azione su UIButton. Dovresti avere quanto segue nel codice.

1
2
3
4
5
6
7

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

In ExampleIViewController.swift aggiunge il seguente metodo che viene chiamato prima che la vista venga presentata sullo schermo.

Questo sposta i campi username e password appena fuori vista e imposta il valore alfa del pulsante su 0 che lo rende invisibile.

Aggiungi il seguente metodo che viene chiamato a destra quando viene visualizzata la vista.

Qui usiamo il UIView.Metodo animateWithDuration () che abbiamo visto in precedenza. Includiamo UIViewAnimationOptions.Opzione CurveEaseOut che rende l’animazione iniziare veloce poi rallentare alla fine. Puoi sperimentare diverse opzioni qui. Command-click su UIViewAnimationOptions per vedere tutte le opzioni disponibili.

L’animazione dura 0,5 secondi e inizia immediatamente. Hai la libertà per tutta la durata, ma non dovresti impostare un numero così grande da infastidire gli utenti quando le animazioni sulla tua app sembrano richiedere troppo tempo. Normalmente, la durata è impostata tra 0,5 e 0,7 secondi, ma come ho detto, questo non è scolpito nella pietra e hai la libertà di impostarlo su ciò che ti sembra giusto.

L’animazione fa l’esatto opposto di quello che abbiamo fatto in viewWillAppear (). layoutIfNeeded () viene utilizzato per disporre le viste immediatamente modificate. Se non lo includi, non li vedrai animati sullo schermo, invece verranno mostrati nella loro posizione finale. Eseguire l’applicazione, e si dovrebbe vedere quanto segue.

Quanto sopra sembra più interessante di una presentazione statica, ma le viste animate allo stesso tempo non creano un grande effetto. Modificare il metodo come mostrato di seguito.

Esegui l’app e l’animazione risultante ha le viste animate sullo schermo in momenti diversi. Guardando il codice, puoi vedere che dopo il primo blocco di animazione, impostiamo un ritardo su quelli successivi.

Nelle schermate di accesso, quando l’accesso non riesce, di solito c’è un’animazione che indica all’utente che l’accesso non è riuscito. Questo a volte viene fatto come una scossa dei campi di testo o il pulsante login, e un messaggio che consente all’utente di sapere che il login non è riuscito. Aggiungeremo un tale effetto sul pulsante di accesso usando le molle. Modificare la funzione login() come mostrato.

Quanto sopra cambia la dimensione del pulsante di accesso quando viene premuto e anima l’azione con un’animazione a molla che farà espandere la larghezza del pulsante e rimbalzare un po ‘ alla fine prima di stabilirsi.

Gioca con il valore di smorzamento. Se lo si imposta su 1, il pulsante si espanderà, senza rimbalzare alla fine. È inoltre possibile utilizzare lo stesso metodo nei campi nome utente e password. Invece di averli venire sullo schermo e basta fermarsi in posizione alla fine, li hanno essere primavera-like e rimbalzare un po ‘ prima di stabilirsi.

Esempio II

Nella tua app, potrebbe essere necessario sostituire automaticamente l’immagine di sfondo di una vista quando si verifica un’azione. Potresti farlo in un modo in cui un’immagine sostituisce immediatamente un’altra sulla vista, oppure potresti lentamente sfumarla per creare una bella transizione. Creeremo questo effetto qui. Aprire ExampleIIViewController.swift e aggiungere quanto segue.

Qui creiamo una vista immagine e la aggiungiamo alla vista principale. Chiamiamo quindi imageFadeIn () che crea una seconda vista con un’immagine diversa. Aggiungiamo questa vista sopra la prima vista immagine e impostiamo il suo alfa su 0. Nel blocco animazione, animiamo il suo valore alfa, rendendolo visibile. Usiamo quindi una chiusura di completamento per impostare l’immagine della vista immagine sulla seconda immagine e rimuoviamo la seconda vista immagine dalla gerarchia della vista poiché non è più necessaria. Ho aggiunto un lungo ritardo in modo che l’animazione non avvenga proprio nel momento in cui selezioniamo l’esempio II dalla vista tabella. Anche la durata è un po ‘ lunga, quindi possiamo vedere cosa sta succedendo nella demo.

Il seguente è l’effetto.

Esempio III

Successivamente vedremo le animazioni dei fotogrammi chiave. Aprire ExampleIIIViewController.swift e aggiungere la seguente variabile e funzioni al file. Ho commentato il codice per spiegare ogni passaggio.

In viewDidLoad() chiamare la funzione createView (). Aggiungi quanto segue nella parte inferiore di viewDidLoad ().

1
createView()

In esecuzione l’applicazione e selezionando Esempio III della tabella, si dovrebbe vedere una red view con un’immagine vista in alto, e un pulsante al centro.

Vogliamo avere la vista (che chiamerò alertView da ora in poi) per ridursi di dimensioni e cadere verso il basso fuori dalla vista.

Quando abbiamo creato il pulsante, abbiamo aggiunto un ascoltatore ad esso. Quando il pulsante viene toccato, viene chiamato dismissAlert (). Modificare la funzione come mostrato.

Nel codice precedente, creiamo fotogrammi che rappresentano ciò che vogliamo per le due fasi di animazione della vista. smallFrame si riduce a metà delle dimensioni di alertView, mantenendo il punto centrale e finalFrame ha una posizione nella parte inferiore dello schermo, fuori vista.

Usiamo un’animazione Keyframe con due fotogrammi chiave. Il primo imposta il frame di alertView su smallFrame e il secondo su finalFrame. Il risultato sarà che alertView si ridurrà a metà delle sue dimensioni e quindi cadrà fuori dalla vista. Si noti che ho messo un numero così grande per la durata – 4 secondi. Puoi cambiare questo, volevo solo l’animazione in esecuzione al rallentatore per la demo. Eseguire l’applicazione e selezionare Esempio III.

L’animazione non è proprio quello che ci aspettavamo. Puoi vedere red alertView animate come previsto, ma la scala dei suoi figli non cambia. Cambiando il frame del genitore, non cambia automaticamente i frame dei suoi figli.

Useremo una funzionalità introdotta in iOS 7 chiamata UIVIEW snapshots per correggere l’animazione. Ciò consente di scattare un’istantanea di un UIView insieme alla sua gerarchia e renderlo in un nuovo UIView.

In dismissAlert() aggiungi quanto segue prima del codice di animazione del fotogramma chiave.

1
2
3
4

lasciate snapshot = alertView.snapshotViewAfterScreenUpdates (false)
snapshot.frame = Avviso.cornice
vista.addSubview (snapshot)
alertView.removeFromSuperview()

Qui, creiamo una vista istantanea e la aggiungiamo alla vista principale. Quindi rimuoviamo alertView dalla vista, poiché lo snapshot lo sostituirà.

Sostituire l’animazione del fotogramma chiave con quanto segue.

Esegui l’applicazione e toccando Ignora, la vista(istantanea, in realtà) dovrebbe animarsi come previsto.

Esempio IV

Abbiamo esaminato come è possibile animare viste semplici. In questo esempio vedremo come è possibile animare una vista tabella.

Se si seleziona Esempio IV dalla vista tabella, si troverà un’altra vista tabella con un elenco di elementi al suo interno. Quando viene presentata la vista tabella, gli elementi dell’elenco sono già posizionati sulla tabella. Vogliamo animarli sulla vista per creare un effetto più interessante.

Aprire ExampleIVViewController.swift e aggiungere i seguenti metodi.

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

ignorare func viewWillAppear(animato: Bool) {
Tabella animata()
}
func animateTable () {
tableView.Ricarica DATI()
lasciate celle = tableView.visibleCells()
lascia tableHeight: CGFloat = tableView.legato.dimensione.altezza
per i nelle celle {
lascia la cella: UITableViewCell = i come UITableViewCell
cella.transform = CGAffineTransformMakeTranslation(0, tableHeight)
}
indice var = 0
per a nelle celle {
lascia la cella: UITableViewCell = a come UITableViewCell
UIView.animateWithDuration(1.5, delay: 0.05 * Double(index), usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: nil, animations: {
cell.transform = CGAffineTransformMakeTranslation(0, 0);
}, completamento: nil)
indice += 1
}
}

Qui, quando la vista viene visualizzato il animateTable() la funzione viene chiamata. Ricarichiamo i dati della vista tabella e scorriamo le celle attualmente visibili sullo schermo e spostiamo ciascuna di esse nella parte inferiore dello schermo. Quindi iteriamo su tutte le celle che abbiamo spostato nella parte inferiore dello schermo e le animiamo di nuovo in posizione con un’animazione a molla.

Esegui l’app e dovresti vedere quanto segue.

Conclusione

Abbiamo esaminato varie API che puoi utilizzare per aggiungere animazioni alle visualizzazioni della tua app. Questa non è una guida esaustiva sull’animazione in iOS, ma utilizzando le semplici API che abbiamo esaminato, puoi creare varie animazioni nelle tue app. Per approfondire le animazioni iOS, puoi guardare le dinamiche UIKit, le animazioni dei livelli, le transizioni del controller di visualizzazione e persino gli effetti di movimento. Potresti anche guardare librerie di terze parti come Facebook Pop e JNWSpringAnimation framework che potrebbero aiutarti a creare animazioni intricate più facilmente.

È possibile scaricare il progetto completato qui.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.