En este tutorial veremos como realizar animaciones con una secuencia de imágenes en Android Studio, las imágenes estarán almacenadas en la carpeta Drawable. En este tutorial crearemos una animación de una explosión, la animación cosiste en una boba que cuando la presionas va a explotar.
Hay varias maneras de crear una animación, de las mas simples y fáciles, es usando varias imágenes consecutivas. Y si es una animación sencilla, pocas imágenes pueden dar un excelente resultado.
En Android Studio tienes dos opciones principales para realizar una animación.
Una es usando Animation Drawable, en la que la animación consiste en una serie de imágenes consecutivas.
La otra opción es usar Animated Vector Drawable, en el que podrás animar las propiedades de un vector.
En este tutorial veremos como usar Animation Drawable. Donde usaremos una serie de imágenes, mostrando una después de otra para crear la animación.
Esto se logra usando la clase que ya tiene incluida Android Studio, llamada AnimationDrawable. Estas son las imágenes que usaremos:
Creando la animación.
Lo primero que tenemos que hacer, es crear una lista de imágenes.
Para esto se crea un archivo XML, dentro de la carpeta Drawables. Este archivo debe de tener el siguiente formato.
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item android:drawable="@drawable/bomba_1" android:duration="200"></item>
<item android:drawable="@drawable/bomba_2" android:duration="200"></item>
<item android:drawable="@drawable/bomba_3" android:duration="200"></item>
<item android:drawable="@drawable/bomba_4" android:duration="200"></item>
<item android:drawable="@drawable/bomba_5" android:duration="200"></item>
<item android:drawable="@drawable/bomba_6" android:duration="200"></item>
<item android:drawable="@drawable/bomba_7" android:duration="200"></item>
</animation-list>El nombre de nuestro XML va a ser “test_animation.xml”.
Resumen.
Básicamente creamos una lista de imágenes, a las que le decimos que imagen es y cuanto tiempo va a durar a la vista. Ademas de indicar si es un ciclo o solo se hace solo una vez.
- Animation list, es donde van las características de nuestra animación.
- Oneshot, si es True, significa que la animación solo va a realizarse una vez hasta nuevo aviso.
Si oneshot es false, significa que la animación se va a estar ciclando. - Item, aquí indicamos que imagen vamos a poner en la animación.
- Con duration, indicamos la duración de esa imagen.
Podemos agregar los item que necesitemos, con su respectiva imagen y duración, en este caso son 6.
Iniciar la animación en java.
Nuestra animación la vamos a cargar en una ImageView.
Para esto primero declaramos nuestra ImageView asociándola a nuestro XML que contiene la animación.
private ImageView animacion; private AnimationDrawable fondoAnimacion;
Luego usaremos la clase AnimationDrawable. Para declarar una variable y después para obtener el fondo de nuestra Image View.
animacion = findViewById(R.id.id_imagen); animacion.setBackgroundResource(R.drawable.test_animatios); fondoAnimacion = (AnimationDrawable) animacion.getBackground();
Para iniciar la animación solo usamos “.start”, en nuestra variable de animación.
animacion.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
fondoAnimacion.start();
}
});En este caso iniciaremos la animación al hacer click en la ImageView, de esta manera al presionar la bomba, se iniciará la animación y estallara.
El código quedaría así.
public class MainActivity extends AppCompatActivity {
private ImageView animacion;
private AnimationDrawable fondoAnimacion;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
animacion = findViewById(R.id.id_imagen);
animacion.setBackgroundResource(R.drawable.test_animatios);
fondoAnimacion = (AnimationDrawable) animacion.getBackground();
animacion.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
fondoAnimacion.start();
}
});
}
}Importante.
No debes usar el método start() dentro de OnCreate.
Si quieres iniciar tu Activty con la animación usa el método onStart() en ves de onCreate().
Así es correcto:
@Override
protected void onStart() {
super.onStart();
fondoAnimacion.start();
}Así no se debe hacer::
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
animacion = findViewById(R.id.id_imagen);
animacion.setBackgroundResource(R.drawable.test_animatios);
fondoAnimacion = (AnimationDrawable) animacion.getBackground();
fondoAnimacion.start();
}
Esperamos que este sencillo tutorial te de las bases para hacer animaciones mas complejas. En si es un tema muy común y de gran utilidad.