Animación en desarrollo móvil: qué es, tipos y cómo usarla

Animación en Android: Property Animation y View Animation

Android proporciona dos sistemas principales de animación: View Animation (heredado) y Property Animation (moderno). View Animation (o Tween Animation) funciona solo con la representación visual — cambia la visualización de la Vista pero no sus propiedades reales (por ejemplo, las coordenadas de clic permanecen en su lugar). Property Animation, introducida en Android 3.0, cambia las propiedades reales del objeto a través de Animator — ValueAnimator, ObjectAnimator o AnimatorSet.

ObjectAnimator y ValueAnimator

ObjectAnimator es la clase más popular de Property Animation. Anima una propiedad específica del objeto (por ejemplo, translationX, alpha, scaleY) durante un tiempo determinado con un Interpolator dado.

ObjectAnimator.ofFloat(myView, "translationX", 0f, 300f).apply {
    duration = 500
    interpolator = FastOutSlowInInterpolator()
    startDelay = 200
}.start()

ValueAnimator no está vinculado a un objeto específico — genera valores que se pueden usar para cualquier propiedad o lógica personalizada.

View Animation y animaciones XML

View Animation se describe en archivos XML res/anim/. Se admiten cuatro tipos: scale, translate, rotate, alpha. La desventaja es que la animación no cambia los parámetros reales de la Vista. Para efectos simples (parpadeo, rotación) View Animation sigue siendo aplicable, pero para nuevos proyectos se recomienda Property Animation.

Animación en Jetpack Compose

Jetpack Compose ofrece una API de animación moderna: animateAsState, Animatable, AnimatedVisibility y AnimatedContent. La animación en Compose es reactiva: cuando el estado cambia, la animación se inicia automáticamente.

var expanded = remember { mutableStateOf(false) }
val size = animateAsState(
    if (expanded) 200f else 50f
)
Box(
    modifier = Modifier
        .size(size.value, size.value)
        .clickable { expanded = !expanded }
        .background(Color.Blue)
)

Animación en iOS: Core Animation y UIView.animate

iOS proporciona un potente stack de animación basado en Core Animation — un framework de bajo nivel que trabaja con CALayer. UIKit se construye sobre Core Animation con métodos convenientes UIView.animate y UIViewPropertyAnimator.

UIView.animate

UIView.animate es la forma más simple de animar en iOS. Permite animar frame, alpha, transform, backgroundColor y otras propiedades de UIView.

UIView.animate(
    withDuration: 0.5,
    delay: 0.2,
    usingSpringWithDamping: 0.6,
    initialSpringVelocity: 1.0,
    options: [.curveEaseInOut]
) {
    myView.frame.origin.x += 300
    myView.alpha = 0.5
}

UIKit Dynamics

UIKit Dynamics — un framework para animación física: gravedad, colisiones, resortes, fuerzas de atracción. Permite crear comportamientos realistas de objetos sin cálculo manual de física. Se utiliza para transiciones personalizadas, menús animados y elementos de juego.

CAAnimation y Core Animation

Core Animation (CAAnimation, CABasicAnimation, CAKeyframeAnimation) — una API de bajo nivel para la animación de CALayer. Admite transformaciones 3D, animación de trayectoria (keyframe), enmascaramiento y composición. SwiftUI utiliza Core Animation internamente a través de los modificadores animation y withAnimation.

let animation = CABasicAnimation(keyPath: "transform.rotation.z")
animation.fromValue = 0
animation.toValue = CGFloat.pi * 2
animation.duration = 1.0
animation.repeatCount = .infinity
myLayer.add(animation, forKey: "rotation")

Para la mayoría de los proyectos en iOS se utiliza SwiftUI con su animación incorporada. Por ejemplo, withAnimation envuelve los cambios de estado en un contexto animado.

Animación vectorial: Lottie y Rive

Las animaciones complejas (personajes, transiciones, cargadores) son difíciles de implementar con código. Lottie y Rive resuelven este problema permitiendo a los diseñadores crear animaciones en editores visuales y a los desarrolladores integrarlas en la aplicación como un componente listo.

Lottie

Lottie — una biblioteca de Airbnb (ahora LottieFiles) que renderiza animaciones de Adobe After Effects exportadas en formato JSON. Compatible con Android, iOS, Flutter, React Native y Web. Las animaciones de Lottie son vectoriales, se escalan sin pérdida de calidad y se pueden personalizar mediante programación (velocidad, progreso, colores).

// Android
import com.airbnb.lottie.LottieAnimationView
val lottieView = findViewById<LottieAnimationView>(R.id.lottieView)
lottieView.setAnimation(R.raw.loading_animation)
lottieView.playAnimation()

Rive

Rive (anteriormente 2Dimensions) — una herramienta más avanzada para animación vectorial. A diferencia de Lottie, Rive admite animación interactiva: estados, disparadores, transiciones. La animación se crea en Rive Editor y se controla en la aplicación a través de State Machine. Rive es adecuado para interfaces de juego, iconos animados y transiciones complejas con retroalimentación.

En IT Sectr usamos Lottie para animaciones decorativas (cargadores, operaciones exitosas, estados vacíos) y Rive para elementos interactivos de pantallas de onboarding. Esto reduce el tiempo de desarrollo de animaciones en un 60% en comparación con la implementación manual en UIKit o Canvas.

Shared Element Transition y Hero Animation

Shared Element Transition — animación en la que un elemento (imagen, texto, tarjeta) se mueve y transforma suavemente al hacer transición entre pantallas. Esto crea la ilusión de continuidad: el usuario no "va" a una nueva pantalla, sino que "se sumerge" en el elemento.

Android Shared Element Transition

En Android, la transición se implementa a través de ActivityOptionsCompat y atributos transitionName. FragmentTransaction admite addSharedElement para transiciones dentro de Activity. Compose utiliza SharedTransitionLayout con SharedContentState.

iOS Hero Transition

iOS no tiene una transición Hero incorporada, pero la biblioteca Hero (de Luke Zhao) implementa este patrón en UIKit. Simplemente asigne un id a los elementos en ambas pantallas — Hero creará automáticamente una transición suave. En SwiftUI, la animación de transición está integrada a través de NavigationStack y matchedGeometryEffect.

Flutter Hero

Flutter tiene un widget Hero incorporado con un parámetro tag. Cuando dos páginas contienen Hero con el mismo tag, Flutter anima automáticamente la transición entre ellas. Esta es una de las formas más simples de implementar animación compleja en una aplicación móvil.

Hero(
    tag: 'profile_avatar',
    child: CircleAvatar(
        backgroundImage: AssetImage('avatar.jpg'),
        radius: 50,
    ),
)

Spring Animation, Interpolator y Easing

Para que la animación se vea natural, se utilizan curvas de velocidad — Interpolator en Android y Easing en iOS. Determinan cómo cambia la velocidad de la animación desde el inicio hasta el final.

Interpoladores de Android

Android admite varios Interpoladores incorporados: LinearInterpolator (uniforme), AccelerateDecelerateInterpolator (lento-rápido-lento), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (con sobrepaso) y BounceInterpolator (con rebote). Se puede crear un Interpolator personalizado a través de XML o la clase TimeInterpolator.

Spring Animation

Spring Animation (animación de resorte) modela la física del resorte con parámetros damping (amortiguación) y stiffness (rigidez). Damping 0 — oscilaciones infinitas, 1 — sin oscilaciones. Stiffness determina la velocidad de retorno. Spring Animation está disponible en iOS (UIViewPropertyAnimator con UISpringTimingParameters), Android (SpringAnimation de physics2) y SwiftUI (spring()).

La documentación de Spring Animation en Android contiene ejemplos detallados de configuración.

Animación de línea de tiempo

Timeline (línea de tiempo) — un enfoque en el que la animación se divide en fotogramas a lo largo del tiempo. Se utiliza para secuencias complejas donde AnimationSet o Group no son suficientemente flexibles. Android admite AnimatorSet, iOS — CAAnimationGroup, Flutter — Interval en AnimationController.