Demo suguz #1 : Animacion simple en Android app

En este ejemplo les mostrare como pueden crear una animación simple utilizando un canvas en una aplicación android. Con esto podrían hacer juegos e intros para sus aplicaciones o cualquier cosa que se les ocurra que sea animación. Lo que hará esta aplicación es mostrar una palabra y hacer que rebote por toda la pantalla, ok ps vamos al grano jeje.

Lo primero que haremos es crear una clase que extienda View, será lo que veremos en pantalla. Esta es mi clase:

Con la clase creada, en nuestro layout principal (el mío es main.xml) un objeto tipo IntroVista en mi caso, ya que es la clase que usare para lo que se verá en pantalla, quedaría de esta forma:

Ahora volvamos a nuestra vista y declaremos en el constructor nuestro lienzo en el cual dibujaremos, me he adelantado y también declare variables que usaremos después, como el Angulo en que iniciara el movimiento:

Como pueden ver nada del otro mundo solo declarar nuestro lienzo (nPaint) y agregarle propiedades como el stroke, color etc.

Ahora agregaremos un método Override "onDraw" el cual se encarga de dibujar todo en el canvas. En el método agregaremos la variable String "leyenda" la cual será la encargada de rebotar en las paredes.

También se agrego la propiedad setTextSize a mPaint que por su descripción se entiende lo que hace, poner un tamaño al texto. Con canvas.DrawText se dibuja en el canvas nuestra String, los parámetros que usa DrawText es (String, punto x, punto y, lienzo).

Lo que toca hacer es agregar movimiento para ello son la variable "haora" y el método CalculaRebote que recibe como parámetro "haora". Este sería el método CalcularRebote:

Este es nuestro engine para hacer los rebotes en las paredes, cada if es un rebote en dicha pared, si rebota al lado izquierdo mi posición X tomaría el valor de 0 por que cuando se encuentra en algún punto (o,y) quiere decir que choco contra la pared izquierda, lo mismo pasa cuando choca con la pared de arriba, cuando está en algún punto (x,0). Para el lado de la base (abajo) solo obtengo el largo de mi pantalla con el método getHeight() y para el lado derecho obtengo el ancho de la pantalla con getWidth(). Para reafirmar lo de los puntos ( x, y) les dejo la siguiente imagen para que se de entender como se pintan los puntos en pantalla:

Cada if tiene un método para obtener el Angulo de rebote que son estos 4:

Esta parte son mas formulas para obtener el Angulo del rebote que otra cosa, cada caso requiere una y depende si el movimiento va hacia la izquierda , derecha ,arriba o abajo, todo los cálculos son en radianes quiere decir que cuando se multiplica 2 * PI = 360 ósea un Angulo de 360 grados. No explicare las formulas porque no es clase de trigonometría ; ) doy por sentado que ya saben de qué va, si no en este link lo explica muy bien el forero muZk con eso se pueden dar idea de lo que está plasmado en los métodos.

Ahora seguiré explicando el método calcularRebote esta parte en particular:

La variable "otro" nos sirve para obtener un cierto control sobre la velocidad de nuestra animación la formula seria (el tiempo actual - el ultimo ) * pixeles por segundo , y se divide en 1000 porque los tiempos están en milisegundos, para obtener el tiempo actual -> SystemClock.elapsedRealtime(); .

Las siguiente dos lineas es donde modificamos nuestra posición (x,y) en pantalla, para ello con el ángulo que nos resulto de los métodos anteriores, aplicamos un coseno en caso de la "X" y un seno en caso de la "Y" y multiplicamos por nuestra variable de tiempo "otro", con esto se obtiene el siguiente punto después del rebote con respecto al ángulo y por ultimo guardamos nuestro tiempo actual que pasa a ser "ultimoUpdate". Si también andas perdido esta parte de trigonometría consulta esta página Trigonometría.

Después de esto ya tenemos el engine de nuestra app solo faltaría la clase de nuestra actividad principal la cual quedaría así:

Como pueden ver es muy fácil hacer una animación en android, creo que lo más difícil fue la trigonometría usada jeje, la programación es muy sencilla teniendo claro a donde quieres llegar. Por último les dejo el código del proyecto por si quieren verlo corriendo es para netbeans, saludos y espero que les guste.

Links actualizados: 11/09/2012