Las transiciones zoom en iOS 18 simplifican las animaciones entre pantallas en SwiftUI con apenas dos variables y un modificador. Si desarrollas apps móviles y buscas reemplazar controladores y delegates por código limpio, esta novedad te ahorra trabajo y mejora la experiencia visual del usuario.

¿Qué son las transiciones zoom en iOS 18?

Son un nuevo efecto de navegación que amplía visualmente el elemento de origen hasta convertirlo en la pantalla de destino, y lo reduce al volver. Antes necesitabas controladores personalizados y delegates; ahora basta con una función llamada zoom dentro de navigationTransition [1:50].

¿Para qué sirve la transición zoom? Para crear animaciones fluidas entre pantallas conectando un origen visual (botón, tarjeta, imagen) con su pantalla de destino, usando un zoom in al abrir y un zoom out al cerrar.

¿Cómo preparar el proyecto en Xcode con MVVM?

Lo primero es clonar el repositorio enlazado en la descripción y abrirlo en Xcode. El proyecto está organizado con el patrón MVVM porque trabajamos con elementos visuales y conviene separar vista, modelo y lógica [0:38].

Dentro de la carpeta Views encontrarás subcarpetas por módulo. Empezamos en la clase uno del módulo uno, donde vive la vista de ejemplo del zoom.

¿Qué variables necesitas declarar?

Antes de tocar el diseño, declara dos propiedades obligatorias en la vista:

• Un identificador de transición (transitionID) que conecta origen y destino.
• Una variable namespace con la anotación @Namespace para compartir el nombre entre vistas.
• La anotación @State para que el identificador maneje su estado durante la transición [1:25].

¿Cómo construir el botón de origen con NavigationLink?

Dentro de un VStack, agrega un NavigationLink. Este componente permite navegar de una pantalla a otra y recibe un parámetro label para definir desde dónde se dispara la acción.

Un ejemplo básico es un texto que diga Abrir pantalla, personalizado así:

• padding(10) para separación uniforme en los cuatro lados.
• Color de fondo verde para simular un botón.
• clipShape con un RoundedRectangle y cornerRadius: 10 para esquinas redondeadas.

Con eso queda listo el origen visual de la transición.

¿Cómo defines el destino de la navegación?

El destino es otro VStack que apila contenido vertical. Para este ejemplo basta un texto llamado contenido dentro del stack. Ya tienes definidos el origen (el botón) y el destino (la pantalla con el texto) [3:15].

¿Cómo aplicar el efecto zoom con navigationTransition?

Si corres la app así, la pantalla se abre con la animación estándar. Para activar el efecto zoom, agrega al VStack de destino el modificador navigationTransition, que reemplaza al antiguo modificador transition para navegación.

La función zoom pide dos parámetros obligatorios:

• sourceID: aquí pasas la variable transitionID.
• in: aquí pasas el namespace, en este caso ZoomExampleNamespace.

¿Qué hace navigationTransition en iOS 18? Es el nuevo modificador que aplica animaciones de transición entre pantallas. Combinado con .zoom(sourceID:in:) conecta un elemento de origen con su destino para producir un efecto de ampliación natural.

¿Cómo conectar el origen con matchedTransitionSource?

Falta marcar el origen para que iOS sepa desde qué elemento debe ampliar. Sobre el NavigationLink aplica matchedTransitionSource, que también pide dos parámetros:

• El identificador, donde colocas transitionID.
• El namespace, donde colocas ZoomExampleNamespace.

Ambos extremos comparten el mismo transitionID y el mismo namespace. Esa coincidencia es la que permite a SwiftUI calcular la animación entre el botón y la pantalla destino [4:30].

¿Qué gestos quedan habilitados al usar zoom?

Al correr la app, entra al primer módulo y abre Transiciones Zoom. Verás el botón Abrir pantalla que acabas de construir. Al tocarlo, la pantalla se expande con un zoom in; al cerrarla, se reduce con un zoom out.

La transición habilita gestos nativos sin código adicional:

• Pellizco con dos dedos para cerrar la pantalla.
• Pellizco para hacer zoom in y zoom out sobre el contenido.
• Arrastre para cerrar con gesto natural.

¿Por qué importa este cambio frente a versiones anteriores?

Antes de iOS 18, lograr este tipo de animación requería crear controladores personalizados, delegates y lógica adicional para coordinar la animación entre vistas. Ahora bastan dos variables, un modificador en el destino y otro en el origen.

Esta facilidad reduce código repetitivo, hace el proyecto más legible bajo MVVM y deja el foco en la experiencia visual y no en la plumbing de las animaciones.

¿Ya probaste aplicar el efecto zoom en una app propia? Cuéntame en los comentarios qué pantalla animaste y cómo te fue con los gestos de pellizco.