Guida Tutorial – Le animazioni in Android con l’XML

Animazioni con XML in android

Ormai le applicazioni per Android hanno raggiunto livelli incredibili, ricche di animazioni ed effetti grafici da urlo, per cui se vogliamo avere un minimo di speranza che il nostro lavoro si tramuti in un’app di successo dobbiamo pensare anche molto alla grafica ed alle animazioni.

In questo tutorial vedremo come inserire nelle vostre applicazioni delle animazioni basate sull’XML. Troverete alcuni esempi già pronti all’uso delle animazioni più comuni.

In quattro semplici passi spiegherò come associare un’animazione ad una textview sfruttando l’oggetto Animation ed i file XML. Il procedimento ovviamente è valido anche per tutti gli altri componenti di android quali ImageView, ImageButton o Button. Iniziamo!

STEP 1. Creazione file XML dell’animazione

Il/i file xml necessari alle animazioni devono essere create all’interno della cartella anim, questa cartella di default non esiste e bisogna inserirla all’interno di res. Ora create qualsiasi tipo di animazione in un file .xml (ad esempio bounce.xml)

Esempio progetto animazione android

STEP 2. Caricamento dell’animazione

All’interno dell’activity si dovrà utilizzare l’ogetto Animation e, sfruttando il suo metodo AnimationUtils.loadAnimation(), carichiamo ed eseguiamo l’animazione. Di seguito un Activity base per la creazione di un animazione:

STEP 3. Impostare il Listener sull’animazione

Per un maggiore controllo dell’animazione è necessario che l’activity implementi anche AnimationListener. Questo dà la possibilità di controllare quando l’animazione viene avviata, quando viene conclusa oppure quando viene ripetuta. Ovviamente questo passaggio è del tutto facoltativo e quindi non influenza il funzionamento delle animazioni.

STEP 4. Avvio dell’animazione

A questo punto tutto è pronto l’esecuzione dell’animazione. Scegliete quindi quando farla partire e, nella porzione di codice adatta, incollate questa riga:

Alcune importanti attributi per le animazioni

Quando si lavora con le animazioni è molto importante conoscere al meglio ogni attributo che queste possono avere. Ecco alcuni attributi che bisogna conoscere:

android:duration – La durata dell’animazione espressa in millisecondi.

android:startOffset – Tempo di attesa prima che l’animazione inizi espresso in millisecondi.

android:interpolator – Tasso di variazione dell’animazione

android:fillAfter – Indica se la trasformazione deve avvenire prima o dopo l’animazione. Questo attributo va utilizato con il tag <set>

android:repeatMode – Indica il comportamento dell’animazione se viene ripetuta

android:repeatCount – Molto utile, anzi indispensabile, quando si vogliono creare animazioni infinite impostando lo stato su “infinite”. Altrimenti si può specificare un numero che indica quante volte l’animazione sarà ripetuta.

Codice per alcune animazioni

Fade in

Effetto sfumatura in entrata. L’effetto Fade In è generato grazie ad un progressivo aumento dell’alpha della view animata. L’alpha passa da 0 ad 1.

Fade Out

Fade Out è esattamente l’opposto di Fade In. In questo caso l’alpha viene portata da 1 a 0.

Cross Fading

Cross fading serve per creare un’animazione fade in su un oggetto mentre tutti gli altri interessati scompaiono con fade out.
Il codice seguente associa le animazioni a due componenti separati creando l’effetto Cross Fading

Blink

Questa animazione serve per creare un effetto Fade In o Fade Out in modo ripetitivo. Per farlo basta utilizzare due proprietà: android:repeatMode=”reverse” e android:repeatCount

Zoom In

Per l’animazione di Zoom si userà il tag <scale>. Questo tag accetta una serie di parametri che sono: android:fromXScale e android:fromYScale per impostare la grandezza iniziale, toXScale e toYscale per il livello di zoom e pivotX, pivotY imposta come viene effettuato lo zoom (se impostiamo al 50% entrambi lo zoom parte dal centro)

Zoom Out

Zoom out è analogo all’animazione Zoom In solo che i valori di toXScale e toYScale sono minori di quelli di fromXScale e fromYScale

Rotate

L’animazione di rotazione fà uso del tag <rotate>. Questo tag accetta come parametro toDegrees e fromDegrees

Rotazione oraria – Usare un valore positivo in toDegrees

Rotazione oraria – Usare un valore negativo in toDegrees

Move

Questa animazione consente di creare animazioni di movimento. Fà uso del tag . It uses fromXDelta, toXDelta per la direzione sull’asse delle X e fromYDelta, toYDelta per la direzione lungo l’asse delle Y.

Slide Up

Questa animazione fà uso del tag come per lo zoom. Per creare un’animazione Slide Up basta impostare il valore android:fromYScale="1.0" ad android:toYScale="0.0"

Slide Down

Questa animazione fà uso del tag come per lo zoom. Per creare un’animazione Slide Down basta impostare il valore android:fromYScale="0.0" ad android:toYScale="1.0"

Bounce

L’animazione Bounce può essere usato in ogni set di animazione visto in precedenza semplicemente aggiungendo al tag android:interpolator="@android:anim/bounce_interpolator". Il seguente è un esempio di Slide Down al quale è applicata l’animazione Bounce.

Animazioni concatenate

In sequenza

Queste animazioni vengono eseguite in sequenza tenendo conto del valore android:startOffset. Questo valore indica dopo quanti millisecondi deve partire quella specifica animazione.

Animazioni in contemporanea

Queste animazioni vengono eseguite in contemporanea.

Spero che questo tutorial vi sia di aiuto per sviluppare al meglio le vostre applicazioni android.

Fonte originale: androidhive.info

Informazioni sull'autore

Laureato nel 2012 in informatica ho maturato qualche anno di esperienza sullo sviluppo di applicativi per il web e applicativi per Android. Grande appassionato di informatica in generale, di ciclismo e di fotografia, dedico gran parte del mio tempo a queste attività.

Rispondi

*

Questo sito raccoglie dati statistici anonimi sulla navigazione, mediante cookie installati da terze parti autorizzate, rispettando la privacy dei tuoi dati personali e secondo le norme previste dalla legge. Continuando a navigare su questo sito, cliccando sui link al suo interno o semplicemente scrollando la pagina verso il basso, accetti il servizio e gli stessi cookie.
Leggi informativa