2. ANIMACIONES INTERPOLADAS
En Android podemos aplicar animaciones simples a un objeto View. Se denominan animaciones interpoladas, o tweened animations, y consisten en traslaciones, rotaciones, cambios de tamaño o modificaciones de la transparencia. Cada animación puede almacenarse en un fichero xml en el directorio res/anim de nuestro proyecto. Este directorio habrá que crearlo, ya que Eclipse no lo genera al iniciar un nuevo proyecto.
2.1. Traslaciones
En este primer ejemplo Animacion.java aplicaremos una traslación a un texto definido como un objeto de tipo Textview. La traslación se efectúa especificando un cambio en la coordenada X inicial y final, en este caso en términos de porcentaje respecto al ancho total de la pantalla. También se debe especificar la duración de la animación en milisegundos. El sistema se encarga de interpolar entre la posición inicial y la final a intervalos regulares de tiempo para mostrarnos la animación. El siguiente fichero contiene la información de la animación:
El layout de este ejemplo es el siguiente:
En el programa Animacion.java definimos un objeto de tipo Animation mediante una referencia al fichero de animación traslacion_derecha.xml. Para iniciar la animación, basta con llamar al método startAnimation() del objeto TextView, pasando la animación como argumento.
El método setFillAfter(true) debe llamarse para que la transformación se mantenga tras la animación. En caso contrario, al finalizar esta, se mostrará el objeto TextView en su posición especificada en el layout. La animación se aplica al objeto TextView como un todo. Si añadimos texto con append más adelante, este también será animado. El resultado se muestra en la figura 2.1. El texto animado aparece inicialmente desplazado hacia la izquierda. Esto se establece en el fichero de animación en la línea
que indica que la coordenada X se desplace una distancia negativa igual al 50% del ancho de la pantalla. La posición final se define en la línea
es decir, desplazar el texto una distancia positiva igual al 50% del ancho de la pantalla. Para que el texto desaparezca completamente de la pantalla, basta con desplazarlo una distancia del 100%. Por ejemplo, la traslación
hará que el texto, inicialmente fuera de la pantalla a la izquierda, aparezca moviéndose hasta desaparecer por la derecha de la pantalla.
Esta otra animación
hace que el texto aparezca por la izquierda hasta llegar a la posición indicada en el layout, con un desplazamiento final igual a cero.
Figura 2.1. Animación interpolada con traslación a la derecha. Durante la animación (izquierda) y tras la animación (derecha).
Análogamente, especificando un desplazamiento inicial igual a cero y final igual a 100%, haremos ver que el texto se mueve desde su posición inicial hasta desaparecer de la pantalla por la derecha.
El interpolador controla el modo en que la velocidad de la animación varía con el tiempo, indicado en el fichero xml de la animación mediante la etiqueta interpolator.
Estos son algunos de los interpoladores disponibles:
En el ejemplo anterior hemos utilizado el modo acelerate, con el que se consigue que el movimiento vaya haciéndose más rápido. En caso de que quisiéramos que la velocidad fuera constante, usaríamos linear. El interpolador overshoot produce el efecto de «dar martillazos».
2.2. Repetición de animaciones
Para repetir una animación, debemos usar el método setRepeatMode() e indicar el número de repeticiones con setRepeatCount(). Por ejemplo, para repetir una animación 20 veces:
En este punto hay que advertir que en las actuales versiones de Android, la repetición de animaciones no funciona con la etiqueta set que hemos utilizado en el ejemplo anterior (bug documentado en la página web de Android). La etiqueta set se aplica a un objeto AnimationSet, que permite superponer varias animaciones. Para repetir una animación, esta debe ser simple, es decir, no debe contener la etiqueta set.
En el siguiente ejemplo se anima un texto central a lo largo de la diagonal. El movimiento es oscilatorio alrededor de su posición original con una amplitud de 50 píxeles de abajo arriba y de izquierda a derecha. El movimiento es rápido, con una duración de 200 milisegundos, y la aceleración es como un martilleo. El fichero de la animación es el siguiente:
Usaremos el siguiente layout:
A continuación se detalla el programa Java. Nótese que no se usa setFillAfter(true) para que el texto al final quede en su posición original. También se ilustra cómo pueden recuperarse algunos parámetros de la animación con getRepeatMode() y getRepeatCount(). En la figura 2.2. se muestra el resultado.
Figura 2.2. Animación repetida con movimiento diagonal. Durante la animación (izquierda) y tras la animación (derecha).
2.3. Rotaciones
Para generar una rotación debemos especificar el ángulo inicial y final. Esto se puede indicar en un fichero xml, al igual que en el caso de las traslaciones. En el siguiente ejemplo hacemos girar el texto central repetidas veces. Usando el mismo layout del ejemplo anterior, el fichero de la animación es el siguiente:
Las variables