Crear Animación Android con XML

Introducción

Una buena selección de colores, componentes bonitos y una excelente armonía son la clave de una buena interfaz, empero, existen ocasiones en que todo esto no es suficiente para darle al usuario la mejor experiencia, por lo que es necesario agregar animaciones.

Crear componentes animados podría llegar a ser un dolor de cabeza, sin embargo, en la actualidad Android ofrece una serie de herramientas que facilita mucho el proceso. En este post veremos cómo hacer uso de ellas para crear, asignar y ejecutar una animación en componentes Android.

Creando una animación

Paso 1: Definir la interfaz

Para este ejemplo ocuparé la siguiente interfaz:

Puedes descargarla desde mi repositorio:

GitHub - Oliver404/android-basic-animation at jump

🚨 Solo una animación

Esta es una rama que únicamente incluye la animación de brincar realizada en el post, puedes descargar el código de la rama master para obtener todas las animaciones.

Paso 2: Crear animación

Esta es la animación que realizaremos durante el post (pero en el anexo podrás encontrar más animaciones):

Paso 2.1: Crear carpeta anim

Lo primero que se debe hacer es crear la carpeta de recursos anim , para ello ubicamos la carpeta res:

Daremos clic derecho en esta, y en menú desplegado seleccionaremos New > Android Resource Directory:

Esto desplegará una nueva ventana:

En esta seleccionaremos anim en la opción Resource type:

Tras seleccionar, tanto Directory name cómo Resource type cambiarán su valor:

Finalmente solo habrá que dar clic en el botón OK:

Esto creará la carpeta anim dentro de res, en esta carpeta es donde se definen los recursos de tipo animación:

Paso 2.2: Crear animación

Ahora crearemos el archivo .xml de la animación, para ello daremos clic derecho en la carpeta anim y seleccionaremos la opción New > Animation Resource File en el menú desplegable:

De nuevo se desplegará una ventana emergente, similar a la siguiente:

En su defecto, se desplegará una ventana como la que está a continuación; esto depende de la vista que estés ocupando para los visualización de la estructura del proyecto:

Ahora ingresamos jump en File name, ya que este será el nombre que le asignaremos a la animación y dejaremos set como Root element. En mi caso ocupo la vista Project Files, por lo que se ve de la siguiente forma:

En caso de tener la otra vista, los demás campos los dejaremos por defecto.

Ahora damos clic en el botón OK para generar recurso, al mismo tiempo Android Studio abrirá el archivo jump.xml:

Es en este archivo donde declaramos las acciones de nuestra animación:

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

Lo primero es hacer que nuestro elemento rote (iré mostrando los resultados del ejemplo, en el siguiente punto veremos cómo asignarlo a un elemento de la vista), para ello es necesario agregar la etiqueta rotate con los atributos fromDegrees para indicar desde donde rotará, toDegrees que determina hasta donde rotará y duration el tiempo que tardará en hacer la rotación:

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shareInterpolator="false">  
    <rotate  
        android:fromDegrees="0"  
        android:toDegrees="10"  
        android:duration="200"/>  
</set>

Ahora será necesario hacer que el elemento suba, para ello agregue el elemento translate; es necesario señalar desde donde partirá con los atributos fromYDelta y fromXDelta, y hasta donde llegará con toYDelta y toXDelta, al igual que en rotate es necesario indicar la duración con duration:

<set xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shareInterpolator="false">  
    <rotate  
        android:fromDegrees="0"  
        android:toDegrees="10"  
        android:duration="200"/>  
    <translate        
	    android:fromYDelta="0"   
        android:fromXDelta="0"  
        android:toYDelta="-200" 
        android:toXDelta="36"  
        android:duration="200"/>  
</set>

Finalmente habrá que hacer la animación para la caída, que básicamente es hacer la inversa de lo que ya hicimos, con excepción de que es necesario agregar el atributo startOffset para indicar cuánto tiempo tiene que esperar antes de ejecutarse:

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shareInterpolator="false">  
	<!-- go up -->  
    <translate        
	    android:fromYDelta="0"  
        android:toYDelta="-200"  
        android:fromXDelta="0"  
        android:toXDelta="36"  
        android:duration="200"/>  
    <rotate  
        android:fromDegrees="0"  
        android:toDegrees="10"  
        android:duration="200"/>  
  
    <!-- go down -->  
    <rotate  
        android:fromDegrees="0"  
        android:toDegrees="-10"  
        android:duration="100"  
        android:startOffset="200"/>  
    <translate        
	    android:fromYDelta="0"  
        android:toYDelta="200"  
        android:duration="200"  
        android:startOffset="300"/>  
</set>

Paso 2.3: Asignar la animación

Ejecutar la animación es muy sencillo, para ello se tiene que declarar un objeto de tipo Animation que se instancia con ayuda de la clase AnimationUtils y su método loadAnimations, al cual le tendremos que pasar dos parámetros, el context y la referencia a nuestro recurso de animación, R.anim.jump (donde jump representa el nombre de la animación) en este caso:

// Kotlin
val jumpAnimation: Animation = AnimationUtils.loadAnimation(this, R.anim.jump)

// Java
Animation jumpAnimation = AnimationUtils.loadAnimation(this, R.anim.jump);

Finalmente hacemos que el elemento de la vista ejecute la animación mediante el método startAnimation al cual le pasamos nuestro objeto de tipo Animation:

// Kotlin
view.startAnimation(jumpAnimation)

// Java
view.startAnimation(jumpAnimation);

Mi código ha quedado de la siguiente forma:

// Kotlin
val jumpAnimation: Animation = AnimationUtils.loadAnimation(this, R.anim.jump) 
imgvwAnimated.startAnimation(jumpAnimation)

// Java
Animation jumpAnimation = AnimationUtils.loadAnimation(this, animationSelected);
imgvwAnimated.startAnimation(jumpAnimation);

En este ejemplo he configurado la animación para que se ejecute cuando el usuario da clic a un botón, pero podrás ejecutarla cuando lo necesites. Ahora toca crear tus propias animaciones, recuerda que puedes hacer combinaciones entre las diferentes animaciones (alpha, scale, translate entre otros) te dejo el link a la documentación oficial, para que profundices un poco:

Animations and Transitions | Android Developers

Espero que te haya sido de ayuda, gracias por leerme y te veo en un siguiente post.

Si te ha gustado te invito a que me sigas y dejes en los comentarios sobre que te gustaría que escribiera mi siguiente post.

Contacto 👾

No te olvides de seguirme en mis redes sociales:
Github — https://github.com/Oliver404
Instagra — https://www.instagram.com/oliver.botello/
Twitter — https://twitter.com/oliver_botello

Anexo

Como mencione en el artículo, puedes realizar diversas animaciones y tu imaginación es el límite, sin embargo, dejo algunas de las más comunes:

Fade In

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android">  
    <alpha        
	    android:fromAlpha="0"  
        android:toAlpha="1"  
        android:duration="1000"/>  
</set>

Fade Out

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android">  
    <alpha        android:fromAlpha="1"  
        android:toAlpha="0"  
        android:duration="1000"/>  
</set>

Zoom in

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android">  
    <scale        
	    android:fromXScale="0"  
        android:fromYScale="0"  
        android:toXScale="1"  
        android:toYScale="1"  
        android:pivotX="50%"  
        android:pivotY="50%"  
        android:duration="1000"/>  
</set>

Zoom out

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android">  
    <scale        
	    android:fromXScale="1"  
        android:fromYScale="1"  
        android:toXScale="0"  
        android:toYScale="0"  
        android:pivotX="50%"  
        android:pivotY="50%"  
        android:duration="1000"/>  
</set>

Enter up

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android">  
    <translate    
        android:fromYDelta="500%"  
        android:toYDelta="0%"  
        android:duration="1000"/>  
</set>

Exit Down

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android">  
    <translate        
	    android:fromYDelta="0%"  
        android:toYDelta="500%"  
        android:duration="1000"/>  
</set>

🚨 Importante

Para las animaciones Enter Up y Exit down use 500% ya que en mi caso era suficiente para que elemento salga de la vista, sin embargo, puede que necesites aumentarlo o disminuirlo para que luzca mejor en tu interfaz

Te dejo el link al repositorio con todas las animaciones:

GitHub - Oliver404/android-basic-animation