Animaciones en Android

Una animación es el proceso de cambiar propiedades de un objeto como el tamaño, la forma o el color en un intervalo de tiempo de tal  manera que el cambio parezca continuo.

En las aplicaciones móviles las animaciones permiten enriquecer la interacción del usuario con la aplicación. Una animación puede por ejemplo ayudar al usuario a entender el funcionamiento de la aplicación o simplemente optimizar el uso del espacio.

Android provee dos mecanismos ampliamente utilizados para la creación de animaciones, “Property animation” (Desde Android 3.0) y  “View Animations”. En los «View animations» se definen la animación en un archivo xml y en los «Property animation» se describen especificando la propiedad y parámetros de interpolación. Los “Property animation” son sin duda más  flexibles, eficientes y tienen más prestaciones.

Elementos de de una animación

Para definir una animación en Android se especifica una propiedad a cambiar como la posición, el tamaño de letra o la transparencia de un objecto, un valor inicial, un valor final y un tiempo de animación y un método de interpolación. El método de interpolación determinara la función matemática utilizada para variar la propiedad entre los valores inicial y final. Si bien Android tiene algunos métodos de interpolación definidos es posible crear personalizados. Tambien es posible encadenar multiples animaciones usando la propiedad android:startOffset para ejecutarlas en un orden especifico.

LinearInterpolator AnticipateOvershootInterpolator BounceInterpolator CycleInterpolator DecelerateInterpolator OvershootInterpolator AccelerateDecelerateInterpolator AccelerateInterpolator AnticipateInterpolator

Funcion Interpolación Lineal f(x) =x

View Animations

Las animaciones de vista son transformaciones donde se especifica la propiedad a cambiar y un intervalo de tiempo y Android se encargara de interpolar la variable en los rangos especificados. La animación se define un xml especificando la propiedades y valores de configuración.  Pueden definirse cuatro tipos diferentes de transformaciones (<alpha>, <scale>, <translate>, <rotate>). Las animaciones de vista se declaran en la carpeta de recursos Anim.

Carpeta de recursos para las animaciones.

Para animar un objecto usamos AnimationUtils.loadAnimation que carga la definicion (xml) de la configuración de la animación, e iniciamos su ejecución en el componente deseado.

textView = (TextView) findViewById(R.id.textView);
Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.alpha);
textView.startAnimation(animation);

Animación de Traslación (Translate Animation )

Este tipo de animación permite cambiar la ubicación de los componentes en el eje horizontal o vertical . Es posible configurar la posición inicial y final usando fromXDelta, toXDelta, fromYDelta, toYDelta. Cada uno de estos atributos puede especificarse usando.

• Valor tipo flotante especificando el la posición absoluta.
• Valores entre -100 y 100 seguidos de % indicando el porcentaje de traslación de acuerdo al la posición del componente.
• Valores entre  -100 y 100 seguidos de %p indicando el porcentaje de traslación de acuerdo al la posición del componente padre.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >
    <translate
        android:duration="100"
        android:fromXDelta="0%p"
        android:toXDelta="55%p" />
</set>

Animación de Transparencia (Alpha Animation )

Las animaciones de transparencia permiten interpolar los valores de transparencia de los elementos, son típicas de los efectos típicos desvanecer y aparecer.

<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >

    <alpha
        android:duration="1000"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="1.0" />

</set>

Animación de Rotación (Rotate animation)

Las animaciones de rotación permiten la rotar en una cantidad de ángulos determinados un componente.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >

    <rotate
        android:duration="4000"
        android:fromDegrees="0"
        android:toDegrees="360"
        android:interpolator="@android:anim/accelerate_interpolator"/>

</set>

Animación de Tamaño (Scale Animation)

Las animaciones de tamaño (Scale) permiten interpolar el tamaño de los componentes. Es posible escalar el tamaño en en eje vertical (Y) y el eje horizontal (y).

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >
    <scale
        android:duration="1000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:toXScale="4"
        android:toYScale="4" />
</set>

Property animations

Las animaciones de propiedades son muchos mas versatiles y permiten interpolar casi cada propiedad de un componente gráfico de la interfaz. Para declarar este tipo de animaciones se utiliza la clase ObjectAnimator especificando el tipo de propiedad , el tiempo de animacion y los valores iniciales y finales.

ObjectAnimator anim = ObjectAnimator.ofFloat(textView, "textSize", 25.0f, 50.0f);
anim.setDuration(1000);
anim.setInterpolator(new LinearInterpolator());
anim.start();

Eso es todo!. En la aplicación de ejemplo podrán encontrar el código ejemplo de cada uno de las animaciones que pueden revisar seleccionando el menú principal.