Compatibile con Xcode 8

Animare una tableview: dai un tocco di classe alla tua app

ENTRA NEL NOSTRO GRUPPO FACEBOOK

A cosa serve animare una tableview? Perché è importante curare le animazioni delle nostra applicazione?

Una delle cose che spesso viene trascurata nello sviluppo di app, specialmente se non abbiamo molta esperienza, è di sicuro l’esperienza utente.

Capita quasi sempre, infatti, di concentrarci sulle funzionalità, trascurando o lasciando per ultimi il design e l’user experience. Quando però scarichiamo un’app da AppStore, la prima cosa che notiamo é proprio l’estetica, molto prima delle funzionalità.

Un’applicazione pulita, che dia un’idea di fluidità, chiarezza e sia “bella da vedere”, ti farà guadagnare molto di più di una troppo complessa o mal organizzata, poco chiara o vecchio stile.

Ti starai chiedendo, naturalmente, come posso rendere più accattivante la mia app? Le risposte sono molte. Il design in primis: una grafica pulita ed elegante, farà piacere all’utilizzatore. Per la fluidità, o la bellezza, puoi invece inserire qualche animazione, in modo da rendere elementi grafici come un menù, una tabella o un’immagine più interessanti e moderni.

Oggi quindi ti mostrerò come animare una tableview, per renderla più elegante e moderna.

Il primo passo da fare è creare la tableView.

Se non sai come fare, puoi dare un’occhiata all’ottimo tutorial di Peppe qui  (per il momento non è necessario implementare anche la ricerca).

Una volta che hai tutto funzionante, puoi concentrarti sull’effettiva animazione delle celle. Ma cominciamo un passo alla volta: come si fa ad animare qualcosa?

Le animazioni…queste sconosciute!

Cos’è un’animazione? Un’animazione non è altro che una sequenza di azioni eseguite una dopo l’altra, ad intervalli precisi. Queste azioni possono essere di vario tipo, dalla posizione (Frame) della view che desideriamo animare, alla rotazione, passando per esempio alla trasparenza, e cosi via.

Per poterti permettere di valutare diverse animazioni, ho inserito, in testa alla schermata, un segmentviewcontroller, che una volta variato ti permetterà di animare la tabella con l’effetto selezionato.

Impostarlo è molto semplice: trascinalo nella posizione desiderata (io l’ho messo nella navigation bar per praticità, puoi farlo anche tu..!), attraverso l’Interface Builder, definisci tutti i suoi campi, e poi crea nella classe del viewcontroller, le associazioni desiderate: IBOutlet e Action.

Dentro all’action verrà definito cosa fare quando l’utente varia lo step selezionato, mentre con l’IBOutlet, potrai capire quale elemento è effettivamente selezionato in qualsiasi istante.

Si, ok, ma come faccio a fare le animazioni?

Cominciamo dall’inizio, c’erano una volta i dinosauri…scherzavo :)

Per animare una View, puoi iniziare utilizzando la funzione UIView.animateWithDuration, di cui ti riporto le declaration:

animateWithDuration(_ duration: NSTimeInterval,
delay delay: NSTimeInterval,
usingSpringWithDamping dampingRatio: CGFloat,
initialSpringVelocity velocity: CGFloat,
options options: UIViewAnimationOptions,
animations animations: () -> Void,
completion completion: ((Bool) -> Void)?)

in pratica, dobbiamo definire:

  • duration, la durata dell’animazione
  • delay, il “ritardo” dopo il quale far partire l’animazoone
  • dampingRatio, ossia l’oscillazione/rimbalzo della view , per dare l’impressione di un’animazione più fluida
  • velocity, cioè una specie di simulazione della gravità (per dare alla fine dell’animazione un effetto più carino)
  • options, cioè il tipo di animazione
  • animations, il blocco che indica cosa effettivamente si vuole raggiungere con l’animazione
  • completion, il blocco che viene richiamato ad animazione completata

Grazie a questa funzione, dunque, possiamo effettuare delle semplici animazioni alle nostre view. Per esempio, possiamo definire un frame di “arrivo”, e una volta eseguito vedremo la nostra view “muoversi” dal suo frame di partenza a quello di arrivo, con i parametri da noi specificati.

Ma veniamo a noi e vediamo come animare una tableview:  le celle, infatti, non sono altro che subclass di una view, no? ;)

Let the fun begin.

Animare una Tableview

WillDisplayCell viene lanciato ogni qualvolta la tabella si prepara a mostrare una cella, che sta per apparire nella schermata, e ne conosce già il frame (la posizione dove apparirà). In questo caso, dunque, dobbiamo dire ad Xcode:

  • Quando stai per mostrare la cella, non farla apparire subito in quel frame, ma “spostala” un po
  • Esegui un’animazione che permetta di passare dal frame appena definito, al frame “originale” dove quella cella deve stare
  • una volta finito, la cella sarà nella sua posizione corretta, ma l’animazione farà sembrare tutto più bello.

Vediamo un esempio con la funzione dampingLeft:

let scRect:CGRect = UIScreen.mainScreen().bounds

func
dampingLeft(cell: UITableViewCell){

        cell.frame = CGRectMake(scRect.width, cell.frame.origin.y, cell.frame.size.width, cell.frame.size.height)
        UIView.animateWithDuration(1.0, delay: 0, usingSpringWithDamping: 0.4, initialSpringVelocity: 0.6, options: UIViewAnimationOptions.CurveEaseIn, animations: {
            cell.frame = CGRectMake(0, cell.frame.origin.y, cell.frame.size.width, cell.frame.size.height)            }, completion: { finished in
            //Cosa fare quando l’animazione è finita
        })
    }

Vediamo cosa avviene nel dettaglio:

  • Viene cambiato il frame della cell e spostato a destra in modo che stia alla fine dello schermo
  • Per la durata dell’animazione, la cella viene spostata (modificandone il suo frame.origin.x) finchè non torna a frame.origin.x = 0
  • Viene comunque aggiunto sia un po di damping che di velocity, per rendere l’animazione piu “realistica”

Analogamente, possiamo creare l’animazione dampingRight, in cui la cella effettuerà il movimento inverso:

func dampingRight(cell: UITableViewCell){

        cell.frame = CGRectMake(0scRect.width, cell.frame.origin.y, cell.frame.size.width, cell.frame.size.height)
        UIView.animateWithDuration(1.0, delay: 0, usingSpringWithDamping: 0.4, initialSpringVelocity: 0.6, options: UIViewAnimationOptions.CurveEaseIn, animations: {
            cell.frame = CGRectMake(0, cell.frame.origin.y, cell.frame.size.width, cell.frame.size.height)
            }, completion: { finished in
                //Cosa fare quando l’animazione è finita
        })
}

e, con qualche modifica, l’animazione dampingBottom, in cui la cella “salirà” dal basso:

func dampingBottom(cell: UITableViewCell){

        let original = cell.frame.origin.y
        cell.frame = CGRectMake(0, cell.frame.origin.y*1.2, cell.frame.size.width, cell.frame.size.height)
        UIView.animateWithDuration(1.0, delay: 0, usingSpringWithDamping: 0, initialSpringVelocity: 0, options: UIViewAnimationOptions.CurveEaseIn, animations: {
             cell.frame = CGRectMake(0, original, cell.frame.size.width, cell.frame.size.height)
        }, completion: { finished in
        })

    }

In questa animazione, la cella viene spostata in basso del 20%, per poi tornare, durante l’animazione, al suo frame originale.

Come puoi intuire, le possibilità di animazioni di questo tipo sono molte, semplici, e anche molto belle. Vediamo ora un ulteriore possibile animazione: la rotazione.

func animazioneFiga(cell:UITableViewCell){

        //1. Definiamo la rotazione
        var rotation = CATransform3DMakeRotation(CGFloat(90.0*M_PI/180), 0.0, 0.7, 0.4)
        rotation.m34 = –1.0/600

        //2. Definiamo lo stato iniziale (prima dell’animazione)
        cell.layer.shadowColor = UIColor.blackColor().CGColor
        cell.layer.shadowOffset = CGSizeMake(10, 10);
        cell.alpha = 0;
        cell.layer.transform = rotation;
        cell.layer.anchorPoint = CGPointMake(0, 0.5);

        //3. Definiamo lo stato finale dell’animazione, ed azioniamola (commit)
        UIView.beginAnimations(“rotation”, context: nil)
        UIView.setAnimationDuration(0.8)
        cell.layer.transform = CATransform3DIdentity
        cell.alpha=1
        cell.layer.shadowOffset = CGSizeMake(0, 0)
        UIView.commitAnimations()

    }

Vediamone i dettagli:

  • Definiamo la rotazione con la funzione CATransform3DMakeRotation. La vogliamo di 90° (angolo), x=0, y=0.7, z=0.4
  • Impostiamo anche l’m34 a -1/600 (serve per “shiftare” il piano di proiezione, è un discorso molto ampio che tratteremo in un prossimo articolo)
  • Definiamo lo stato iniziale della cella prima dell’animazione (alpha=0,aggiungiamogli un’ombra e cosi via)
  • Definiamo lo stato finale (alpha=1, nessuna ombra, durata animazione 0.8 secondi)
  • Eseguiamo l’animazione

Eccoci alla fine, oggi ti ho mostrato come animare una tableview. Ora che sai come fare, anche tu puoi animare una tableview e puoi muovere da soli i primi passi verso l’animazione di altri elementi, sperimentando come queste animazioni rendono unica  la tua applicazione. Difatti, come ti ho mostrato, serve appena qualche riga di codice per animare una tableview ed – in generale – per abbellire la tua app conferendogli un look & feel moderno, fluido e particolare. A volte basta davvero poco per raggiungere questo scopo, e come hai visto, puoi farlo anche tu!

Buona programmazione! :)

Start typing and press Enter to search