Una de los efectos más llamativos que podemos trabajar en nuestra app son las transiciones, sigue leyendo este artículo para aprender todo lo que hay que saber y llevar tu app al siguiente nivel.
¿Qué son las transiciones?
Podríamos definir las transiciones Android como las animaciones que se producen al cambiar de vista en la pantalla. Existen de dos tipos: entre Fragments y entre Activities y cada una se programa de una determinada forma.
Estas animaciones se definen en xml al estilo clásico, y pueden ser de muchos tipos distintos: fade in, fade out, zoom in, translate left, entre otras. Al final de este post podrás ver unas cuantas en XML ya predefinidas, aunque puedes modificarlas a tu gusto.
Transiciones entre actividades
Para crear una transición entre dos actividades utilizaremos la instrucción overridePendingTransition que admite dos parámetros: la animación de la actividad de entrada y la de salida.
Transiciones entre fragmentos
Para configurar una animación entre dos fragmentos, seguiremos la misma lógica que entre las actividades, solo que la forma de disparar la transición cambia: en este caso lo invocaremos de la siguiente manera:
getSupportFragmentManager().beginTransaction()
.setCustomAnimations(enterAnimation, 0, 0, exitAnimation);
Donde la instrucción «nueva» es setCustomAnimations y enterAnimation y exitAninmation son animaciones en XML definidas e instanciadas en variables de tipo int.
¿Cómo implementar las transiciones en Android Studio?
He creado un pequeño vídeo tutorial para que veas cómo funcionan, si quieres profundizar más puedes descargar el código íntegro en GitHub, que te permitirá obtener el mismo programa que uso en el vídeo y hacer tus modificaciones para entender mejor el funcionamiento. Aquí te dejo el vídeo también:
Aquí tienes el código en github: cómo hacer transiciones en android studio. No olvides que puedes unirte a los canales de Telegram y Whatsapp para preguntar cualquier duda.
Animaciones XML para Android
Te dejo aquí algunos estilos de animaciones para que los uses en tus proyectos.
Animación Fade out
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="1000"
android:repeatCount="infinite"
android:repeatMode="reverse"
/>En este caso se repite infinitas veces, pero puedes quitarle el valor para que solo sea una vez. Para hacer el fade in solo tienes que invertir los valores de fromAlpha y toAlpha.
Zoom in y zoom out
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">
<scale android:fromXScale="0.0" android:toXScale="1.0"
android:fromYScale="0.0" android:toYScale="1.0"
android:pivotX="50%p" android:pivotY="50%p"
android:duration="@android:integer/config_mediumAnimTime" />
</set>
De nuevo, para hacer el invertido, intercambia los valores de fromXScale y toXScale y también intercambia los de fromYScale y toYScale.
Slide in up y slide out up
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:interpolator = "@android:anim/accelerate_interpolator"
android:duration="1000"
android:fromYDelta="100%"
android:toYDelta="0%"></translate>
</set>
Observa que si cambias los valores de fromYDelta y toYDelta podrás conseguir el desplazamiento que desees.
Animación translate
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:fromXDelta="100%"
android:toXDelta="0%"/>
Jugando con los valores de fromXDelta y los de toXDelta podrás conseguir el efecto que quieras en este tipo de transición.
Animación Hiperspace Jump
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<scale
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0"
android:toXScale="1.4"
android:fromYScale="1.0"
android:toYScale="0.6"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="false"
android:duration="700" />
<set
android:interpolator="@android:anim/accelerate_interpolator"
android:startOffset="700">
<scale
android:fromXScale="1.4"
android:toXScale="0.0"
android:fromYScale="0.6"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="400" />
<rotate
android:fromDegrees="0"
android:toDegrees="-45"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="400" />
</set>
</set>