Cómo animar texto en SwiftUI

Introducción

En el competitivo mundo del desarrollo móvil, una interfaz de usuario estática ya no es suficiente. Los usuarios esperan aplicaciones vivas, que respondan y que les guíen a través de la experiencia con fluidez. Para un iOS developer, dominar el arte del movimiento es crucial. Y cuando hablamos de interfaces, el texto es el rey. No es solo un medio para transmitir información; es un elemento de diseño que puede (y debe) cobrar vida.

La llegada de SwiftUI cambió radicalmente el panorama de la animación en el ecosistema de Apple. Atrás quedaron los días de luchar con constraints complejos o bloques interminables de UIView.animate en UIKit. SwiftUI, con su paradigma declarativo, hace que animar texto sea no solo posible, sino sorprendentemente intuitivo, una vez que entiendes las reglas del juego.

Este tutorial está diseñado para el desarrollador que ya se siente cómodo con la programación Swift y los conceptos básicos de SwiftUI, pero que quiere llevar sus UIs al siguiente nivel. Exploraremos desde las animaciones más básicas hasta técnicas avanzadas que requieren profundizar en cómo SwiftUI renderiza y actualiza las vistas. Lo mejor de todo es que, gracias a la naturaleza multiplataforma de SwiftUI, casi todo lo que aprendas aquí podrás aplicarlo directamente en aplicaciones para iOS, macOS y watchOS usando el mismo Xcode.

Prepárate para dar vida a tus palabras y transformar la experiencia de tus usuarios.

Los Fundamentos: El Estado (State) como Motor de la Animación

En SwiftUI, la animación no es algo que “haces” a una vista; es la representación visual de un cambio de estado a lo largo del tiempo. Esta es la piedra angular de la programación Swift moderna para UIs.

Para animar texto, primero debemos entender qué propiedades del texto son animables “de forma nativa” por SwiftUI y cuáles requieren un poco más de ingenio.

Animaciones Implícitas: Lo Fácil

La forma más sencilla de animar es utilizando el modificador .animation(). Este modificador le dice a SwiftUI: “Si el valor que estoy observando cambia, no saltes al nuevo estado; interpola suavemente hacia él”.

Empecemos con propiedades simples que SwiftUI sabe cómo interpolar perfectamente: la opacidad, el color y la escala (transformación).

Abre Xcode y crea un nuevo proyecto SwiftUI. Prueba el siguiente código:

import SwiftUI

struct BasicTextAnimationView: View {
    // El estado que impulsa la animación
    @State private var isActive: Bool = false

    var body: some View {
        VStack(spacing: 20) {
            Text("¡Hola, SwiftUI!")
                .font(.largeTitle)
                .fontWeight(.bold)
                // Propiedad 1: Color animable
                .foregroundColor(isActive ? .blue : .gray)
                // Propiedad 2: Escala (transformación) animable
                .scaleEffect(isActive ? 1.5 : 1.0)
                // Propiedad 3: Opacidad animable
                .opacity(isActive ? 1.0 : 0.5)
                // El modificador mágico que suaviza los cambios anteriores
                .animation(.easeInOut(duration: 0.8), value: isActive)

            Button("Animar") {
                // Simplemente cambiamos el estado
                isActive.toggle()
            }
            .buttonStyle(.borderedProminent)
        }
    }
}

#Preview {
    BasicTextAnimationView()
}

Análisis para el iOS Developer:

1. @State private var isActive: Esta variable booleana es el detonante.
2. Modificadores Ternarios: Usamos isActive ? valorA : valorB para definir los dos estados visuales del texto.
3. .scaleEffect vs Cambiar Tamaño de Fuente: Esta es una distinción crítica. .scaleEffect aplica una transformación vectorial a la vista después de ser renderizada. Es muy eficiente y suave. Si intentaras cambiar .font(.system(size: isActive ? 30 : 20)), verías que el texto “salta” de tamaño en lugar de crecer suavemente (más adelante veremos cómo solucionar esto).
4. .animation(..., value: isActive): Este es el estándar moderno en SwiftUI. Vinculamos la animación específicamente al cambio de la variable isActive.

Este código funciona perfectamente en un iPhone, en la ventana de un Mac o en la pequeña pantalla de un Apple Watch.

El Desafío del Texto: Lo que NO es Animable por Defecto

Como iOS developer experimentado, pronto te toparás con una pared. SwiftUI es excelente animando números (CGFloat, Double, Color), pero no sabe cómo animar inherentemente cadenas de texto (String) o propiedades complejas de fuentes.

Si intentas esto:

@State private var text = "Hola"
// ... luego cambias a ...
text = "Mundo"

El texto simplemente cambiará de golpe. SwiftUI no sabe cómo transformar la ‘H’ en ‘M’ píxel por píxel de forma nativa.

Del mismo modo, si intentas animar el peso de la fuente (fontWeight) de .regular a .bold directamente dentro de un bloque de animación, a menudo verás un cambio brusco, ya que no todos los modificadores de fuente son interpolables por defecto.

Para superar esto, necesitamos técnicas avanzadas.

Técnica Avanzada 1: El Efecto “Máquina de Escribir” (Typewriter)

Este es un efecto clásico y muy solicitado que simula el texto apareciendo carácter por carácter. No es una “animación” en el sentido de interpolar valores, sino una manipulación inteligente del estado de la cadena de texto a lo largo del tiempo usando las capacidades asíncronas de la programación Swift.

Vamos a crear una vista reutilizable para esto.

import SwiftUI

struct TypewriterText: View {
    let fullText: String
    let speed: TimeInterval
    @State private var displayedText: String = ""

    init(_ text: String, speed: TimeInterval = 0.05) {
        self.fullText = text
        self.speed = speed
    }

    var body: some View {
        Text(displayedText)
            .font(.title2)
            .fontWeight(.medium)
            .onAppear {
                startTyping()
            }
    }

    private func startTyping() {
        // Reiniciamos por si la vista se reutiliza
        displayedText = ""
        
        // Usamos Swift Concurrency para un manejo limpio del tiempo
        Task {
            for char in fullText {
                // Pequeña pausa entre caracteres
                try? await Task.sleep(nanoseconds: UInt64(speed * 1_000_000_000))
                
                // Actualizamos el estado en el hilo principal
                await MainActor.run {
                    displayedText.append(char)
                }
            }
        }
    }
}

// Ejemplo de uso
struct TypewriterDemoView: View {
    @State private var key = UUID() // Truco para reiniciar la vista

    var body: some View {
        VStack {
            TypewriterText("Bienvenido al futuro de SwiftUI. Animar texto nunca fue tan fácil.", speed: 0.08)
                .multilineTextAlignment(.center)
                .padding()
                .id(key) // Fuerza el redibujado si cambia la ID

            Button("Reiniciar") {
                key = UUID()
            }
            .padding(.top)
        }
    }
}

#Preview {
    TypewriterDemoView()
}

Por qué funciona esto para un iOS Developer:

• Swift Concurrency (Task, await sleep): Es la forma moderna de manejar retrasos en lugar de los viejos Timer o DispatchQueue.main.asyncAfter. Mantiene el código limpio y legible.
• @State displayedText: La vista solo sabe que debe mostrar esta variable. La lógica de negocio va añadiendo letras a esta variable poco a poco, y el sistema reactivo de SwiftUI se encarga de actualizar la UI en cada adición.

Técnica Avanzada 2: Animando lo “Inanimable” con AnimatableModifier

Volvamos al problema del tamaño de la fuente. ¿Por qué .font(.system(size: 20)) salta a size: 40 sin transición?

SwiftUI necesita saber cómo calcular los pasos intermedios (ej. tamaño 20.1, 20.5, 25.0, 39.9…). Para propiedades que SwiftUI no soporta nativamente, debemos implementar el protocolo Animatable.

El protocolo Animatable requiere una propiedad animatableData. SwiftUI le pedirá a esta propiedad que cambie suavemente de un valor inicial a uno final, y nosotros usaremos ese valor cambiante para configurar nuestra vista.

Vamos a crear un modificador personalizado para animar el tamaño de fuente suavemente. Esto es programación Swift de nivel intermedio-avanzado aplicada a UI.

import SwiftUI

// 1. Definimos un Struct que conforma a AnimatableModifier
struct AnimatableFontSizeModifier: AnimatableModifier {
    var size: CGFloat
    var weight: Font.Weight

    // 2. La clave: animatableData.
    // Le decimos a SwiftUI: "Cuando quieras animar, usa este valor 'size'".
    // SwiftUI interpolará 'size' (ej: de 20.0 a 40.0) muchas veces por segundo.
    var animatableData: CGFloat {
        get { size }
        set { size = newValue }
    }

    func body(content: Content) -> some View {
        // 3. Usamos el valor interpolado 'size' para crear la fuente en cada frame
        content
            .font(.system(size: size, weight: weight))
    }
}

// Extensión para facilitar su uso
extension View {
    func animatableFont(size: CGFloat, weight: Font.Weight = .regular) -> some View {
        self.modifier(AnimatableFontSizeModifier(size: size, weight: weight))
    }
}

// Ejemplo de uso
struct SmoothFontResizeView: View {
    @State private var isLarge: Bool = false

    var body: some View {
        VStack {
            Text("Tamaño Suave")
                // Usamos nuestro modificador personalizado en lugar de .font()
                .animatableFont(size: isLarge ? 50 : 20, weight: .bold)
                .foregroundColor(.purple)
                // La animación explícita es necesaria aquí
                .animation(.spring(response: 0.6, dampingFraction: 0.7), value: isLarge)

            Button("Cambiar Tamaño") {
                isLarge.toggle()
            }
            .padding(.top, 30)
        }
    }
}

#Preview {
    SmoothFontResizeView()
}

Análisis Profundo:

Este patrón es fundamental para cualquier iOS developer que quiera dominar SwiftUI. Al implementar animatableData, abres la puerta a animar cualquier cosa que pueda representarse numéricamente (incluso colores personalizados, rutas de dibujo, etc.).

Cuando cambias isLarge, SwiftUI dice: “Necesito ir de tamaño 20 a 50. Usaré una animación tipo ‘spring’. Voy a llamar a AnimatableFontSizeModifier 60 veces por segundo, pasándole valores como 21.5, 28.3, 35.1, 48.9… y tú redibujarás el texto con ese tamaño exacto”. El resultado es una interpolación de fuente perfectamente suave que no se puede lograr con .scaleEffect.

Técnica Avanzada 3: Animación Carácter por Carácter (El Efecto Ola)

Para lograr efectos realmente dinámicos, donde cada letra parece moverse independientemente (como una ola, o letras que entran volando una por una), necesitamos romper la cadena de texto.

SwiftUI trata un objeto Text como una unidad monolítica. Para animar texto por letras, debemos dividir el String en un array de caracteres y usar ForEach para crear una vista Text individual para cada letra, colocándolas en un HStack.

Una vez separados, podemos aplicar animaciones con retraso (delay) basado en el índice de cada letra.

import SwiftUI

struct WavyText: View {
    let text: String
    @State private var isWaving: Bool = false

    // Dividimos el texto en caracteres y sus índices
    var characters: [(offset: Int, element: Character)] {
        Array(text.enumerated())
    }

    var body: some View {
        HStack(spacing: 0) { // Spacing 0 para que parezca una palabra unida
            ForEach(characters, id: \.offset) { index, char in
                Text(String(char))
                    .font(.largeTitle)
                    .fontWeight(.heavy)
                    .foregroundColor(.teal)
                    // Aplicamos un desplazamiento vertical basado en el estado
                    .offset(y: isWaving ? -20 : 0)
                    // Aquí está la magia: un retraso basado en el índice
                    .animation(
                        .easeInOut(duration: 0.5)
                        .repeatForever(autoreverses: true)
                        .delay(Double(index) * 0.05), // Retraso escalonado
                        value: isWaving
                    )
            }
        }
        .onAppear {
            // Iniciamos la animación al aparecer
            isWaving = true
        }
    }
}

struct WavyTextDemo: View {
    var body: some View {
        WavyText(text: "SwiftUI Rocks!")
    }
}

#Preview {
    WavyTextDemo()
}

Consideraciones para el iOS Developer:

• Rendimiento: Dividir textos muy largos en cientos de vistas Text individuales puede tener un impacto en el rendimiento si no se tiene cuidado. Para títulos cortos o frases de impacto, es perfecto.
• HStack(spacing: 0): Es crucial para que las letras no se vean separadas. Ten en cuenta que esto puede afectar ligeramente al kerning (espaciado natural entre letras) de la fuente, pero para efectos visuales suele ser aceptable.
• delay(Double(index) * factor): Esta fórmula es la clave para crear movimientos secuenciales o en “ola”.

Consideraciones Multiplataforma (iOS, macOS, watchOS)

Una de las mayores promesas de aprender SwiftUI como iOS developer es la portabilidad.

Los tres ejemplos anteriores funcionan correctamente en macOS y watchOS con cambios mínimos o nulos.

• En watchOS, el espacio es limitado. Las animaciones de “Typewriter” o el “WavyText” son excelentes para complicaciones grandes o pantallas de notificación donde el texto es el protagonista.
• En macOS, tienes más espacio y la interacción del ratón. Podrías usar el modificador .onHover para detonar estas animaciones de texto cuando el usuario pasa el cursor sobre un título, añadiendo un nivel de pulido increíble a tus apps de escritorio.

La clave es que la lógica de la programación Swift y los modificadores de animación (.animation, .offset, AnimatableModifier) son agnósticos de la plataforma.

Conclusión

Animar texto en SwiftUI ha pasado de ser una tarea casi imposible en las primeras versiones a un campo de juego creativo para el iOS developer moderno.

Hemos recorrido desde las animaciones implícitas básicas (color, escala) hasta técnicas avanzadas que requieren entender el ciclo de renderizado de SwiftUI (AnimatableModifier) y la manipulación de cadenas (efectos carácter por carácter).

La animación no debe ser una ocurrencia tardía; es una parte fundamental de cómo comunicas cambios y guías al usuario en tu aplicación. Con las herramientas que Xcode y SwiftUI ponen a tu disposición, el único límite es tu creatividad. No tengas miedo de experimentar, de combinar estas técnicas y de profundizar en la documentación de Animatable.

Si tienes cualquier duda sobre este artículo, contacta conmigo y estaré encantado de ayudarte 🙂. Puedes contactar conmigo en mi perfil de X o en mi perfil de Instagram