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/animation-resource.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 el R.animator.mover, R.animator.transparentar, R.animator.ampliar?

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.