Android: Crear animación con sprites (Animation)

Buenos días, en este tutorial vamos a aprender como crear una animación con la clase AnimationDrawable y con sprites de una manera sencilla y muy útil.
En este caso los sprites están por separado, más adelante publicaré otro tutorial con todos los sprites en una sola imagen. Ya que es algo más óptimo.

Para empezar muestro los sprites que vamos a utilizar:

Para descargar los sprites: http://adf.ly/UUGQd

Como podéis ver los sprites que van hacia arriba tienen el prefijo 'u' del que se dirigen abajo 'a', derecha 'd' e izquierda 'i'. Tenerlos completamente ordenados es esencial para llevar acabo la animación.  

Seguidamente crearemos nuestro projecto, en mi caso eclipse, y crearemos 4 archivos .xml en la carpeta de res/drawable en el caso de no existir la crearemos. Los archivos .xml deben ser los siguientes:

arriba.xml

<?xml version="1.0" encoding="utf-8"?>  
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"  
    android:oneshot="false">  
    <item android:drawable="@drawable/u_1" android:duration="60" />  
    <item android:drawable="@drawable/u_2" android:duration="60" />  
    <item android:drawable="@drawable/u_3" android:duration="60" />  
    <item android:drawable="@drawable/u_4" android:duration="60" />  
    <item android:drawable="@drawable/u_5" android:duration="60" />  
    <item android:drawable="@drawable/u_6" android:duration="60" />  
    <item android:drawable="@drawable/u_7" android:duration="60" />  
    <item android:drawable="@drawable/u_8" android:duration="60" />  
</animation-list>

En este xml lo que hace es agrupar todas las imagenes (que debemos tener integradas en el res/drawables anteriormente), las agrupamos en el óden en el que tendrá que aparecer la animación y añadiremos tantos sprites como necesitemos en este ejemplo son 8 para cada dirección del personaje. Ahora deberíamos crear los siguientes archivos para la direccion de abajo, derecha e izquierda:

abajo.xml

<?xml version="1.0" encoding="utf-8"?>  
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"  
    android:oneshot="false">  
    <item android:drawable="@drawable/a_1" android:duration="60" />  
    <item android:drawable="@drawable/a_2" android:duration="60" />  
    <item android:drawable="@drawable/a_3" android:duration="60" />  
    <item android:drawable="@drawable/a_4" android:duration="60" />  
    <item android:drawable="@drawable/a_5" android:duration="60" />  
    <item android:drawable="@drawable/a_6" android:duration="60" />  
    <item android:drawable="@drawable/a_7" android:duration="60" />  
    <item android:drawable="@drawable/a_8" android:duration="60" />  
</animation-list>

derecha.xml

<?xml version="1.0" encoding="utf-8"?>  
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"  
    android:oneshot="false">  
    <item android:drawable="@drawable/d_1" android:duration="60" />  
    <item android:drawable="@drawable/d_2" android:duration="60" />  
    <item android:drawable="@drawable/d_3" android:duration="60" />  
    <item android:drawable="@drawable/d_4" android:duration="60" />  
    <item android:drawable="@drawable/d_5" android:duration="60" />  
    <item android:drawable="@drawable/d_6" android:duration="60" />  
    <item android:drawable="@drawable/d_7" android:duration="60" />  
    <item android:drawable="@drawable/d_8" android:duration="60" />  
</animation-list>

izquierda.xml

<?xml version="1.0" encoding="utf-8"?>  
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"  
    android:oneshot="false">  
    <item android:drawable="@drawable/i_1" android:duration="60" />  
    <item android:drawable="@drawable/i_2" android:duration="60" />  
    <item android:drawable="@drawable/i_3" android:duration="60" />  
    <item android:drawable="@drawable/i_4" android:duration="60" />  
    <item android:drawable="@drawable/i_5" android:duration="60" />  
    <item android:drawable="@drawable/i_6" android:duration="60" />  
    <item android:drawable="@drawable/i_7" android:duration="60" />  
    <item android:drawable="@drawable/i_8" android:duration="60" />  
</animation-list>

Una vez ya tengamos todo bien organizado pasamos a crear un ImageView en el main.xml con 4 botones. Este código ya no es necesario ya que hice un tutorial para eso (ver). Ya podemos ir a nuestra activity y empezar con el java.
Una vez tengamos relacionado nuestro 4 botones y el ImageView en nuestra clase  (ver) voy a poner de ejemplo cómo sería el botón de Up para que vosotros de manera algo más autodidacta añadáislas funciones a los otros tres botones. Adjunto el código que irá dentro del boton Up totalmente comentado:

//Añadimos el Listener tal y como ya sabemos
//En este caso un Touch en vez de un click para
//dar efecto de pulsado o no pulsado
bt_up.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
 //Si el usuario esta tocando el botón
 if (event.getAction() == MotionEvent.ACTION_DOWN ) {
  //Cargamos la animacion del xml en el imageview
  //previamente ya creado
  imageView.setBackgroundResource(R.drawable.arriba);   
  //mi_animacion es de la clase AnimationDrawable
  //Obtenemos el fondo del imageview que es donde cargaremos 
  //la animacion, IMPORTANTE:
  //No añadais imagen en el src del main.xml ya que taparía
  //el fondo y no nos dejará ver la animación
  mi_animacion = (AnimationDrawable) imageView.getBackground();   
  //Emezamos la animacion
  mi_animacion.start();
         return true;
         }
 //Si levanta el dedo del botón
 if (event.getAction() == MotionEvent.ACTION_UP){
  //Pararemos la animación
  mi_animacion.stop();
  //Mostamos la imagenn inicial para dar más realismo al stop()
  imageView.setBackgroundResource(R.drawable.u_1);
         return true;
  }
 return false;
 }
 });

Y con esto es todo! os adjunto un vídeo para ver el resultado final, espero que hayáis aprendido mucho y que comentéis vuestros resultados o dudas que surjan. Muchas gracias!

Espero vuestros comentarios y puntuaciónes!!!