TransitionDrawableD

Un TransitionDrawable es una extensin de LayerDrawables que permite un efecto de fundido

entre la primera y la segunda capa. Para iniciar la transicin hay que llamar
a startTransition(inttiempo). Para volver a visualizar la primera capa hay que llamar
a resetTransition()..


Definiendo un un TransitionDrawable

1. Crea un nuevo proyecto con nombre Transition.
2. Crea el siguiente recursos en res/drawable/transicion.xml con el cdigo:

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android=
"http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/asteroide1"/>
<item android:drawable="@drawable/asteroide3"/>
</transition>
3. Reemplaza en la actividad el mtodo onCreate por el siguiente cdigo:

@Override public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ImageView image = new ImageView(this);
setContentView(image);
TransitionDrawable transition = (TransitionDrawable)
getResources().getDrawable(R.drawable.transicion);
image.setImageDrawable(transition);
transition.startTransition(2000);
}

4. Si todo funciona correctamente, vers cmo la llamada a transition.startTransition(2000)provoca
que la primera imagen se transforme a lo largo de dos segundos en la segunda imagen.

ANIMACIONES
El entorno de programacin Android incorpora tres mecanismos para crear animaciones en
nuestras aplicaciones:
La clase AnimationDrawable: Permite crear drawables que reproducen una
animacin fotograma a fotograma. Se ha descrito su uso en la seccin de
Drawables.
Animaciones Tween: Permiten crear efectos de translacin, rotacin, zoom y alfa a
cualquiera vista de nuestra aplicacin.
Animaciones de propiedades: Nuevo mecanismo incorporado en Android 3.0.
Permite animar cualquier propiedad de cualquier objeto, sea una vista o no. Adems
modifica el objeto en s, no solamente cambia su representacin en pantalla como
ocurre en un animacin Tween.
Las siguientes secciones describen con ms detalle estos tipos de animacin.

AnimationDrawable
Android nos proporciona varios mecanismos para crear animaciones. Una ventaja a destacar
es que estas animaciones pueden ser creadas en ficheros XML. En este apartado veremos una
de las animaciones ms sencillas, las creadas a partir de una serie de fotogramas. Para ello
utilizaremos la clase AnimationDrawable.

EJEMPLO: Uso de AnimationDrawable.
1. Crea un nuevo proyecto con nombre Animacion. Ha de crearse una actividad inicial con
nombreAnimationActivity.
2. Crea el siguiente recurso res/drawable/animacion.xml.

<animation-list
xmlns:android= "http://schemas.android.com/apk/res/android"
android:oneshot= "false">
<item android:drawable="@drawable/misil1"
android:duration="200" />
<item android:drawable="@drawable/misil2"
android:duration="200" />
<item android:drawable="@drawable/misil3"
android:duration="200" />
</animation-list>

3. Copia los ficheros misil1.png, misil2.png y misil3.png a la carpeta res/drawable.Los
encontrars enwww.androidcurso.com
4. Reemplaza el cdigo de la actividad por:

public class AnimacionActivity extends Activity {
AnimationDrawable animacion;
@Override public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
animacion = (AnimationDrawable)getResources().getDrawable(
R.drawable.animacion);
ImageView vista = new ImageView(this);
vista.setBackgroundColor(Color.WHITE);
vista.setImageDrawable(animacion);
vista.setOnClickListener(new OnClickListener() {
public void onClick(View view) {
animacion.start();
}
});
setContentView(vista);
}
}
En este ejemplo se comienza declarando un objeto animacion de la clase AnimationDrawable. Se
inicializa utilizando el fichero XML incluido en los recursos. Se crea una nueva vista de la
claseImageView para ser representada por la actividad y se pone como imagen de de esta
vistaanimacion. Finalmente se crea un escuchador de evento onClick para que cuando se
pulse sobre la vista se ponga en marcha la animacin.


Animaciones Tween
Una animacin tween puede realizar series de transformaciones simples (posicin,
tamao, rotacin y transparencia) en el contenido de un objeto View. Por ejemplo, si tienes
un objeto TextView puedes moverlo, rotarlo, aumentarlo, disminuirlo o cambiarle la
transparencia al texto.
La secuencia de rdenes que define la animacin tween puede estar escrita mediante
xml o cdigo, pero es recomendable el fichero xml, al ser mas legible, reutilizable e
intercambiable.
Las instrucciones de la animacin definen las transformaciones que quieres que ocurran,
cuando ocurrirn y cuando tiempo tardaran en completarse. Las transformaciones pueden
ser secuenciales o simultneas. Cada tipo de transformacin tiene unos parmetros
especficos, y tambin existen unos parmetros comunes a todas las transformaciones,
como el tiempo que durarn y el tiempo de inicio.
El fichero XML que define a la animacin debe pertenecer al directorio res/anim/en tu
proyecto Android. El archivo debe tener solo un nico elemento raz: este debe ser uno de
los siguientes:,<translate>, <rotate>, <scale>, <alpha> o elemento <set> que puede
contener grupos de estos elementos (adems de otro <set>). Por defecto, todas las
instrucciones de animacin ocurren a partir del instante inicial. Si quieres que una
animacin comience ms tarde debes especificar el atributo startOffset.

EJEMPLO: Creacin de una animacin Tween para animar una vista

1. Crea un nuevo proyecto con nombre AnimacionTween.
2. Crea el fichero res/anim/animacion.xml y pega el siguiente cdigo:

<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:duration="2000"
android:fromXScale="2.0"
android:fromYScale="2.0"
android:toXScale="1.0"
android:toYScale="1.0" />
<rotate
android:startOffset="2000"
android:duration="2000"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"/>
<translate
android:startOffset="4000"
android:duration="2000"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="50"
android:toYDelta="100" />
<alpha
android:startOffset="4000"
android:duration="2000"
android:fromAlpha="1"
android:toAlpha="0" />
</set>

3. Abre el fichero res/Layout/main.xml y aade el siguiente atributo a la vista de tipo TextView:
android:id="@+id/textView"
4. Abre la actividad del proyecto y aade las lneas marcadas en negrita al mtodo OnCreate().
@Override public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TextView texto = (TextView) findViewById(R.id.textView);
Animation animacion = AnimationUtils.loadAnimation(this,
R.anim.animacion);
texto.startAnimation(animacion);
}
5. Ejecuta la aplicacin.
Como podrs ver, el TextView comienza hacindose ms pequeo (etiqueta <scale>), despus rota
sobre s mismo (etiqueta <rotate>) y finalmente, se desplaza (etiqueta <translate>) a la vez que se hace
transparente (etiqueta <alpha>). Al finalizar la animacin, vuelve a su posicin y estado inicial, sin
importar donde ni como haya acabado.

Recursos adicionales: Lista de etiquetas de las animaiones tween y sus atributos
Los siguientes atributos son aplicables a todas las transformaciones:
startOffset Instante inicial de la transformacin en milisegundos.
duration duracin de la transformacin en milisegundos.
repeatCount nmero de repeticiones adicionales de la animaci
interpolator en lugar de realizar una transformacin lineal se aplica algn tipo de
interpolacin. Alguno de los valores posibles son:
accelerate_decelerate_interpolator, accelerate_interpolator,
anticipate_interpolator, anticipate_overshoot_interpolator,
bounce_interpolator, cycle_interpolator, decelerate_interpolator,
linear_interpolator, overshoot_interpolator
Lista de las transformaciones con sus atributos especficos:
<translate> Desplaza la vista
fromXDelta, toXDelta Valor inicial y final del desplazamiento en eje X
fromYDelta, toYDelta Valor inicial y final del desplazamiento en eje Y.
<rotate> Rota la vista.
fromDegrees, toDegrees Valor inicial y final en grados de la rotacin en grados.
Si quieres un giro completo en sentido antihorario pon de 0 a 360, y si lo quieres en
sentido horario, de 360 a 0 o de 0 a -360. Si quieres dos giros pon de 0 a 720.
pivotX, pivotY Punto sobre el que se realizar el giro. Este quedar fijo en la
pantalla.
<scale> Cambia el tamao de la vista
fromXScale,toXScale Valor inicial y final para la escala del eje X (0.5=50%,
1=100%)
fromYScale, toYScale Valor inicial y final para la escala del eje Y
pivotX, pivotY Punto sobre el que se realizar el zoom. Este quedar fijo en la
pantalla.
<alpha> Cambia la opacidad de la vista
fromAlpha, toAlpha Valor inicial y final de la opacidad