Timeline — conceptos básicos, gestión del tiempo de animación en aplicaciones

¿Qué es Timeline?

Timeline es un modelo de tiempo de animación que define cuándo comienza una animación, cuánto dura y cómo la progresión del tiempo se transforma en cambios del parámetro animado. A diferencia de la animación fotograma a fotograma (frame-by-frame), donde cada fotograma se establece manualmente, la animación con línea de tiempo se describe mediante parámetros: duration — duración total, startDelay — retardo antes del inicio, repeatCount — número de repeticiones, y timingFunction — la curva de velocidad.

La línea de tiempo opera en un espacio normalizado [0, 1] — tiempo local o progreso. El valor cero corresponde al inicio de la animación, el uno a la finalización. Una función de easing (suavizado) convierte el tiempo local lineal en progreso real de la animación. Si repeatCount > 1, la línea de tiempo se cicla (RESTART) o se invierte (REVERSE). En iOS, CAMediaTiming añade speed (velocidad de reproducción, >1 acelera) y timeOffset (desplazamiento de la línea de tiempo). En Android, Animator usa setCurrentPlayTime() para el control directo de la posición en la línea de tiempo. Según Material Design, las animaciones de menos de 100 ms no se perciben como animaciones, mientras que las de más de 500 ms empiezan a irritar. La duración óptima para animaciones de interfaz es de 200–350 ms.

Timeline en iOS: CAMediaTiming y CACurrentMediaTime

En iOS, la gestión de la línea de tiempo de animación se realiza a través del protocolo CAMediaTiming, implementado por CAAnimation y CALayer. Proporciona las propiedades: duration (en segundos), beginTime (tiempo de inicio relativo a la línea de tiempo padre), repeatCount (número de repeticiones), repeatDuration (duración total de repeticiones), autoreverses (reversión automática), fillMode (comportamiento antes/después de la animación), speed (velocidad de reproducción) y timeOffset (desplazamiento de la línea de tiempo).

CACurrentMediaTime() es una función que devuelve el tiempo absoluto en segundos desde el último reinicio del dispositivo. Se utiliza como marca de tiempo base para sincronizar múltiples animaciones: establezca beginTime = CACurrentMediaTime() + offset para iniciar un grupo de animaciones con un retardo preciso. CAMediaTiming también admite la jerarquía de líneas de tiempo — una capa padre puede acelerar/ralentizar todas las animaciones hijas mediante la propiedad speed. En UIKit, UIViewPropertyAnimator (iOS 10+) abstrae la línea de tiempo a través de las propiedades duration, delay y los callbacks startAnimation/pauseAnimation/stopAnimation. En SwiftUI, la estructura Animation proporciona duration como parte de la especificación de la animación, pero el control directo de la línea de tiempo está oculto — para una línea de tiempo personalizada, use TimelineView (iOS 15+) con un scheduler personalizado.

Timeline en Android: Animator y duration

En Android, la gestión de la línea de tiempo está centralizada en la clase Animator y sus subclases (ValueAnimator, ObjectAnimator). Las principales propiedades de la línea de tiempo son: duration (en milisegundos), startDelay (retardo antes del inicio), repeatCount (número de repeticiones), repeatMode (RESTART o REVERSE). El método setCurrentPlayTime(long) permite navegar por la línea de tiempo a cualquier posición arbitraria.

ValueAnimator añade una capa de abstracción: genera valores de 0 a 1 (tiempo normalizado) basados en duration y los pasa a TimeInterpolator. AnimatorSet permite combinar múltiples Animator en una única línea de tiempo con ejecución secuencial (playSequentially) o paralela (playTogether). En Jetpack Compose, la línea de tiempo se gestiona a través de AnimationSpec: tween (durationMillis, delayMillis, easing), spring (dampingRatio, stiffness) y keyframes (puntos en la línea de tiempo con easing personalizado para cada segmento). Compose AnimatedContent usa una línea de tiempo para transitionSpec — el desarrollador describe cómo el contenido aparece/desaparece con desplazamientos temporales. Según Android Performance, la línea de tiempo de animación debe ser múltiplo de 16 ms (ciclo vsync) para 60fps — una duración incorrecta puede causar pérdida de fotogramas debido al desajuste con la tasa de refresco de la pantalla.

Composición de Animaciones en el Tiempo

La línea de tiempo se vuelve especialmente importante al componer múltiples animaciones. Tres patrones básicos: cascada — las animaciones se inician secuencialmente con un desplazamiento (cada siguiente comienza tras un offset de la anterior), paralelo — todas las animaciones comienzan simultáneamente con la misma línea de tiempo, y escalonado (stagger) — las animaciones se inician con superposición (la segunda comienza antes de que termine la primera).

En iOS, la cascada se implementa mediante beginTime de cada CAAnimation = beginTime anterior + duration anterior. Para el escalonado, se usa CAAnimationGroup con diferentes valores de beginTime en las animaciones anidadas. En Android, AnimatorSet admite playSequentially y playTogether; el escalonado se crea estableciendo startDelay para cada Animator. En Compose, AnimatedVisibility con enter/exitTransition usa escalonado en la variante staggerChildren para la aparición en cascada de elementos de lista. En WWDC y Google I/O 2024, ambas plataformas presentaron herramientas de visualización de líneas de tiempo: Xcode Animations Inspector y Android Studio Animations Timeline — muestran la línea de tiempo real y los fotogramas perdidos en tiempo real.

Ejemplos de Código

iOS: CABasicAnimation con CAMediaTiming

Un ejemplo de animación con línea de tiempo personalizada: retardo de 0.3 s, duración de 0.6 s, autoreverse y repetición infinita. CAMediaTiming controla todos los parámetros temporales.

import UIKit

func breathingAnimation(layer: CALayer) {
    let animation = CABasicAnimation(keyPath: "opacity")
    animation.duration = 0.6
    animation.beginTime = CACurrentMediaTime() + 0.3
    animation.fromValue = 1.0
    animation.toValue = 0.3
    animation.autoreverses = true
    animation.repeatCount = .infinity
    animation.speed = 1.0
    animation.fillMode = .both

    layer.add(animation, forKey: "breathing")
}

beginTime = CACurrentMediaTime() + 0.3 proporciona un retardo de 300 ms. autoreverses = true hace que la animación se ejecute en reversa después de cada ciclo. repeatCount = .infinity crea un bucle infinito del efecto “respiración”. speed = 1.0 — velocidad normal; acelere la animación 2x con un valor de 2.0.

iOS: TimelineView para Línea de Tiempo Personalizada

SwiftUI TimelineView (iOS 15+) proporciona acceso a la línea de tiempo del sistema para animaciones personalizadas. La Vista se actualiza en cada tick del scheduler.

import SwiftUI

struct TimelineViewExample: View {
    var body: some View {
        TimelineView(.periodic(from: .now, by: 0.1)) { context in
            let seconds = context.date.timeIntervalSinceReferenceDate
            let phase = sin(seconds * 2 * .pi)

            Circle()
                .fill(Color.blue)
                .frame(width: 60 + 30 * phase)
                .animation(.linear(duration: 0), value: phase)
        }
    }
}

TimelineView con scheduler .periodic genera ticks cada 0.1 s. En el closure, context.date es la hora actual, que se convierte en una fase de onda sinusoidal. El tamaño del círculo pulsa a una frecuencia de 1 Hz. TimelineView es la única forma de crear una animación con su propia línea de tiempo en SwiftUI sin la API de Animation.

Android: ValueAnimator con Línea de Tiempo Personalizada

ValueAnimator con control completo de la línea de tiempo: retardo, duración, repetición. El método setCurrentPlayTime permite saltar a lo largo de la línea de tiempo.

import android.animation.ValueAnimator
import android.view.animation.AccelerateDecelerateInterpolator
import android.view.View

fun View.timelineAnimation() {
    ValueAnimator.ofFloat(0f, 1f).apply {
        duration = 400
        startDelay = 200
        repeatCount = 2
        repeatMode = ValueAnimator.REVERSE
        interpolator = AccelerateDecelerateInterpolator()

        addUpdateListener { animator ->
            val progress = animator.animatedFraction
            alpha = progress
            translationX = progress * 100f
        }

        start()
    }
}

startDelay = 200 ms — retardo antes del inicio. repeatMode = REVERSE devuelve la animación al valor inicial. animatedFraction da el progreso de 0 a 1 teniendo en cuenta repeatMode. addUpdateListener se dispara cada fotograma (normalmente 16 ms). Use pause() / resume() para pausar.

Android: AnimatorSet para Composición de Línea de Tiempo

AnimatorSet permite crear líneas de tiempo complejas a partir de múltiples animaciones. El ejemplo demuestra la ejecución secuencial con superposición (stagger).

import android.animation.AnimatorSet
import android.animation.ObjectAnimator
import android.view.View

fun View.staggerAnimation() {
    val fadeIn = ObjectAnimator.ofFloat(this, "alpha", 0f, 1f).apply {
        duration = 300
    }
    val slideUp = ObjectAnimator.ofFloat(this, "translationY", 100f, 0f).apply {
        duration = 400
        startDelay = 100
    }
    val scale = ObjectAnimator.ofFloat(this, "scaleX", 0.8f, 1f).apply {
        duration = 250
        startDelay = 200
    }

    AnimatorSet().apply {
        playTogether(fadeIn, slideUp, scale)
        start()
    }
}

playTogether inicia todas las animaciones en paralelo, pero cada una tiene su propio startDelay — esto crea un efecto escalonado: fadeIn comienza primero (0 ms), slideUp después de 100 ms, scale después de 200 ms. La línea de tiempo resultante: 0 — 100 — 200 — 600 ms. Para ejecución secuencial, use playSequentially.