Animazioni con XML

In questa guida su Android abbiamo già approcciato la sfera della grafica, quando abbiamo parlato di stili ed immagini. Questo capitolo vuole proporre
l'approccio ad un settore della grafica molto vasto, affrontabile con soluzioni avanzate e pretenziose o in maniera più semplice ma comunque efficace. Inizieremo parlando delle animazioni, tipiche di presentazioni pubblicitarie e videogame, ma che possono essere presenti anche su altre tipologie di app in cui sia utile poter dare, per così dire, un tocco di vitalità.

Animazioni con XML

In precedenza, abbiamo scoperto che con i Drawable è possibile disegnare in XML. Ora scoprirermo che è anche possibile creare animazioni con questo
formato di dati. Gli esempi che mostreremo sono probabilmente il modo più rapido per ottenere i primi risultati ed iniziare ad affrontare uno scenario
così ampio con poco sforzo.

Le animazioni, come molte altre cose nei nostri progetti, sono risorse. La loro configurazione in XML dovrà
essere inserita in un file all'interno della cartella res/anim.

Per gli esempi che utilizzeremo, predisporremo un semplice layout con un testo “Hello world” in posizione centrale, ed un
pulsante in alto a sinistra con su scritto “Attiva animazione”. Alla pressione di quest'ultimo controllo, l'animazione verrà avviata e sarà applicata alla
scritta “Hello world”. Data la facilità di configurazione delle animazioni in XML, le direttive saranno inserite nel file res/anim/animazione.xml e sarà sufficiente sostituirne il contenuto per sperimentare nuove animazioni.

Il layout che utilizzeremo è il seguente:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:text="Avvia animazione"
android:onClick="avvia"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:id="@+id/txt"
android:text="@string/hello_world" />
</RelativeLayout>

Di seguito è mostrato, invece, il codice Java dell'Activity:

public class MainActivity extends Activity
{
private Animation anim=null;
private TextView txt=null;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
txt=(TextView) findViewById(R.id.txt);
anim = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.animazione);
}
public void avvia(View v)
{
txt.startAnimation(anim);
}
}

Come si vede, è molto semplice, e somiglia agli esempi già visti. Le uniche novità sono:

• la classe AnimationUtils che, all'interno del metodo onCreate, carica l'animazione semplicemente richiamandone l'ID di risorsa;
• il metodo startAnimation che attiva l'animazione sulla View, in questo caso una TextView.

Ciò che manca è completare il file dell'animazione, che abbiamo deciso di chiamare animazione.xml. Come primo esperimento realizzeremo una rotazione a 360 gradi, ripetuta 3 volte:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate android:fromDegrees="0"
android:toDegrees="2000"
android:pivotX="50%"
android:pivotY="50%"
android:duration="360"
android:repeatMode="restart"
android:repeatCount="3"
android:interpolator="@android:anim/cycle_interpolator"/>
</set>

I nuovi tag impiegati sono due: <set&gt; che racchiude l'insieme delle animazioni e <rotate>, specifico per l'operazione da effettuare. Ciò ci consentirà di eseguire l'animazione in seguito al click dell'apposito pulsante.

Fatto questo, potremo provare un effetto di ingrandimento con il tag <scale>, semplicemente sostituendo il contenuto del file animazione.xml:

<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXScale="1"
android:fromYScale="1"
android:toXScale="4"
android:toYScale="4"
android:pivotX="50%"
android:pivotY="50%">
</scale>

Il risultato sarà l'ingrandimento del testo “Hello world” di un fatto 4 (cioè, 4 volte più grande).

Quelli visti, ovviamente, sono solo degli esempi. La documentazione ufficiale permetterà di trovare tante altre opportunità ed idee.
Sottolineaiamo comunque alcuni spunti interessanti:

• il tag <set> non deve necessariamente contenere una singola animazione, anzi il suo stesso nome richiama il concetto dell'insieme e
  lascia intendere che al suo interno possono essere concentrate più direttive XML;
• impostando opportunamento gli attributi sarà possibile ottenere effetti finali molto diversi. Oltre a <scale> e a <rotate> ci sono altri
  tag che molto utili, come <alpha> che regola le variazioni di trasparenza permettendo di creare effetti di dissolvenza, e <translate> che permette di ordinare spostamenti delle View;
• se si vogliono effettuare sequenze di animazioni, ed eseguire operazioni tra di esse, è possibile trasformare l'Activity o un altro oggetto in un listener per i relativi eventi.
  Ciò viene fatto implementando l'interfaccia AnimationListener e comunicandolo all'istanza Animation con il metodo setAnimationListener.
  Fatto questo, si inserirà il codice nei metodi di cui è obbligatorio fornire l'override: onAnimationStart, onAnimationEnd e onAnimationRestart.