Tutorial de animación para Android y ejemplos.

En términos generales, una animación es un medio dinámico en el que se manipulan imágenes u objetos para que aparezcan como imágenes en movimiento.

Eso es si Wikipedia es de creer. La Webopedia, por su parte, define la animación como una simulación de movimiento creada mediante la visualización de una serie de imágenes o fotogramas.

No es el arte de hacer que los dibujos se muevan, sino el arte de dibujar el movimiento, según Science World British Columbia.

Android nos proporciona una gran cantidad de APIs que podemos utilizar para animar varios objetos View.Así que siempre que la interfaz de usuario cambie en respuesta a la acción del usuario, debemos esforzarnos por animar las transiciones de diseño. Las animaciones son importantes ya que proporcionan a los usuarios información sobre sus acciones. Esto ayuda a mantenerlos orientados a la UI.

Para animar fácilmente los cambios entre dos jerarquías de vistas, podemos utilizar el Android Transitions Framework. Este framework nos anima las vistas en tiempo de ejecución. Lo hace cambiando algunos de los valores de las propiedades de esas vistas en el tiempo. Obtenemos animaciones incorporadas para efectos comunes. Además, a través de este Framework podemos crear animaciones personalizadas y callbacks del ciclo de vida de las transiciones.

Podemos señales visuales a través de las animaciones. Estas pueden notificar a los usuarios sobre lo que está sucediendo en nuestra aplicación. Especialmente cuando la interfaz de usuario cambia de estado, como por ejemplo cuando se carga un nuevo contenido o están disponibles nuevas acciones.

Android nos proporciona varias APIs de animación.

(a). Animaciones de mapa de bits

Android proporciona APIs de animación dibujables. Estas APIs se definen en la mayoría de los casos de forma estática con un recurso drawable. Sin embargo, también podemos definirlas en tiempo de ejecución. Estas APIs de animación nos permiten animar mapas de bits.

Animación de mapas de bits en Android](https://developer.android.com/training/animation/videos/drawable-animation.gif)

Encuentra más detalles aquí.

(b). Visibilidad de la UI y animaciones de movimiento

Muchas veces es necesario manipular la visibilidad o la posición de las vistas dentro de un diseño. En ese caso deberías incluir animaciones sutiles para ayudar al usuario a entender cómo está cambiando la UI.

Por ejemplo, puedes

  1. mover.
  2. revelar.
  3. ocultar vistas.Para ello puedes utilizar el sistema de animación de propiedades que proporciona el paquete android.animation. Este paquete está disponible en Android 3.0 (nivel de API 11) y superior.
    Estas APIs funcionan actualizando las propiedades de nuestros objetos View durante un periodo de tiempo. Así, las vistas se redibujan continuamente a medida que las propiedades cambian.

Encuentra más documentación aquí.

(c). Movimiento basado en la física

Puedes crear animaciones aplicando la física del mundo real, lo que hace que esas animaciones parezcan naturales. Por ejemplo, deben mantener el impulso cuando su objetivo cambia, y hacer transiciones suaves durante cualquier cambio.

La biblioteca de soporte de Android nos proporciona las APIs para crear estas animaciones. Esas APIs realmente aplican las leyes de la física para controlar cómo ocurren sus animaciones.

(d). Animaciones de diseño

El Transition Framework nos permite crear animaciones cuando cambiamos el layout dentro de la actividad actual del fragmento. Sin embargo, esto sólo es aplicable en Android 4.4(API Level 19) y superior.

Para ello, debes especificar el diseño inicial y final, y el tipo de animación que quieres utilizar. El sistema calculará y ejecutará una animación entre los dos diseños. Puedes usar esto para intercambiar toda la UI o para mover/reemplazar sólo algunas vistas.

(e). Animación de actividades

También puedes crear animaciones de transición entre actividades. Esto sólo es aplicable a Android 5.0 (nivel de API 21) y superior. De nuevo se basa en el mismo marco de transición descrito anteriormente para animar los cambios de diseño. Sin embargo, en este caso nos permite crear animaciones entre diseños en actividades separadas.

Podemos aplicar animaciones simples como deslizar la nueva actividad desde un lado o desvanecerla. También podemos crear animaciones que hagan la transición entre las vistas compartidas en cada actividad.

Se llama a startActivity(), pero se le pasa un conjunto de opciones proporcionadas por ActivityOptions.makeSceneTransitionAnimation(). Este paquete de opciones puede incluir qué vistas se comparten entre las actividades para que el marco de transición pueda conectarlas durante la animación.

ObjectAnimator

Tutorial y ejemplos de ObjectAnimator para Android.

ObjectAnimator es una clase que permite propiedades en los objetos de destino. Esta clase deriva de android.animation.ValueAnimator.

Ese ValueAnimator es responsable de proveer un motor de tiempo simple para ejecutar animaciones que calculan valores animados y los establecen en los objetos destino.

A través de los constructores de nuestro ObjectAnimator, pasamos el objeto objetivo que necesita ser animado. También pasamos el nombre de la propiedad a animar.

Definición de la API ObjectAnimator

El ObjectAnimator deriva de la clase ValueAnimator. Ambas residen en el paquete android.animation:

public final class ObjectAnimator
extends ValueAnimator

Aquí está su té de herencia:

java.lang.Object
   ↳    android.animation.Animator
       ↳    android.animation.ValueAnimator
           ↳    android.animation.ObjectAnimator

Establecer animaciones

Puedes configurar las animaciones tanto en el código como en el recurso estático xml. Aquí hay un ejemplo de configuración usando xml:

<objectAnimator
    android_duration="1000"
    android_valueTo="200"
    android_valueType="floatType"
    android_propertyName="y"
    android_repeatCount="1"
    android_repeatMode="reverse"/>

Para ver cómo establecer en el código, proceder a los ejemplos de abajo.

Ejemplos rápidos de ObjectAnimator

1. Cómo hacer un fade in y un fade out de una vista usando ObjectAnimator

Nuestro objetivo es crear métodos que nos permitan hacer un fade in y un fade out.

Primero vamos a crear una interfaz AnimationListener:

public interface AnimationListener {

    /**
     * We need to make our View visible
     * before fade in animation starts
     */
    interface OnAnimationStartListener{
        void onAnimationStart();
    }

    /**
     * We need to make View invisible
     * after fade out animation ends.
     */
    interface OnAnimationEndListener{
        void onAnimationEnd();
    }

}

Puedes ver que es una interfaz con dos firmas de métodos: onAnimationStart() y onAnimationEnd().

Entonces aquí está el método que se desvanece en una vista:

    /**
     * View will appear on screen with
     * fade in animation. Notifies onAnimationStartListener
     * when fade in animation is about to start.
     *
     * @param view
     * @param duration
     * @param onAnimationStartListener
     */
    public static void animateFadeIn(View view, long duration, final AnimationListener.OnAnimationStartListener onAnimationStartListener) {
        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(view, "alpha", 0f, 1f);
        objectAnimator.setDuration(duration);
        objectAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                if (onAnimationStartListener != null)
                    onAnimationStartListener.onAnimationStart();
            }

            @Override
            public void onAnimationEnd(Animator animation) {

            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        objectAnimator.start();
    }

Hemos inicializado el ObjectAnimator invocando el método estático ofFloat().
Luego hemos establecido la duración, un long que hemos recibido a través de nuestro método como parámetro. Para establecer la duración hemos utilizado el método setDuration().

Luego añadimos nuestro AnimatorListener, donde invocamos nuestro método personalizado AnimationListener.onAnimationStart() dentro del método onAnimationStart() de la clase android.animation.Animator.

¿Y qué pasa con el fading out?

Pues que volvemos a utilizar la clase ObjectAnimator. La diferencia es que esta vez invocamos el método onAnimationEnd() de nuestra interfaz personalizada AnimationListener y lo hacemos dentro del método Animator.OnAnimationEnd() del paquete android.animation.

/**
     * View will disappear from screen with
     * fade out animation. Notifies onAnimationEndListener
     * when fade out animation is ended.
     *
     * @param view
     * @param duration
     * @param onAnimationEndListener
     */
    public static void animateFadeOut(View view, long duration, final AnimationListener.OnAnimationEndListener onAnimationEndListener) {
        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(view, "alpha", 1, 0);
        objectAnimator.setDuration(duration);
        objectAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                if (onAnimationEndListener != null)
                    onAnimationEndListener.onAnimationEnd();
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        objectAnimator.start();
    }

Categorizado en:

Etiquetado en: