miércoles, 5 de junio de 2013

Tutorial Android: Crear animaciones con TranslateAnimation, Rotateanimation y AnimationSet

Buenas tardes!

Hoy vamos a ver cómo crear animaciones con objetos ya sea un ImageView, EditText, TextView o cualquier otro objeto.

En este tutorial vamos a aprender como mover un texto por la pantalla continuamente. Aremos rotar un EditText completamente funcional, es decir, se puede ir escribiendo en el mientras gira :)

También crearemos una animación mixta utilizando AnimateSet, es decir, juntar una animación de traslación y una de rotación. Aprovechando también veremos un pequeño ejemplo de un Interpolador (Interpolator) que junte las dos animaciones.



He dividido el tutorial en varias partes y creación de los movimientos de manera sencilla para el correcto entendimiento, existen otras maneras de hacerlo.
Este tutoríal lo voy a ir mostrando poco a poco empecemos por el movimiento de Translación al final del tutorial pondre un link con el código completo, de momento contaremos como si el XML ya estuviera creado. Traslación (Texto de tutorialesHtml5.com):
//Creamos las relaciones con el XML
texto_1 = (TextView)findViewById(R.id.texto_1);

/* Los parametros serían (X inicial, Xfinal, Yinicial, Yfinal)
* Como vemos las Y las dejamos a 0 entonces solo tendrá 
* movimiento horizontal utilizamos un número negativo para 
* que aparezca fuera de la pantalla*/
TranslateAnimation trans_1 = new TranslateAnimation(-700, 700, 0, 0);
//Añadimos la duración de la animación
trans_1.setDuration(9000);
/*Añadimos un listener, en nuestro caso solo utilizaremos la parte
* onAnimationEnd, es decir, cuando la animación finalice*/
trans_1.setAnimationListener(new AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {}
    @Override
    public void onAnimationRepeat(Animation animation) {}
    @Override
    public void onAnimationEnd(Animation animation) {
        //Llamarenmos al movimiento de vuelta a la izquierda
        Animacion_vuelta();
}
});
//Añadimos todo este movimiento al texto 
texto_1.startAnimation(trans_1);

 Ahora veremos como hacer el de rotación sobre el EditText:

//Creamos las relaciones con el XML
ed_1 = (EditText)findViewById(R.id.ed_text1);

/* Creamos la animación de rotación, consta de cuatro parametros:
* 0 -> Grados de rotación iniciales
* 360-> Grados de rotación finales
* 0 -> Xdelta que sería el punto de apoyo
* 0 -> Ydelta que sería el punto de apoyo
* En este caso tanto X como Y los dejamos a 0 eso ara que gire 
* sobre sus coordenadas 0,0
*/
RotateAnimation anim_rotate = new RotateAnimation(0, 360, 0, 0);
 //Indicamos el tiempo que dura (ms)
 anim_rotate.setDuration(1500); 
//Añadimos la animación al EditText y empezará a girar
ed_1.startAnimation(anim_rotate); 

Todo perfecto! ¿pero y si queremos que haga rotación mientras se traslada horizontalmente? Aquí os dejo la manera de hacerlo!

/*Creamos el movimiento de traslación como antes*/
 TranslateAnimation traslacion = new TranslateAnimation(0, 550, 0, 0);
 traslacion.setDuration(4000);
 /*Creamos el de rotación*/
RotateAnimation rotacion = new RotateAnimation(0, 360, imagen.getWidth()/2
    ,imagen.getHeight()/2);
  rotacion.setDuration(2000);
  rotacion.setRepeatCount(2);
 /* Para utilizar dos o mas movimientos a la vez
  * utilizamos AnimationSet y iremos añadiendo las animaciones creadas
  */
 AnimationSet animacion_kid = new AnimationSet(true);
 //Utilizamos un Interpolador de revote para crear un efecto raro
  animacion_kid.setInterpolator(new BounceInterpolator());
  animacion_kid.addAnimation(traslacion);
  animacion_kid.addAnimation(rotacion);
         //Añadimos el AnimationSet a la imagen
  imagen.startAnimation(animacion_kid);

Archivo .java:  http://adf.ly/UUG9C
Archivo .xml:  http://adf.ly/UUGD3

Muchas gracias por todos los comentarios recibidos en la web! Si tenéis alguna duda o comentario sobre el tutorial de hoy no dudéis en comentar.

2 comentarios:

  1. Genio!! Estuve renegando con animaciones por días, y la tuya fue la única que me funcionó!
    Gracias!!!

    ResponderEliminar