Noticia Cómo cambiar animaciones de transición paso a paso

Cambiar las animaciones de transición puede parecer una chorrada hasta que te topas con un problema concreto: tu personaje no responde, la interfaz se queda congelada en mitad de una animación o la app no hace justo lo que esperas. Tanto si vienes del mundo de los videojuegos (Unity, Unreal, etc.) como del desarrollo Android o de la edición de vídeo, las transiciones mandan mucho más de lo que parece sobre la sensación de fluidez y control.

En este artículo vamos a juntar varias piezas: cómo gestionar transiciones entre animaciones de personaje, cómo funcionan las transiciones de diseño en Android, qué puedes hacer en editores de vídeo como Filmora y qué limitaciones imponen algunos launchers o entornos. Todo explicado en español de España, con ejemplos claros y sin dejar fuera ningún detalle importante de la información original.

El problema típico: cambiar de animación mientras ya estás en una transición​

Un caso muy habitual en videojuegos o animaciones de personaje es este: tienes animaciones de correr, estar quieto y, por ejemplo, rodar, con transiciones suaves entre ellas. Cada transición tiene el tiempo de salida desactivado para que, cuando se cumple una condición (dejar de pulsar una tecla, activar una acción, etc.), el cambio sea inmediato.

Esto funciona de lujo cuando pasas directamente de una animación a otra, por ejemplo, de quieto a correr o de correr a rodar. El follón llega cuando intentas cambiar a una nueva animación en mitad de una transición ya en curso. Imagina:

• Tu personaje corre.
• Dejas de pulsar el botón de movimiento y se dispara una transición lenta de correr a quieto para que no se pare en seco.
• En ese instante, pulsas el botón de rodar.

¿Qué pasa? Que el personaje no rueda hasta que termina la transición de correr a quieto. Es decir, la transición «larga» bloquea cualquier otra animación que quieras activar a mitad de camino. El motor de animaciones está en plena transición y, tal como está configurado, no permite «saltar» a otra animación inmediatamente.

En muchos sistemas de animación, no puedes crear transiciones desde una transición (es decir, desde el propio estado de transición), o no están pensadas para usarse así. Lo que quieres, básicamente, es poder cancelar la transición actual cuando se cumplan nuevas condiciones de entrada a otra animación.

Enfoque conceptual para cancelar o sobreescribir transiciones de animación​

Independientemente del motor concreto (Animator Controller, state machines, etc.), la idea general es la misma: la transición no debería comportarse como un callejón sin salida. Deberías poder interrumpirla cuando hay una acción más prioritaria.

Algunas estrategias habituales para conseguirlo son:

• Añadir estados intermedios o mezclar animaciones en lugar de una única transición rígida de «correr a quieto». Por ejemplo, un estado «frenando» que pueda saltar a «rodar» si se pulsa el botón a tiempo.
• Modificar las condiciones de las transiciones para permitir que la animación de rodar tenga prioridad sobre cualquier transición en curso. En muchos sistemas, esto implica marcar la transición como «puede interrumpir» o configurar una prioridad.
• Acortar o ajustar el tiempo de mezcla (blend) entre animaciones para que el bloqueo de la transición sea lo menor posible.
• Evitar que la transición sea un estado opaco: en lugar de considerarla un túnel, la tratas como un tramo que sigue vigilando las entradas del usuario y puede saltar a otra animación cuando cambian las condiciones.

La clave es que la máquina de estados de animación debe poder reaccionar incluso durante la transición. Si tu sistema no te deja crear una transición desde la transición, la solución suele pasar por reestructurar los estados (crear más estados explícitos en vez de depender tanto de una sola transición larga) o ajustar la lógica de entrada.

Transiciones de diseño en Android: cómo cambiar de una interfaz a otra con animaciones​

En el lado del desarrollo de apps, Android ofrece un framework de transiciones que permite animar cambios en la interfaz de usuario entre dos disposiciones de vistas. El sistema se encarga de interpolar entre un diseño inicial y otro final, aplicando efectos como fundidos, cambios de tamaño o movimientos de vistas.

Este framework te da varias ventajas importantes: animar grupos completos de vistas de una vez, usar animaciones predefinidas, cargarlo todo desde recursos XML y engancharte a callbacks del ciclo de vida de la transición para tener más control sobre el proceso.

Escenas: capturar el estado de una jerarquía de vistas​

Una «escena» en Android es, básicamente, una foto del estado de una jerarquía de vistas: qué vistas hay y qué valores de propiedades tienen. El sistema puede animar los cambios cuando pasas de una escena a otra. Puedes crear escenas desde:

• Un archivo de diseño (layout XML), que se infla y se asocia a un ViewGroup raíz.
• Un ViewGroup creado o modificado en código, cuando generas la jerarquía dinámicamente.

Normalmente, la escena inicial se infiere automáticamente del layout que ya está en pantalla. Es decir, no tienes que crearla a mano: el framework mira cómo está la interfaz y la toma como punto de partida para la transición.

La idea es que puedas decirle al sistema: «Esta es mi interfaz ahora, esta es como quiero que quede, y esta es la transición que quiero usar entre ambas». A partir de ahí, TransitionManager se encarga de animar de un estado al otro.

Crear escenas desde recursos de diseño​

Si tu interfaz es bastante estática, es muy práctico definir las diferentes escenas como archivos de diseño XML separados. Por ejemplo:

• Un layout principal de actividad con un título y un FrameLayout que hará de contenedor de escenas.
• Un layout para la primera escena (a_scene.xml), con dos TextView dispuestos de una manera.
• Otro layout para la segunda escena (another_scene.xml) con los mismos IDs, pero orden distinto.

En el layout de la actividad principal tendrías algo como: un LinearLayout con un TextView fijo (el título) y un FrameLayout (@+id/scene_root) donde se incrusta la primera escena. Ese FrameLayout actúa como raíz de escena, y es sobre él donde se aplican las transiciones.

Después, en tu código, recuperas esa raíz con findViewById(R.id.scene_root) y creas dos objetos Scene diferentes usando Scene.getSceneForLayout(), uno para cada XML. Ambos comparten la misma raíz, pero representan disposiciones distintas de las vistas.

Crear escenas directamente en código​

Cuando la interfaz es muy dinámica (añades y quitas vistas en tiempo real), te conviene crear la escena a partir de un ViewGroup y una jerarquía de vistas que has construido tú mismo en código. Para eso puedes usar el constructor:

Scene scene = new Scene(sceneRoot, viewHierarchy)

Esto viene a ser equivalente a usar Scene.getSceneForLayout() con un layout inflado, pero sin necesidad de un archivo XML intermedio. Es útil cuando la IU cambia tanto que mantener layouts estáticos sería un engorro.

Acciones al entrar y salir de una escena​

Además de la animación en sí, una escena puede definir acciones personalizadas que se ejecutan al entrar o salir de ella. Esto se hace con setEnterAction() y setExitAction(), a las que se les pasa un Runnable.

Estas acciones son útiles, por ejemplo, para:

• Animar o modificar vistas que no forman parte de la misma jerarquía, pero que quieres coordinar con el cambio de escena.
• Tratar casos donde el framework no puede animar automáticamente, como ciertos tipos de listas.

Eso sí, no es buena idea usar estas acciones para pasar datos entre escenas. Para ese tipo de lógica, es mejor apoyarte en las devoluciones de llamada del ciclo de vida de la transición, como las que ofrece TransitionListener.

Transiciones en Android: tipos, creación y aplicación​

Una vez tienes definidas las escenas que representan el estado inicial y el final, necesitas un objeto Transition, que define el tipo de animación que se aplicará. Android trae varias transiciones integradas y también te permite crear las tuyas propias.

Principales tipos de transición integrados​

Entre las clases más usadas del framework de transiciones de Android están:

• AutoTransition: combina fundido de salida, movimiento/cambio de tamaño y fundido de entrada en ese orden. Es la transición por defecto y sirve para muchos casos generales.
• ChangeBounds: anima cambios de posición y tamaño de las vistas.
• ChangeClipBounds: captura y anima los límites de recorte (clipBounds) de una vista.
• ChangeImageTransform: anima cambios en la matriz de transformación de una ImageView.
• ChangeScroll: anima cambios en las propiedades de scroll de las vistas objetivo.
• ChangeTransform: se centra en cambios de escala y rotación de las vistas.
• Explode: mueve las vistas hacia dentro o fuera desde los bordes de la escena cuando cambian de visibilidad.
• Fade: permite hacer fundidos de entrada y salida; por defecto combina ambos.
• Slide: hace que las vistas aparezcan o desaparezcan deslizándose desde un borde concreto.

Con estas piezas puedes cubrir la mayoría de necesidades: desde un simple fade entre vistas hasta movimientos más complejos con cambios de tamaño y posición.

Crear una transición desde recursos XML​

Si quieres separar el «cómo se anima» de tu código, puedes definir transiciones en archivos XML dentro del directorio res/transition/. Por ejemplo, para crear una transición de tipo Fade basta con un XML como este:

<fade xmlns:android="http://schemas.android.com/apk/res/android" />

Luego, desde tu actividad, inflas esa transición con TransitionInflater.from(context) y la aplicas como cualquier otra transición. Esto te permite cambiar parámetros de animación sin tocar el código Java/Kotlin.

Crear la transición directamente en código​

Si la transición es sencilla o necesitas crearla de forma dinámica, puedes instanciarla directamente en código con su constructor. Por ejemplo:

Transition fade = new Fade();

A partir de ahí, puedes personalizarla (duración, targets, etc.) y pasársela al TransitionManager cuando quieras iniciar la animación entre escenas.

Aplicar la transición entre dos escenas​

Para cambiar de una escena a otra con animación, el patrón típico es:

1. Definir la escena final (ya sea desde XML o desde código).
2. Crear o inflar la transición que quieres aplicar.
3. Llamar a TransitionManager.go(sceneFinal, transition).

El framework se encarga de reemplazar la jerarquía de vistas del elemento raíz por la de la escena final mientras anima cualquier cambio detectado. La escena inicial será la que se usó en la última transición o, si no hay precedente, el estado actual de la IU.

Si no pasas ningún objeto Transition, el sistema aplica una transición automática «razonable» para la mayoría de casos, que básicamente actúa como una AutoTransition.

Elegir qué vistas se animan: targets de la transición​

Por defecto, una transición se aplica a todas las vistas que cambian entre la escena inicial y la final. Pero a veces no te interesa animarlo todo, o quieres evitar elementos que dan problemas.

Con los métodos addTarget() y removeTarget() puedes decidir qué vistas concretas formarán parte de la animación. Esto se hace antes de iniciar la transición, y solo tiene efecto sobre vistas que estén dentro de la jerarquía asociada a la escena.

Este filtrado es importante porque algunos tipos de vistas no se llevan bien con el framework de transiciones, especialmente las basadas en adaptadores, como verás más abajo en el apartado de limitaciones.

Combinar varias transiciones con TransitionSet​

No estás limitado a una sola animación. Android permite agrupar varias transiciones en un TransitionSet. Esto sirve, por ejemplo, para:

• Primero hacer un fade out de algunas vistas.
• Después animar cambios de tamaño y posición.
• Y al final hacer un fade in del nuevo contenido.

De hecho, una combinación de este estilo es exactamente lo que hace internamente AutoTransition: un Fade para desvanecer, ChangeBounds para mover y redimensionar, y otro Fade para aparecer.

Para definir un conjunto de transiciones en XML puedes usar algo como:


Luego se infla como cualquier otra transición y se pasa al TransitionManager sin diferencias respecto a una sola transición.

Aplicar transiciones sin escenas: cambios directos en la jerarquía de vistas​

No siempre tiene sentido definir varias escenas. Muchas veces te basta con un único layout en el que añades, quitas o modificas vistas en tiempo real. Imagina una pantalla de búsqueda donde:

• Tienes un campo de texto y un botón de buscar.
• Cuando el usuario pulsa buscar, desaparece el botón y aparecen los resultados.

En lugar de definir dos escenas casi idénticas, es más cómodo trabajar con un solo layout y dejar que el framework anime los cambios que tú haces en el código. Para eso existe beginDelayedTransition().

El proceso es:

1. Llamar a TransitionManager.beginDelayedTransition(root, transition) cuando se dispara el evento que debe animarse. El framework guarda el estado actual de las vistas dentro de root.
2. Realizar los cambios necesarios en las vistas: añadir, eliminar, cambiar propiedades, etc.
3. Cuando Android vuelva a dibujar la interfaz, aplicará automáticamente la transición entre el estado anterior y el nuevo.

Por ejemplo, en un ConstraintLayout definido en activity_main.xml con un EditText y otros elementos, podrías añadir una nueva vista de texto con animación simplemente envolviendo tus cambios con beginDelayedTransition(), sin escenas adicionales.

Callbacks del ciclo de vida de la transición​

La vida de una transición tiene etapas claras: empieza cuando llamas a go() o beginDelayedTransition() y termina cuando la animación se completa. Para reaccionar a estos momentos, existe la interfaz TransitionListener, que te ofrece varios métodos como:

• onTransitionStart(): cuando arranca la transición.
• onTransitionEnd(): cuando ha terminado todo el proceso de animación.
• Otros métodos para cancelaciones, pausas, etc.

Estos callbacks vienen muy bien para casos en los que necesitas copiar datos o estados entre la jerarquía inicial y la final. Por ejemplo, si quieres conservar un valor de una vista que desaparece y aplicarlo a otra que aparece, pero la vista «final» aún no existe hasta que se complete el cambio de escena.

La técnica típica es: guardar el valor en una variable cuando empieza la transición y aplicarlo a la vista correspondiente cuando recibes onTransitionEnd(). Así mantienes consistencia sin pelearte con vistas que todavía no están en el árbol.

Limitaciones del framework de transiciones de Android​

Aunque es muy potente, el sistema de transiciones de Android tiene varias limitaciones que conviene tener en cuenta para no volverte loco buscando bugs donde no los hay:

• SurfaceView: las animaciones sobre este tipo de vista pueden no verse correctamente, porque se dibuja desde un hilo distinto al de la IU y el resultado puede desincronizarse del resto.
• TextureView: algunas transiciones pueden no producir el efecto esperado o comportarse de forma inconsistente.
• Vistas que extienden AdapterView (como ListView): gestionan sus hijos de forma interna y no son compatibles con el modelo de transición. Animarlas puede causar bloqueos o que la pantalla deje de responder.
• Redimensionar TextView con animación: si cambias el tamaño de una vista de texto durante la transición, el texto puede recolocarse a una nueva posición antes de que termine el cambio de tamaño, dando una sensación rara. La recomendación es no animar cambios de tamaño en vistas con texto dentro si quieres evitar estos efectos estrambóticos.

Cambiar animaciones de transición en launchers y capas Android​

Otro ámbito donde la gente suele querer cambiar transiciones es la propia interfaz del sistema o del launcher (por ejemplo, las animaciones al abrir apps, cambiar de escritorio, etc.). Algunos launchers de terceros como Nova Launcher llevan años ofreciendo un montón de opciones para esto.

Con Nova, por ejemplo, puedes jugar con el tipo de transición entre pantallas, la velocidad, efectos al abrir el cajón de apps, etc.. Es una forma sencilla de personalizar el comportamiento sin tocar código, solo desde ajustes.

En cambio, en muchos móviles con capas propias, como Samsung, no se ofrece esta personalización de serie. Aunque la comunidad lo haya pedido, no siempre dan controles para modificar estas animaciones del sistema, y dependes de lo que el fabricante decida exponer o de usar launchers alternativos.

Transiciones en edición de vídeo: Filmora y otros programas​

En el terreno de la edición de vídeo, las «transiciones» son los efectos que se aplican entre dos clips: fundidos, barridos, deslizamientos, etc.. Programas como Wondershare Filmora ofrecen un buen surtido de estos efectos y permiten personalizarlos bastante.

En Filmora puedes, por ejemplo, añadir una transición entre dos clips en la línea de tiempo y luego ajustar su duración. Hay dos maneras principales de hacerlo:

• Clic derecho sobre la transición y opción «Duración»: se abre una ventana donde introduces la nueva duración exacta y confirmas.
• Arrastrar uno de los bordes de la transición directamente en la línea de tiempo: así la haces más larga o más corta de forma visual.

La duración por defecto suele ser de 2 segundos, pero puedes cambiar ese valor globalmente en las preferencias del programa:

• Ir a Preferencias → pestaña Edición.
• Buscar el campo «Duración de la transición» e introducir un nuevo valor.
• A partir de ahí, esa será la nueva duración estándar para todas las transiciones que añadas en el proyecto.

Además, cada transición tiene propiedades adicionales que puedes modificar desde la opción «Mostrar propiedades». Entre ellas está el modo de transición, que determina cómo se coloca entre los clips:

• Superposición: la transición ocupa parte del final de un clip y del inicio del siguiente, solapándolos.
• Prefijo: la transición se sitúa al final del primer clip.
• Sufijo: la transición se sitúa al inicio del segundo clip.

Jugando con estas opciones puedes afinar mucho la sensación de fluidez y el ritmo del montaje, sin necesidad de entrar en keyframes manuales para cada cambio.

Automatizar transiciones entre composiciones: de OBS a After Effects​

Un caso particular muy interesante es el de quienes vienen de usar OBS para directos y se plantean reproducir ese estilo de cambios de escena automáticos en postproducción. Imagina que estás montando entrevistas largas, con varias cámaras o fuentes de vídeo, y quieres:

• Mostrar entre 1 y 4 vídeos en pantalla por «página».
• Ir cambiando de composición (layout) cada cierto tiempo.
• Evitar tener que lanzar todos los cambios a mano en tiempo real como harías en OBS.

En OBS puedes montar algo rápido y disparar los cambios manualmente, pero eso implica «renderizar» en directo mientras pulsas botones, lo cual no es ideal si quieres un resultado más pulido para entrevistas largas.

En After Effects (u otros programas de composición) la idea sería encadenar composiciones o plantillas que vayan entrando y saliendo automáticamente, con duraciones predefinidas. Aunque el contenido original que manejamos no incluye un tutorial paso a paso de AE, el enfoque general pasa por:

• Crear composiciones maestras con distintos layouts (1 vídeo grande, 4 en cuadrícula, etc.).
• Definir transiciones entre esas comps usando capas de ajuste, máscaras o efectos de transición (fundidos, desplazamientos, etc.).
• Configurar duraciones fijas para cada tramo y, si hace falta, usar expresiones o scripts para automatizar el cambio de visibilidad de unas capas a otras.

La meta es conseguir ese efecto de «realización en directo» pero controlado, sin depender de tu pulso en tiempo real. Otros programas, como algunos editores no lineales avanzados, también permiten automatizar montajes con transiciones programadas, aunque los detalles varían de una herramienta a otra.

En definitiva, tanto si trabajas con personajes en tiempo real, interfaces de Android, launchers o editores de vídeo, las animaciones de transición son mucho más que un adorno: deciden cómo de fluido, reactivo y profesional se percibe tu proyecto.

Saber cómo cancelar una transición cuando surge una nueva acción, cómo usar escenas y transiciones en Android para animar cambios de diseño, cómo esquivar las limitaciones del framework, o cómo ajustar modos y duraciones en herramientas como Filmora te da un control fino sobre el resultado final y te ahorra mucho ensayo-error. Comparte la información para que otros usuarios conozcan del tema.

Continúar leyendo...