En este tutorial explicamos los principales comandos para crear animaciones, las cuales se usan como transición de una actividad a otra o bien para algún elemento de la UI. Es sencillo crear este tipo de animaciones, ayuda a que la aplicación se vea mejor y llame la atención del usuario.
Pasos para hacer una animación de transición entre actividades.
- El primer paso es crear un nuevo Recurso XML, dando clic derecho en la carpeta res, y buscando la opción New XML resource.
- El segundo paso es darle un nombre al archivo, algo que identifique la animación (zoom_in, entrada_izquierda, salida_derecha, desvanecer, etc.).
- Luego, indicamos que es una Animación, para que el archivo se guarde en la carpeta res/anim. Así la animación se usara como un recurso de esa carpeta (R.anim.nombre_animacion)
- Por ultimo debemos agregar el código de la animación que vamos a realizar.
- Una vez creada la animación, la tenemos que usar en nuestra aplicación,
- Podemos agregarla como transición entre actividades. (Ve el tutorial animación de transición entre actividades).
- También se puede usar la animación en elementos de la UI. (Ve el tutorial animación de elementos de la UI).
Bases de la animación.
Hay algunos comandos básicos para hacer la animación. Los comandos que mostramos a continuación aplican para todos los elementos que se describe más abajo.
Puedes ver esos comandos en la documentación oficial, en este enlace.
A continuación mostramos algunos de los comandos más importantes que se usan en todos los elementos que se describen más adelante.
Android: duration
Es el tiempo que durará la animación en mili segundos.
Android: repeatCount
Este comando, indica el número de veces que se repetirá la animación.
Por default el valor es 1. Si este elemento no se indica en el código, la animación solamente se hará una vez.
Android: startOffset
Este comando esta en milisegundos.
Es un tiempo de espera (“delay”) antes de que la animación comience.
Android: interpolator
Este comando define como se hará la animación.
Normalmente le damos un valor inicial y uno final a la animación. Con este comando configuramos como se crearán las partes intermedias entre la posición inicial y final de la animación.
Un ejemplo, es mover un elemento de una posición a otra. Podemos moverlo con velocidad constante (“@android:anim/linear_interpolator”) o primero que se mueva rápido y al final más despacio (“@android:anim/decelerate_interpolator”).
Algunas de las interpolaciones que tiene incluidas Android Studio son:
LinearInterpolator, @android:anim/linear_interpolator
AccelerateInterpolator, @android:anim/accelerate_interpolator
DecelerateInterpolator, @android:anim/decelerate_interpolator
CycleInterpolator, @android:anim/cycle_interpolator
Puedes ver más en la documentación oficial, en este enlace.
Elementos de la animación.
En los siguiente elementos se pueden usar todos los comandos que se describieron anteriormente.
a) <set>
Este elemento es básicamente un contenedor que tiene otros elementos para la animación, como los que se describen más adelante.
Se pueden usar set anidados.
Y no siempre es el elemento raíz, hay casos donde solo se usa por ejemplo “translate”, así que en ese caso el elemento raíz es “translate”.
b) <translate>
Con este comando se controla la posición del objeto a animar. Podemos hacer una animación de un movimiento ya sea de manera vertical u horizontal.
Admite 3 formatos para las cantidades.
- Uno es un número, el cual indica el valor que tendrá la variable.
- Admite porcentajes, los cuales pueden tener valores de -100% a 100%, que indican un porcentaje relativo al mismo objeto.
- Y además admite otro tipo de porcentaje, de -100%p a 100%p, que indica un porcentaje relativo al elemento principal.
Tiene 4 elementos principales, pero hay más elementos, puedes verlos en la documentación oficial. Ya que hereda los elementos de Animation, arriba te explicamos los más importantes como la duración de la animación.
Este comando es el tiempo que durará la animación en milisegundos.
Android: fromXDelta.
Puede ser un valor numérico o de porcentaje. Sería la posición inicial en el eje X.
Android: toXDelta.
Puede ser un valor numérico o de porcentaje. Sería la posición final en el eje X.
Android: fromYDelta.
Puede ser un valor numérico o de porcentaje. Sería la posición inicial en el eje Y.
Android: toYDelta.
Puede ser un valor numérico o de porcentaje. Sería la posición final en el eje Y.
c) <alpha>
Con este elemento se controla la transparencia del objeto. De esta manera se puede crear una entrada o salida del elemento de tal manera que aparezca o desaparezca poco a poco.
Tiene 2 elementos principales, pero hereda los elementos de Animation, arriba te explicamos los más importantes como la duración de la animación.
Android: fromAlpha.
Valor inicial de la opacidad.
Puede tener un valor entre 0 y 1. Donde 0 es transparente y 1 es sin transparencia.
Android: toAlpha
Valor final de la opacidad.
Puede tener un valor entre 0 y 1. Donde 0 es transparente y 1 es sin transparencia.
d) <scale>
Con este comando se controla el tamaño del elemento a animar.
Tiene 6 elementos principales, pero hereda los elementos de Animation por lo que tiene muchos más comandos, arriba te explicamos los más importantes como la duración de la animación.
Punto pivote.
Este punto, es el lugar desde donde se hace la escala del objeto. Puede ser desde el centro, o bien desde alguna esquina o un punto en específico.
La coordenada 0,0 (pivotX, pivotY) es la esquina superior izquierda.
Android: pivotX
Es el punto pivote en el eje X. El valor 0 indica la orilla izquierda.
Android: pivotY
Es el punto pivote en el eje Y. El valor 0 indica la orilla superior.
Android: fromXScale
Es la escala inicial en el eje X. El valor de 1 indica que es la escala original.
Android: toXScale
Es la escala final en el eje X. El valor de 1 indica que es la escala original.
Android: fromYScale
Es la escala inicial en el eje Y. El valor de 1 indica que es la escala original.
Android: toYScale
Es la escala final en el eje Y. El valor de 1 indica que es la escala original.
e) <rotate>
Con este comando se controla la rotación del objeto.
Tiene 4 elementos principales, pero hereda los elementos de la clase Animation, arriba te explicamos los más importantes como la duración de la animación.
Punto pivote.
Este punto, es el lugar desde donde se hace la rotación del elemento. Puede ser desde el centro, o bien desde alguna esquina o un punto en específico.
La coordenada 0,0 (pivotX, pivotY) es la esquina superior izquierda.
Puede manejarse con valores numéricos, también en base al porcentaje del mismo objeto (%) o bien porcentaje relativo al elemento principal “%p”.
Android: pivotX
Es el punto pivote en el eje X. El valor 0 indica la orilla izquierda.
Android: pivotY
Es el punto pivote en el eje Y. El valor 0 indica la orilla superior.
Android: fromDegrees
Es la posición inicial de la rotación del objeto. Esta dada en grados.
Android: toDegrees
Es la posición final de la rotación del objeto. Esta dada en grados.
Para más tutoriales visita la sección de Android Studio.