Animaciones en imgenes y textos usando Android Studio

03 03UTC marzo 03UTC 2015 - Android

Bienvenidos a este mini tutorial que prometo sern ms de

como crear animaciones sencillas en Android.
Despus de ojear varios tutoriales por la red e interiorizarme el funcionamiento de los mismos os dejar a continuacin todas
las explicaciones para que vosotros mismos intentis realizar vuestras animaciones.

En primer lugar lo que haremos es explicar como animar los View de Android,
entendiendo como tales los TextView y las imgenes. Entre los efectos que se
le pueden aplicar estn la rotacin, zoom, movimiento y transparencia.
Lo primero que recomendamos es que echis un vistazo a la siguiente URL:
http://developer.android.com/guide/topics/resources/animationresource.html
Es muy importante aunque un coazo puesto que explica al detalle cada una
de las componentes del API que forman parte de las propiedades, de como
llamarlas, de como hacer que se ejecuten, etc,.

Vamos al grano con las animaciones.

Lo primero que os debis encontrar es el proyecto, como veis la estructura de carpetas en vuestro caso debe ser igual o
similar.
Para que entendis mejor la estructura lo que se hace es seleccionar la vista de Project que lo tenis en la esquina izquierda
superior debajo del nombre que le habis asignado al proyecto en mi caso Misanimaciones.

Se obtiene una vista como la que muestro en la imagen anterior.

Ahora si abrimos el rbol de carpetas, para buscar donde se alojan los archivos MainActivity.java y activity_main.xml que sern
los archivos principales de este tutorial se puede observar algo tal que as:

Ahora una pequea explicacin antes de picar cdigo para crear las animaciones.
El primer paso es crear una carpeta llamada animator donde alojaremos los .xml de las distintas animaciones dentro
del

res que indica la carpeta de recursos.

Procedemos ahora a crear las distintas animaciones en los archivos que

tendrn que ser .xml
Crearemos en nuestro caso 4 efectos para aplicar a nuestros objetos sean
imgenes o textos y estas propiedades son:

rotate Propiedad encargada de que el objeto elegido gire determinados

grados sobre el eje que le asignemos.

zoom

Propiedad que hace mencin al tamao y por tanto al zoom del

objeto que quieres manipular. Se refiere pues a hacer ms grande o ms
pequeo el objeto inicialmente definido.

translate Propiedad que

define el desplazamiento del objeto que

quieres mover. Ya sea de arriba a abajo o viceversa o bien de izquierda a
derecha y viceversa.

alpha Propiedad que

se encarga de modificar la transparencia de un

objeto. Nos referimos a modificar la visibilidad del objeto seleccionado.
Por supuesto cada una de estos efectos tienes atributos que indican la
duracin, el grado de giro, el grado de transparencia as como la direccin y
el eje segn el cual giran. Estos atributos los veremos a continuacin con
ejemplos para que entendis mejor como se aplican.
Una vez leda esta aclaracin de que efectos podemos aplicar procedemos a la
implementacin.
En primer lugar debemos tener los objetos sobre los que queremos aplicar las
animaciones. Estos objetos deben estar colocados en el activity_main.xml
En un principio la estructura de nuestro activity_main es la siguiente:

Vemos que est con un objeto de texto que tiene el tpico Hellow world!.
Cambiamos este texto y aadimos un objeto imagen que sern sobre los que
trabajaremos a continuacin para aplicar los efectos animados.

Creo que se ve claramente lo que hice pero resumo en pocas palabras,

nicamente arrastr el objeto imagen a al pantalla del simulador y ms tarde
me dirig a la propiedad background de la imagen para asignarle esa imagen
por defecto que es la que trae Android.
Pero esta sencilla explicacin encierra varias partes importantes:
1) La estructura de rbol:

Sobre una capa inicial que la limita el Linearlayout se encuentra la imagen y

el texto.

2 El cdigo generado para esa capa de imagen y texto:

3 Los recursos, en este caso imgenes deben estar situados en la carpeta

res/mipmap-hdpi

Por tanto a cada objeto que aadimos debemos observar a que capa lo
asignamos, las propiedades todas que podemos asignarle as como tener

presente que para acceder a esas propiedades como por ejemplo la imagen
.png deben estar situadas en al carpeta de recursos res/mipmap-hdpi
El resultado en nuestro caso es algo as:

No es an el simulador sino el aspecto visual modificando el padding y la

posicin centrada de los elementos desde el Android Studio.

Muy bien ahora ya tenemos los objetos a modificar y pasamos a crear las
animaciones.
Para ello es necesario tener un mnimo de conceptos de JAVA pero como
veris en las explicaciones con un poco de razonamiento se entiende lo que
hace cada una de las partes.
En primer lugar creamos los .xml de cada una de las propiedades y les damos
unos valores que permitirn simular el efecto segn los atributos que les
asignamos.

Este es el modo en que se crean los distintos .xml, botn derecho sobre
animator -> new -> Animator resource file y vemos la pantalla como
mostramos en la imagen anterior donde ponemos nombre al fichero y la
propiedad que usaremos obteniento algo as:

Una vez que asignamos algunos atributos bsicos podemos ver que el efecto
de girar empieza a tomar ms forma.

Ahora es cuando s tocamos el MainActivity.java, ser aqu donde

instanciaremos los objetos y le asignaremos el efecto que deseamos. Lo
haremos de un modo sencillo y ser despus de hacer click en un botn que
previamente debemos definir. Por tanto antes de pasar al MainActivity
definimos ese botn o botones uno para cada propiedad y veremos el efecto
que se le aplica.

En la imagen anterior se muestra de forma visual como seran los botones y a

continuacin el cdigo correspondiente.

Pues bien ahora si que nos dirigimos al MainActivity.java para que escuche
nuestros botones y realice la accin o efecto que le asignemos a cada botn.

Esta imagen anterior sera el aspecto de nuestro MainActivity.java sobre el

que an no hemos tocado ni modificado nada y continuamos con la
implementacin.

De este modo es como definimos las variables y las instanciamos buscando por
el id de cada uno de los elementos.
Para el caso de los botones debemos activar el OnClickListener para que de
este modo los botones que estn a la escucha en cuanto se le haga click
encima ejecuten la accin pertinente.
Para esto debemos aadir implements View.OnClickListener a la clase
principal.
Una vez hecho esto ya podemos poner los botones a la escucha como se
muestra a continuacin.

Pero an no es todo, debemos crear el mtodo OnClick() el cual al tener

varios botones debemos hacer un switch segn el botn que hemos pulsado y
ejecutar la accin asociada al botn y que como antes hemos mencionado
ejecute el efecto que deseemos.

Este es el aspecto de nuestro switch que como hemos comentado

anteriormente lo nico que hace es instanciar cada animacin para luego
aplicrsela en este caso al logo de Paraiso Experto.
Por
qu
aparecen
en
rojo
subrayado
R.animator.transparentar, R.animator.ampliar?

el

R.animator.mover,

Muy sencillo a diferencia de R.animator.girar es por que previamente s hemos

definido este girar.xml que es el encargado de indicar que efecto hacer por
tanto la respuesta es sencilla. Por que an no hemos definido las propiedades
mover, ampliar y transparentar.
Definamos estas propiedades antes de continuar.

mover.xml

ampliar.xml

transparentar.xml

Y esto es todo lo necesario para obtener una animaciones como las que
podemos ver a continuacin.

Se muestra a continuacin un vdeo que del simulador con la

aplicacin de las animaciones antes explicada.