Cuando construyes apps en iOS y necesitas efectos visuales que se ejecuten de forma continua, el rendimiento siempre está en juego. TimelineView en SwiftUI te permite sincronizar animaciones con una línea de tiempo interna, sin escribir lógica compleja ni sacrificar fluidez. Es ideal si desarrollas interfaces dinámicas que deben sentirse vivas sin penalizar la batería ni la memoria.
Qué es TimelineView y por qué importa en SwiftUI
TimelineView es un componente de SwiftUI pensado para ejecutar animaciones periódicas ancladas a un temporizador interno. A diferencia de withAnimation, que dispara cambios manuales de estado, este se enfoca en mantener una animación continua sin que tú gestiones cada actualización.
¿Para qué sirve TimelineView? Para ejecutar animaciones sincronizadas con una línea de tiempo, evitando lógica manual y reduciendo el consumo de recursos en efectos que corren todo el tiempo.
La clave está en su enfoque hacia el rendimiento: puedes dejarlo corriendo durante toda la sesión del usuario sin notar caídas de fluidez.
Cómo crear una animación de colores con TimelineView
El ejemplo gira en torno a un fondo que mezcla dos colores de forma dinámica. Primero defines dos variables de estado privadas que servirán como base de la mezcla.
swift
private var colorOne: Color = .green
private var colorTwo: Color = .blue
Dentro del VStack agregas un TimelineView con un schedule de tipo animación. Este schedule indica que el contenido se redibujará al ritmo de la animación.
swift
TimelineView(.animation) { timeline in
let time = timeline.date.timeIntervalSince1970
RoundedRectangle(cornerRadius: 8)
.fill(colorOne.mix(with: colorTwo, by: sin(time)))
.frame(width: 400, height: 800)
}
La variable time toma la fecha actual como intervalo desde 1970, un valor que crece de forma constante y alimenta la función matemática.
Por qué se usa la función seno para mezclar colores
La función sin(time) devuelve un valor oscilante entre 1 y 1, perfecto para alimentar el parámetro by del método mix. Esa oscilación produce una transición suave y cíclica entre verde y azul, recorriendo cientos de tonos intermedios de la paleta.
¿Qué hace el método mix en Color? Fusiona dos colores en una proporción definida por el parámetro by. Si ese valor cambia con el tiempo, obtienes una mezcla dinámica.
Cómo se dibuja el frame con RoundedRectangle
El objeto visual es un RoundedRectangle con cornerRadius de 8 unidades, relleno con la mezcla calculada y dimensionado en un frame de 400 por 800 unidades. Un detalle importante: el frame debe ir como modificador del RoundedRectangle, no dentro de sus llaves de inicialización, porque ahí es donde aparece el error más común al escribir el código.
Cuándo usar TimelineView en una aplicación real
Este componente brilla en escenarios donde la animación debe vivir en segundo plano sin pelearse con el resto de la interfaz. Algunos casos prácticos:
- Fondos de pantalla animados que cambian de color con suavidad.
- Splash screens o pantallas de bienvenida con efectos continuos.
- Indicadores visuales de actividad que no dependen de un estado externo.
- Visualizaciones que requieren un tick constante, como relojes o contadores.
En el ejemplo, el resultado es un panel de 800 por 400 unidades que combina verde y azul de forma fluida. Y aquí viene lo interesante: ese mismo patrón puede convertirse en el fondo global de tu app o en un detalle decorativo dentro de una vista específica.
¿TimelineView afecta el rendimiento de la app? No de forma significativa. Está diseñado para animaciones continuas, así que consume muchos menos recursos que una solución manual con timers o lógica de estado.
¿En qué pantalla de tu próxima app usarías TimelineView? Cuéntalo en los comentarios.
