en Android

Desarrollo Android: Animando vistas, parte 1

Actualmente la tendencia es que las interfaces de usuario en las aplicaciones móviles incluyen más efectos y animaciones. Es por esto que voy a intentar dar un vistazo general de como animar vistas en android.

Para comenzar vamos a entender que todo lo que se pinta en una ventana son objectos de tipo vista. Por lo tanto, y si queremos, podemos tomar toda la ventana, animarla y luego volverla a dejar donde estaba. En este artículo voy a mencionar algunas APIs de android que están disponibles a partir de Honeycomb, pero también trataremos soluciones al respecto. A su vez mirarmos algunas herramientas del SDK de android y mostraré algo de código de ejemplo.

Manos a la obra!

Voy a asumir que ya tienes un entorno de desarrollo montado y funcionando y que lo único que debes hacer es abrirlo e iniciar un nuevo proyecto. Al final de este artículo puedes encontrar el proyecto nuestro entero para que lo bajes y lo corras.

Lo primero que animaremos será un texto “Hello world!” que tenemos en la pantalla, para eso, primero vamos obtener el TextView del layout y luego lanzaremos las animaciones valiéndonos de ObjectAnimator, veamos:

</pre>
@Override
 protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);

         TextView mTextView = (TextView)this.findViewById(R.id.mTextView);

         ObjectAnimator.ofFloat(mTextView, "rotationY", 0, 360).setDuration( 3 * 1000).start();
 }

Como se puede ver es super sencillo puesto que android tiene unas potentes apis para las animaciones. Lo que hacemos es crear un ObjectAnimator que anima variaciones de floats para una propiedad determinada. En este caso vamos a variar la rotación en el eje Y desde 0 a 360 grados. Luego le indicamos una duración de 3 segundos y finalmente la lanzamos.

Como dije al principio de esta entrada sólo están disponibles a partir de android 3, pero gracias a la comunidad de desarrolladores tenemos NineOldAndroids que es una capa de compatibilidad que emula a la perfección casi la totalidad de esas apis.

Ahora lo que vamos a hacer es escalar ese TextView haciéndolo más grande.

TextView mTextView = (TextView)this.findViewById(R.id.mTextView);</pre>
ObjectAnimator.ofFloat(mTextView, "scaleX", 1f, 2f).setDuration( 3 * 1000).start();

Es fácil! Puedes probar y echarle imaginación.

Ahora lo que vamos a hacer es pillar toda la ventana de nuestra aplicación y vamos a hacerle un fade mientras la escalamos. Para eso vamos a hacer un set de animaciones. Finalmente le añadiremos un listener que vea cuando finaliza la animación y la lance justamente al revés.

</pre>
final View windowDecor = (View)this.getWindow().getDecorView();
final ObjectAnimator scaleX = ObjectAnimator.ofFloat(windowDecor, "scaleX", 1f, 0f);
 final ObjectAnimator scaleY = ObjectAnimator.ofFloat(windowDecor, "scaleY", 1f, 0f);
 final ObjectAnimator alphaAnim = ObjectAnimator.ofFloat(windowDecor, "alpha", 1f, 0f);

 final AnimatorSet an = new AnimatorSet();
 an.playTogether(scaleX,scaleY,alphaAnim);
 an.setDuration( 3 * 1000);
 an.addListener(new AnimatorListener()
 {
@Override
         public void onAnimationCancel(Animator animation) {}

@Override
                 public void onAnimationEnd(Animator animation) {
                         scaleX.reverse();
                         scaleY.reverse();
                         alphaAnim.reverse();
                 }

@Override
                 public void onAnimationRepeat(Animator animation) {}

@Override
                 public void onAnimationStart(Animator animation) {}
                 }

);

 an.start();
<pre>

Como puedes ver hay varias cosas aquí. Por un lado hemos puesto todas las animaciones en un AnimatorSet al que le hemos dicho que corra todas las animaciones a la vez con una misma duración. Luego tenemos un AnimatorListener que nos permite saber cuando acaba la animación y finalmente el método reverse() que se encarga de hacer que la animación definida se ejecute justo al revés.
Por favor mira el código del ejemplo que adjunto (manifest y styles) porque hay un truco para que la ventana se haga transparente y se vea el resto del escritorio a la vez que se hace pequeña.

En este primer acercamiento hemos podido ver cómo de manera sencilla podemos realizar animaciones de vistas en Android. En la segunda parte veremos algunos otros ejemplos prácticos de cómo usar las apis de animaciones que nos permitirán cambiar el tamaño (no la escala) de una vista, más listeners, animar vistas fuera del layout, etc. También echaremos un vistazo rápido a UI Automator que nos permitirá mirar nuestro layout en tiempo de ejecución.
Espero que os haya sido útil

El proyecto
EjemploAnimaciones

Escribe un comentario

Comentario