Bienvenidos sean a este post, hoy dejaremos un poco a Asteroides de costado y hablaremos sobre animaciones. En Android disponemos de tres tipos de animaciones:

Anuncios
  • AnimationDrawable, permiten crear un drawable el cual creara una animacion por fotograma a fotograma.
  • Tween, mas conocidas como animaciones de vistas y permite crear efectos de rotacion, translacion, zoom y transparencia en cualquier vista
  • Animacion de propiedades, permite animar una propiedad de cualquier objeto sea una vista o no

Con las tres animaciones comentadas pasemos a hablar sobre el tipo de animaciones Tween. Este tipo de animaciones como dijimos antes permite ejecutar efectos sobre el contenido de un objeto de la clase View, para lograr esta animacion la secuencia debe ser escrita por XML o por codigo pero es mas recomendable por XML dado que es mas facil de leer, analizar o intercambiar, estas son definidas por medio de instrucciones y estas definiran como ocurriran, donde ocurriran y cuanto duraran, tambien pueden ser simultaneas o secuenciales. El fichero que define la animacion debe estar en res/anim/ de nuestro proyecto Android, para entender mejor el concepto hagamos un ejemplo y para ello abramos Android Studio y seleccionamos Start a new Android Studio project

android50

Una vez seleccionado nos aparecera el siguiente cuadro

android51

Aca modificaremos Application Name con el valor AnimacionTween, y en Company Domain pueden utilizar example.org o si disponen de uno propio, como es mi caso, pueden utilizarlo, despues de modificado estos dos campos pulsen Next para pasar al siguiente cuadro

android52

Aca deberan seleccionar solamente Phone And Tablet, con la API minima disponible, despues pulsen Next para pasar al siguiente cuadro

android53

En este cuadro deben seleccionar Empty Activity, pulsen Next para pasar al siguiente cuadro

android54
Anuncios

Aca deben dejar todo como se ve en la imagen, debera aparecer por defecto los valores mostrados sino modifiquenlo como se ve en la imagen, por ultimo presionen Finish para comenzar la creacion de nuestro proyecto. Ahora procederemos con la creacion de nuestra animacion para ello debemos hacer click con el boton derecho la carpeta de los recursos llamado res, seleccionen New -> Android resource file como se ve en la siguiente imagen

android55

Una vez seleccionado nos aparecera el sigiiente cuadro

android56

En este cuadro modificaremos el campo File name por animacion, en Resource type elegiremos Animation, Root element debera ir set, en Source set debera ir main, y en Directory name pondremos anim (si no setea automaticamente) por ultimo pulsamos Ok para cerrar el cuadro y comenzar la generacion de nuestro archivo, una vez finalizado quedara de la siguiente forma

android57

Con esto concluido veamos el codigo de nuestro archivo generado, animacion.xml:

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

</set>

Lo modificaremos con el siguiente codigo:

Anuncios
<?xml version="1.0" encoding="utf-8"?>
<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>

En este codigo podemos ver cuatro tipos de modificaciones para la animacion del tipo Tween, por ahora no entraremos en mucho mas detalle, simplemente observen como cada modificacion va a seguir a la otra por medio del startOffset y por medio de la duracion definida por duration. Ahora vamos a modificar nuestro archivo activity_main.xml agregando la siguiente linea dentro de nuestro elemento TextView:

android:id="@+id/textView"

El elemento quedara de la siguiente forma:

<TextView
     android:id="@+id/textView"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Hello World!"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintLeft_toLeftOf="parent"
     app:layout_constraintRight_toRightOf="parent"
     app:layout_constraintTop_toTopOf="parent" />

Procedamos a realizar la siguiente modificacion en nuestra clase MainActivity pero antes veamos la porcion del codigo ha modificar:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
}

Veamos la modificacion que debemos realizar:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    TextView texto = (TextView) findViewById(R.id.textView);
    Animation animacion = AnimationUtils.loadAnimation(
            this,R.anim.animacion);
    texto.startAnimation(animacion);
}

Nuestro codigo final quedara de la siguiente manera:

package org.example.animaciontween;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView texto = (TextView) findViewById(R.id.textView);
        Animation animacion = AnimationUtils.loadAnimation(
                this,R.anim.animacion);
        texto.startAnimation(animacion);
    }
}
Anuncios

Con esta modificacion podremos probar nuestra app, veamos antes una breve explicacion de la modificacion para poder ejecutar la animacion, primero crearemos un link entre el elemento textView y el codigo Java por medio de la siguiente linea:

TextView texto = (TextView) findViewById(R.id.textView);

En esta crearemos un objeto llamado texto de la clase TextView y luego por medio del metodo findViewById() le indicaremos a cual elemento debe buscar, para esto fue la modificacion de nuestro archivo XML, luego crearemos un objeto llamado animacion  de la clase Animation, por medio del paquete AnimationUtils y su metodo loadAnimation() le informaremos en cual lugar se mostrara (this) y cual es el elemento a utilizar, por ultimo a nuestro objeto llamado texto utilizaremos el metodo startAnimation(), el cual dara inicio a la animacion, y por medio del objeto animacion, si lo probamos obtendremos el siguiente resultado tal como se ve en este video

Si chequean el video podran ver como la palabra Hello, World! va sufriendo varias modificaciones, primero se reduce (por la etiqueta < scale >), luego rota (por la etiqueta < rotate >), despues se traslada (por la etiqueta < translate >) y al mismo tiempo desaparece (por la etiqueta < alpha >), y una vez finalizado vuelve a su posicion inicial sin importar como ni donde haya acabado. Ahora hablaremos sobre algunos de los elementos visto en nuestro archivo animacion.xml:

  • startOffset, punto de inicio de un transformacion, en milisegundos
  • duratiom, duracion de la transformacion, en milisegundos
  • repeatCount, numero de repeticiones de una animacion
  • interpolator, no realiza una transformacion lineal sino aplica algun tipo de interpolacion.

Ahora vea las transformaciones utilizadas con algunos de sus modificadores:

Anuncios

< scale >

  • fromXScale y fromYScale, valor inicial para el eje X e Y respectivamente
  • toXScale y toYScale, valor final para el eje X e Y respectivamente
  • pivotX y pivotY, punto donde se realizara el zoom

Los valores para la escala son: 1 (100%), 0.5 (50%) y 0(0%)

< rotate >

  • fromDegrees, valor inicial en grados de la rotacion
  • toDegress, valor final en grados de la rotacion

Por ejemplo para iniciar un giro antihorario deberian setear el fromDegrees en 0 y el toDegrees en -360 y para varios el fromDegrees en 0 y el toDegrees en 720

< translate >

  • fromXDelta, toXDelta – valor inicial y final del eje X respectivamente
  • fromYDelta, toYDelta – valor inicial y final del eje Y respectivamente

< alpha >

  • fromAlpha, valor inicial de la opacidad
  • toAlpha, valor final de la opacidad

Para translate y alpha les recomiendo ver el ejemplo para entenderlo pero es bastante simple.
Por ultimo hablaremos un poco sobre las animaciones de propiedades, en este caso aparecieron de la version 3.0 (Nivel API 11), su principal ventaja sobre las animaciones es que a diferencia de las Tween que se aplican a las vistas estas pueden ser aplicadas a cualquier objeto y no esta restringida a las cuatro animaciones anteriores, por ejemplo podriamos hacer cambios de color progresivos, otra ventaja de este tipo de animacion es que solo modifican la vista y no las propiedades de la misma, por ejemplo si nosotros utilizaramos una animacion para desplazar un texto con un animacion de tipo TWEEN esta se ejecutaria pero al final volveria a su estado inicial por lo que deberiamos hacer una condicion para que una vez finalizada no vuelva a su posicion inicial, en cambio con una animacion de propiedad esto no ocurre pero como esta forma de hacer animaciones es un poco mas compleja no lo veremos por ahora pero en un futuro seguramente.

Anuncios

En resumen, hoy hemos visto las animaciones en Android, por lo menos hemos mencionado tres tipos, de los cuales los dos primeros seran los mas utilizados por nosotros, hemos creado un breve ejemplo para poder ver los distintos tipos de animaciones de Tween y hemos hablado un poco sobre las animaciones de propiedades, espero les haya sido util, sigueme en Twitter, Facebook o Google+ para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Tambien podes donar

Es para mantenimiento del sitio, gracias!

$1.00