Transition: conceptos básicos, animación de transiciones en aplicaciones móviles

¿Qué es Transition?

Transition es una animación que ocurre al reemplazar un estado visual de interfaz por otro. A diferencia de la Property Animation (animar una propiedad de un solo objeto), Transition gestiona un conjunto completo de cambios: aparición/desaparición de elementos, cambio de su posición, tamaño y propiedades dentro de una sola transición. Transition resuelve el problema del cambio suave de contenido para que el usuario entienda qué se movió y hacia dónde.

En plataformas móviles, Transition se utiliza en tres escenarios principales: navegación entre pantallas (push, pop, modal present), cambio de fragmentos (FragmentTransaction de Android) y cambio de estado dentro de una pantalla (expansión de tarjeta, cambio de pestañas). Cada escenario requiere su propio enfoque: transiciones de navegación — UIViewControllerAnimatedTransitioning en iOS o ActivityOptions en Android, transiciones dentro de la pantalla — Transition Framework o UIView.transition.

Según Apple HIG (2026), la duración de una transición estándar no debe exceder los 400–500 ms — las animaciones más largas se perciben como retraso. Material Design recomienda 300–350 ms para transiciones móviles. Para elementos grandes (tarjetas, imágenes), el tiempo puede aumentar a 500–600 ms sin pérdida de rendimiento percibido.

Tipos de animaciones de transición

Los tipos de transición se dividen en varias categorías según qué contenido cambia y cómo. Tipos básicos: cross-fade (fundido) — desaparición suave de uno y aparición de otro; slide (deslizamiento) — una pantalla sale, otra entra; scale/zoom (escalado) — un elemento se agranda, abriendo una pantalla de detalle. Las transiciones combinadas mezclan varios efectos.

Reglas de Material Design: utilice un solo tipo de transición dentro de una aplicación para crear un lenguaje visual unificado. Recomendado: slide para navegación entre pantallas del mismo nivel (master → detalle), cross-fade para cambio de contenido dentro de una pantalla (pestañas, cambio de vista), scale/zoom para la transición de una tarjeta a una pantalla de detalle (tarjeta de producto → descripción).

Transiciones en iOS (Swift)

En iOS, UIView.transition es la forma más sencilla de animar cambios de contenido dentro de una sola View. Admite cross-dissolve, curl-up, curl-down, flip-from-left, flip-from-right. Para transiciones de navegación entre UIViewController, utilice UINavigationControllerDelegate con UIViewControllerAnimatedTransitioning — esto da control total sobre la animación push/pop.

import UIKit

// UIView.transition: cambio de imagen con cross-dissolve
UIView.transition(with: imageView,
    duration: 0.4,
    options: [.transitionCrossDissolve, .curveEaseInOut]
) {
    self.imageView.image = UIImage(named: "new_image")
} completion: { _ in
    print("Transition completed")
}

// UIView.transition: intercambio de dos vistas
UIView.transition(from: firstView, to: secondView,
    duration: 0.5,
    options: [.transitionFlipFromRight, .showHideTransitionViews]
) { _ in
    // firstView oculta, secondView mostrada
}

// CATransition para capa (sin Auto Layout)
let transition = CATransition()
transition.type = .push
transition.subtype = .fromRight
transition.duration = 0.35
transition.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
view.layer.add(transition, forKey: "pushTransition")

UIViewPropertyAnimator es una alternativa moderna para transiciones personalizadas en iOS 10+. A diferencia de UIView.transition, PropertyAnimator admite pausa, cancelación y animación inversa, lo cual es importante para transiciones interactivas (deslizar para volver). Para la animación entre UIViewControllers, use UIPercentDrivenInteractiveTransition junto con PropertyAnimator — este es el patrón estándar para navegación interactiva.

Transiciones en Android (Kotlin)

En Android, FragmentTransaction con setCustomAnimations es la forma principal de animar transiciones entre Fragment. Parámetros: enter (animación de entrada del nuevo Fragment), exit (animación de salida del Fragment antiguo), popEnter y popExit — para navegación hacia atrás. FragmentTransaction admite recursos de animación (R.anim) y Transition Framework (R.transition).

import androidx.fragment.app.FragmentTransaction
import androidx.transition.TransitionInflater

// FragmentTransaction con animaciones de recursos
supportFragmentManager.beginTransaction()
    .setCustomAnimations(
        R.anim.slide_in_right,  // enter
        R.anim.slide_out_left,  // exit
        R.anim.slide_in_left,   // popEnter
        R.anim.slide_out_right  // popExit
    )
    .replace(R.id.container, DetailFragment())
    .addToBackStack(null)
    .commit()

// FragmentTransaction con Transition Framework
val detailFragment = DetailFragment()
detailFragment.enterTransition = TransitionInflater.from(this)
    .inflateTransition(R.transition.slide_right)
detailFragment.exitTransition = TransitionInflater.from(this)
    .inflateTransition(R.transition.fade_out)

supportFragmentManager.beginTransaction()
    .replace(R.id.container, detailFragment)
    .addToBackStack(null)
    .commit()

// ActivityOptions: animación al iniciar una Activity
val options = ActivityOptions.makeScaleUpAnimation(
    view, 0, 0, view.width, view.height
).toBundle()
startActivity(intent, options)

Mejores prácticas de Android: Slide() — para reemplazar Fragment en navegación (enter = Slide(Gravity.END), exit = Slide(Gravity.START)). Fade() — para mostrar/ocultar superposiciones y diálogos. Explode() — para transiciones de énfasis (eliminar un elemento de una lista). Para dispositivos antiguos (API < 21) use recursos R.anim como fallback. Transition Framework no admite SurfaceView, TextureView, GLSurfaceView — para video y cámara use solo animaciones R.anim.

Transiciones personalizadas de UIViewController en iOS

UIViewControllerAnimatedTransitioning es un protocolo de iOS para crear animaciones de transición completamente personalizadas entre controladores. Proporciona acceso a la vista contenedora (transitionContext.containerView), la vista de origen y la vista de destino. Combinado con UIPercentDrivenInteractiveTransition, este enfoque permite crear transiciones interactivas con desplazamiento táctil.

import UIKit

"> Animador de transición personalizado
class ScaleTransitionAnimator: NSObject, UIViewControllerAnimatedTransitioning {
    let isPresenting: Bool

    init(presenting: Bool) { self.isPresenting = presenting }

    func transitionDuration(using ctx: UIViewControllerContextTransitioning?) -> TimeInterval {
        return 0.4
    }

    func animateTransition(using ctx: UIViewControllerContextTransitioning) {
        guard let toView = ctx.view(forKey: .to),
              let fromView = ctx.view(forKey: .from)
        else { return }

        let container = ctx.containerView
        let initialScale: CGAffineTransform = CGAffineTransform(scaleX: 0.8, y: 0.8)
        let finalFrame = ctx.finalFrame(for: toView)

        if isPresenting {
            toView.transform = initialScale
            toView.alpha = 0
            toView.frame = finalFrame
            container.addSubview(toView)
        }

        UIView.animate(withDuration: transitionDuration(using: ctx),
                       delay: 0,
                       usingSpringWithDamping: 0.7,
                       initialSpringVelocity: 0.3) {
            if self.isPresenting {
                toView.transform = .identity
                toView.alpha = 1
                fromView.transform = CGAffineTransform(scaleX: 0.9, y: 0.9)
                fromView.alpha = 0
            } else {
                fromView.transform = initialScale
                fromView.alpha = 0
            }
        } completion: { _ in
            fromView.transform = .identity
            ctx.completeTransition(!ctx.transitionWasCancelled)
        }
    }
}

// Aplicación en UINavigationControllerDelegate
extension MainViewController: UINavigationControllerDelegate {
    func navigationController(
        _ nc: UINavigationController,
        animationControllerFor operation: UINavigationController.Operation,
        from: UIViewController, to: UIViewController
    ) -> UIViewControllerAnimatedTransitioning? {
        return ScaleTransitionAnimator(presenting: operation == .push)
    }
}

Transiciones interactivas: agregue un UIPanGestureRecognizer a la pantalla de origen. Cuando se active el gesto, cree un UIPercentDrivenInteractiveTransition y llame a update(CGFloat(percent)). Para cancelar cuando no se alcance el umbral (generalmente 30%), llame a cancel(). Este patrón se usa por defecto en UINavigationController para gestos de pop y en UIScrollView con pagingEnabled. Para gestos personalizados, implemente UIViewControllerInteractiveTransitioning.

Transition Framework en Android: de escena a escena

Transition Framework (android.transition) es un sistema de animación declarativo que anima automáticamente los cambios entre dos escenas (Scene). Una escena es un conjunto de Views con un estado específico. Al pasar de la Escena A a la Escena B, Transition Framework analiza la diferencia y anima: cambio de posición (ChangeBounds), cambio de tamaño (ChangeClipBounds, ChangeTransform), aparición (Fade) y desaparición (Fade).

import android.transition.Scene
import android.transition.TransitionManager
import android.transition.TransitionSet
import android.transition.AutoTransition
import android.transition.ChangeBounds
import android.transition.Fade

// TransitionSet: combinación de ChangeBounds + Fade
val transition = TransitionSet().apply {
    ordering = TransitionSet.ORDERING_TOGETHER
    addTransition(ChangeBounds())
    addTransition(Fade(Fade.IN))
    duration = 400L
    interpolator = FastOutSlowInInterpolator()
}

// Transición entre escenas en un ViewGroup
val sceneRoot = findViewById<ViewGroup>(R.id.scene_root)
val scene1 = Scene.getSceneForLayout(sceneRoot, R.layout.scene_initial)
val scene2 = Scene.getSceneForLayout(sceneRoot, R.layout.scene_expanded)

"> AutoTransition sin configuración manual
TransitionManager.go(scene2, AutoTransition().apply {
    duration = 350L
})

// TransitionManager.beginDelayedTransition — sin escenas
TransitionManager.beginDelayedTransition(sceneRoot, ChangeBounds())
itemView.layoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT
itemView.requestLayout() "> El cambio de layout se anima automáticamente

ChangeBounds es la transición más utilizada en Android, anima cambios de posición y tamaño de View. ChangeTransform anima rotación y escala. ChangeImageTransform — para animación de ImageView (centerCrop → fitCenter). Para transiciones complejas con cambios en la estructura de jerarquía, use TransitionSet con ordering = ORDERING_SEQUENTIAL (las animaciones se ejecutan en secuencia, no en paralelo). Según la documentación de Android Developers (2026), Transition Framework admite todas las Views estándar pero no admite animación de superficie (SurfaceView, TextureView, VideoView).