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.

Ejercicio paso a paso: 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

 

Práctica: Introduciendo animaciones en Asteroides

En esta práctica has de conseguir que los diferentes elementos del Layout inicial de Asteroides vayan apareciendo uno tras otro con diferentes efectos.

 

1. Abre el proyecto Asteroides.

2. Crea una nueva animación con nombre giro_con_zoom.xml. Ha de durar dos segundos y de forma simultánea ha de hacer un zoom de escala 3 a 1 y un giro de dos vueltas (720º). El punto de anclaje de la rotación y el zoom ha de ser el centro de la vista.

3. Selecciona el Layout main.xml y pon un id al TextView correspondiente al título.

4. En la actividad inicial de Asteroides, crea un objeto correspondiente a este TextView y aplícale la animación anterior.

5. Crea una nueva animación con nombre aparecer.xml. Ha de comenzar a los dos segundos, durar un segundo y modificar el valor de alpha de 0 hasta 1.

6. Aplica esta animación al primer botón.

7. Crea una nueva animación con nombre desplazamiento_derecha.xml. Ha de comenzar a los tres segundos, durar un segundo y modificar el valor de desplazamiento x de 400 hasta 0. Prueba también algún tipo de interpolación

8. Aplica esta animación al segundo botón.

9. Si dispones de tiempo crea dos nuevas animaciones a tu gusto y aplícalas al tercer y cuarto botón.

10. Aplica la animación giro_con_zoom.xmlal botón “Acerca de” cuando sea pulsado. Observa como al lanzar la nueva actividad AcercaDe, la actividad principal continua ejecutándose.

 

{jcomments on}