6.4.1.-Programación Android-Splash (II)

6.4.1.- Programación en Android – Creando nuestra Splash (II)

En este capítulo veremos algunos de los métodos de los que disponemos en android para realizar animaciones, centrandonos principalmente en la animación interpolada (Tween Animation), ya que será este tipo de animación el que apliquemos a nuestra pantalla Splash.

Métodos para hacer animaciones

En android podemos realizar las animaciones de diversas formas:

Método	Descripción
Animaciones GIF	Los ficheros GIF pueden contener ficheros de animación con varios fotogramas.
Fotograma a fotograma	Con el SDK de android podemos hacer animaciones de tipo fotograma a fotograma, para ello debemos de tener los fotogramas en ficheros individuales. Normalmente se crea un fichero XML que define los ficheros que tienen la animación y su duración. Ver clase AnimationDrawable.
Animación por Interpolación.	Este método es una forma de realizar animaciones fácilmente, definiendo operaciones en ficheros XML que serán aplicadas a las vistas o a los layouts.
Animación mediante OpenGL ES	Android tiene soporte para la API de OpenGl ES y con ella podemos realizar animaciones tridimensionales, iluminación texturas, etc...

Como para nuestra pantalla de Splash vamos a utilizar las animaciones mediante interpolación de movimientos vamos a verlas con un poco más de detalle...

Las animaciones interpoladas Android nos permite realizarlas mediante operaciones sobre el canal Alpha (transparencias), rotación, escala y traslación. Podemos crear varias operaciones a ser realizadas e indicar el tiempo inicial, su duración y el tiempo final, entre otras cosas. Este tipo de animaciones las podremos hacer mediante programación o creando recursos de animación en la carpeta res/anim. Cada fichero de animación debe estar contenido en un fichero XML, y también podemos hacer uso de los que ya están incluidos con el sistema, en la clase android.R.anim.

Animación Interpolada (Tweened Animation)

( El siguiente archivo dentro de la carpeta con el SDK de Android contiene más información sobre este tipo de animación : android-sdk-windows-r15/docs/guide/topics/resources/animation-resource.html.)

Lo que a viene a continuación está en la ayuda del SDK de Android, pero en inglés, así que voy realizar una traducción en español para los que no se defiendan muy bien con la lengua de Shakespeare.

La animación interpolada (Tweened Animation) al igual que la animación fotograma a fotograma, puede ser declarada en un fichero XML, (pertenecen al View Animation framework), y como se dijo anteriormente permite realizar operaciones de rotación, desvanecimiento (fading), movimiento y escalado sobre un gráfico. Los ficheros XML deben estar situados en res/anim/nombre_animacion.xml. “nombre_animacion” será el ID del recurso. Para hacer referencia al mismo a través de Java será como R.anim.nombre_animacion y a través de XML como @[package:]anim/nombre_animacion.

La sintaxis podría ser:

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"     android:interpolator="@[package:]anim/interpolator_resource"     android:shareInterpolator=["true" | "false"] >     <alpha         android:fromAlpha="float"         android:toAlpha="float" />     <scale         android:fromXScale="float"         android:toXScale="float"         android:fromYScale="float"         android:toYScale="float"         android:pivotX="float"         android:pivotY="float" />     <translate         android:fromXDelta="float"         android:toXDelta="float"         android:fromYDelta="float"         android:toYDelta="float" />     <rotate         android:fromDegrees="float"         android:toDegrees="float"         android:pivotX="float"         android:pivotY="float" />     <set>         ...     </set> </set>

El fichero debe tener un único elemento raíz, pudiendo el elemento ser <alpha>, <scale>, <translate>, <rotate> o <set> y que contiene un grupo de elementos de animación.

Elemento	Atributos	Descripción
<set>		Es un contenedor para otros elementos de animación.(<alpha>, <scale>, <translate>, <rotate> o <set>)
	android:interpolator	Recurso interpolator. Es un recurso de tipo interpolator para aplicar a la animación. El valor es una referencia a un recurso que especifica un interpolador (no es un nombre de clase interpolator). Existen algunos que vienen incorporados en la plataforma Android, o se pueden crear recursos propios.
	android:shareInterpolator	Valor booleano. “true” indica que se compartirá el interpolador con los elementos hijos.
<alpha>		Animación de tipo fade-in o fade-out (fundidos). Representa a la clase AlphaAnimation.
	android:fromAlpha	Valor float. Valor inicial de opacidad. 0.0 para transparente y 1.0 para opaco.
	android:toAlpha	Valor float. Valor final de opacidad. 0.0 para transparente y 1.0 para opaco.
<scale>		Una animación de escalado. Se puede especificar el punto central de la imagen a partir del cual crece o decrece especificando los valores pivotX y pivotY. Si por ejemplo los valores son 0,0 (esquina superior-izquierda) todo el crecimiento se realizaría hacia abajo y a la derecha. Representa a la clase ScaleAnimation.
	android:fromXScale (android:fromYScale)	Valor float. Valor de tamaño X (o Y) inicial. 1.0 indica que no hay cambio.
	android:toXScale (android:toYScale)	Valor float. Valor de tamaño X (o Y) final. 1.0 indica que no hay cambio.
	android:pivotX (android:pivotY)	Valor float. Valor de la coordenada X (o Y) que permanece fijo cuando se realiza el escalado.
<translate>		Realiza un movimiento horizontal o vertical. Los atributos pueden tener los siguientes formatos: valores de -100 a 100 terminando en %, indicando un % relativo al propio objeto; valores de -100 a 100 terminando en %p, indicando un porcentaje relativo al padre; un valor float sin sufijo, indicando un valor absoluto. Representa a la clase TranslateAnimation.
	android:fromXDelta (android:fromYDelta)	Valor float o porcentaje. Posición X (o Y) inicial. Expresado en pixels relativos a la posición normal (“10”), en porcentaje relativo al ancho (o alto) del elemento (“40%”), o en porcentaje relativo al ancho (o alto) del objeto padre (“40%p”).
	android:toXDelta (android:toYDelta)	Valor float o porcentaje. Posición X (o Y) final. Expresado en pixels relativos a la posición normal (“10”), en porcentaje relativo al ancho (o alto) del elemento (“40%”), o en porcentaje relativo al ancho (o alto) del objeto padre (“40%p”).
<rotate>		Una animación de rotación. Representa a la clase RotateAnimation.
	android:fromDegrees	Valor float. Indica la posición angular inicial en grados.
	android:toDegrees	Valor float. Indica la posición angular final en grados.
	android:pivotX (android:pivotY)	Valor float o porcentaje. La coordenada X (o Y) del centro de la rotación. Expresado en pixels relativos al borde izquierdo (o superior) del objeto (“10”), en porcentaje relativo al borde izquierdo (o superior) del objeto (“40%”), o en porcentaje relativo al borde izquierdo (o superior) del objeto padre (“40%p”).
Nota: Ver la referencia de la clase Animation, de la que esta hereda para ver otros atributos que pueden ser aplicados.
Este código aplicaría la animación a un ImageView e iniciaría la aplicación: ImageView image = (ImageView) findViewById(R.id.image); Animation hyperspaceJump = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump); image.startAnimation(hyperspaceJump);

Interpoladores (Interpolators)

Un interpolador (interpolator) es un modificador de la animación definido en un fichero XML que afecta la velocidad de cambio de la animación. Permite a nuestros efectos de animación el ser acelerados, decelerados, repetidos, etc...

El interpolator se aplica a la animación con el atributo android:interpolator, y cuyo valor indica una referencia a un recurso del tipo interpolator.

Todos los interpoladores de android son subclases de la clase Interpolator. Para cada clase Interpolator android incluye un recurso público al que podemos hacer referencia para aplicar nuestra animación. Veamos algunos de estos interpoladores:

Clase interpolator	ID de recurso
AccelerateDecelerateInterpolator	@android:anim/accelerate_decelerate_interpolator
AccelerateInterpolator	@android:anim/accelerate_interpolator
AnticipateInterpolator	@android:anim/anticipate_interpolator
AnticipateOvershootInterpolator	@android:anim/anticipate_overshoot_interpolator
BounceInterpolator	@android:anim/bounce_interpolator
CycleInterpolator	@android:anim/cycle_interpolator
DecelerateInterpolator	@android:anim/decelerate_interpolator
LinearInterpolator	@android:anim/linear_interpolator
OvershootInterpolator	@android:anim/overshoot_interpolator
Mediante el siguiente código (en XML) podemos aplicar el interpolador: <set android:interpolator="@android:anim/accelerate_interpolator">     ... </set>

Crear nuestros propios interpoladores (interpolators)

En caso de que los anteriores interpoladores no se adapten a lo que nosotros requerimos, entonces podemos crear los nuestros propios con atributos modificados. Por ejemplo podríamos ajustar la velocidad de aceleración para el interpolador AnticipateInterpolator, o ajustar el número de ciclos para el interpolador CycleInterpolator, pero para ello tendríamos que crear nuestro propio recurso interpolator en un fichero XML. Este fichero XML debemos crearlo en la carpeta res/anim.

La sintaxis sería así:

<?xml version="1.0" encoding="utf-8"?> <InterpolatorName xmlns:android="http://schemas.android.com/apk/res/android"     android:attribute_name="value"     />

Si no aplicamos ningún atributo nuestro interpolador funcionará igual que los que nos proporciona la plataforma.

Los siguientes son los elementos que podemos alterar:

Elemento	Descripción	Atributos
<accelerateDecelerateInterpolator>	La velocidad del cambio comienza y finaliza lentamente, pero se acelera hacia la mitad.	Ninguno.
<accelerateInterpolator>	Comienza lentamente para acelerar después.	android:factor Valor float que indica la velocidad de aceleración (por defecto 1)
<anticipateInterpolator>	El cambio comienza hacia atrás y después va hacia delante.	android:tension Valor float que indica la cantidad de tensión a aplicar, por defecto es 2.
<anticipateOvershootInterpolator>	El cambio comienza hacia atrás, luego hacia delante hasta sobrepasar el valor de destino para después quedar fijo en el valor final.	android:tension Valor float que indica la cantidad de tensión a aplicar, por defecto es 2. android:extraTension Valor float que indica el valor por el que multiplicar la tensión, por defecto es 1.5.
<bounceInterpolator>	El cambio rebota en el final.	Sin atributos.
<cycleInterpolator>	Repite la animación el número de ciclos indicado. La velocidad del cambio sigue un patrón senoidal.	android:cycles Valor Integer que indica el número de ciclos, por defecto es 1.
<decelerateInterpolator>	La velocidad del cambio comienza de forma rápida y después se frena.	android:factor Valor float que indica la velocidad de deceleración, por defecto 1.
<linearInterpolator>	La velocidad del cambio es constante.	Sin atributos.
<overshootInterpolator>	El cambio avanza hasta sobrepasar el valor de destino y después vuelve hacia atrás.	android:tension Valor float que indica la cantidad de tensión a aplicar, por defecto es 2.
Nota: Fijarse en que cada implementación de Interpolator cuando está definida en XML comienza con minúsculas.
Por ejemplo creamos un fichero XML en res/anim/my_overshoot_interpolator.xml con lo siguiente: <?xml version="1.0" encoding="utf-8"?> <overshootInterpolator xmlns:android="http://schemas.android.com/apk/res/android"     android:tension="7.0"     /> Y mediante la siguiente animación en XML aplicamos ese interpolador: <scale xmlns:android="http://schemas.android.com/apk/res/android"     android:interpolator="@anim/my_overshoot_interpolator"     android:fromXScale="1.0"     android:toXScale="3.0"     android:fromYScale="1.0"     android:toYScale="3.0"     android:pivotX="50%"     android:pivotY="50%"     android:duration="700" />

Bien, en el capítulo siguiente utilizaremos lo visto en este para añadir unos recursos de animación para nuestra pantalla Splash.

Ver. 1.0 – Revisión 03/02/2012