TransitionDrawableD

Un TransitionDrawable es una extensión de LayerDrawables que permite un efecto de fundido

entre la primera y la segunda capa. Para iniciar la transición 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 código: 

<?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 método onCreate por el siguiente código: 

@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, verás cómo 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 programación Android incorpora tres mecanismos para crear animaciones en

nuestras aplicaciones:

La clase   AnimationDrawable : Permite crear drawables que reproducen una

animación fotograma a fotograma. Se ha descrito su uso en la sección de

Drawables.

Animaciones Tween : Permiten crear efectos de translación, rotación, zoom y alfa a

cualquiera vista de nuestra aplicación.

Animaciones de propiedades : Nuevo mecanismo incorporado en Android 3.0.

Permite animar cualquier propiedad de cualquier objeto, sea una vista o no. Además

modifica el objeto en sí, no solamente cambia su representación en pantalla como

ocurre en un animación Tween.

Las siguientes secciones describen con más detalle estos tipos de animación.

AnimationDrawableAndroid 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 más 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-listxmlns: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

encontrarás enwww.androidcurso.com

4.     Reemplaza el código 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 animación.

 

Animaciones Tween

Una “animación tween” puede realizar series de transformaciones simples (posición,

tamaño, rotación 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 “animación tween” puede estar escrita mediante

xml o código, pero es recomendable el fichero xml, al ser mas legible, reutilizable e

intercambiable.

Las instrucciones de la animación definen las transformaciones que quieres que ocurran,

cuando ocurrirán y cuando tiempo tardaran en completarse. Las transformaciones pueden

ser secuenciales o simultáneas. Cada tipo de transformación tiene unos parámetros

específicos, y también existen unos parámetros comunes a todas las transformaciones,

como el tiempo que durarán y el tiempo de inicio.

El fichero XML que define a la animación debe pertenecer al directorio res/anim/en tu

proyecto Android. El archivo debe tener solo un único elemento raíz: este debe ser uno de

los siguientes:,<translate>, <rotate>, <scale>, <alpha> o elemento <set> que puede

contener grupos de estos elementos (además de otro <set>). Por defecto, todas las

instrucciones de animación ocurren a partir del instante inicial. Si quieres que una

animación comience más tarde debes especificar el atributo startOffset.

 

EJEMPLO: Creación de una animación 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 código: 

<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 añade el siguiente atributo a la vista de

tipo TextView:

android:id="@+id/textView"

4.     Abre la actividad del proyecto y añade las líneas marcadas en negrita al

método 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 aplicación.Como podrás ver, el TextView comienza haciéndose más pequeño (etiqueta <scale>), después rota sobre sí mismo (etiqueta <rotate>) y finalmente, se desplaza (etiqueta <translate>) a la vez que se hace transparente (etiqueta <alpha>). Al finalizar la animación, vuelve a su posición 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 transformación en milisegundos.

duration – duración de la transformación en milisegundos.

repeatCount – número de repeticiones adicionales de la animació

interpolator– en lugar de realizar una transformación lineal se aplica algún tipo de

interpolación. 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 específicos:

<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 rotación 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 tamaño 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