Por qué son importantes las animaciones
Movimiento que orienta y sorprende gratamente a los usuarios
Por qué son importantes las animaciones es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Android Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Android Academy incluye 4 lecciones en total.
Movimiento con un propósito
Las animaciones son más que un adorno visual. En una excelente aplicación de Android, el movimiento guía la atención, explica qué ha cambiado y hace que la interfaz parezca receptiva y dinámica.
En este curso aprenderá a usar las API de animación de Jetpack Compose, desde los asistentes de una sola línea animate*AsState hasta AnimatedVisibility, las transiciones y los resortes basados en física.
Esta primera lección trata sobre por qué y cuándo animar, para que el movimiento siempre tenga una función.
Compose anima de forma declarativa
En Compose no inicia ni detiene manualmente las animaciones fotograma a fotograma. En su lugar, describe un valor objetivo y Compose anima suavemente hacia él cada vez que cambia ese valor.
Aquí, el color de un cuadro depende de un único estado booleano. Al tocarlo, el estado cambia y el color se transforma automáticamente.
@Composable
fun ColorBox() {
var selected by remember { mutableStateOf(false) }
val color by animateColorAsState(
targetValue = if (selected) Color.Green else Color.Gray,
label = "box-color"
)
Box(
Modifier
.size(120.dp)
.background(color)
.clickable { selected = !selected }
)
}Respuesta a las acciones del usuario
Una de las funciones más importantes del movimiento es proporcionar respuesta. Cuando un usuario toca un botón o activa un interruptor, una pequeña animación confirma que la aplicación ha recibido la acción.
Los cambios instantáneos y bruscos parecen un error; una transición rápida de 150-300 ms resulta pulida. Aquí, el botón se encoge ligeramente mientras se pulsa.
@Composable
fun PressableButton(onClick: () -> Unit) {
var pressed by remember { mutableStateOf(false) }
val scale by animateFloatAsState(
targetValue = if (pressed) 0.92f else 1f,
label = "press-scale"
)
Button(
onClick = onClick,
modifier = Modifier.graphicsLayer {
scaleX = scale; scaleY = scale
}
) { Text("Tap me") }
}Explicar los cambios de estado
Cuando cambia la interfaz, la animación ayuda al usuario a entender qué acaba de ocurrir. Un elemento que aparece desvaneciéndose y deslizándose se interpreta como "nuevo"; uno que se desvanece se interpreta como "eliminado".
Sin movimiento, el contenido puede aparecer o desaparecer bruscamente, lo que deja al usuario confundido sobre si algo apareció, desapareció o se movió.
@Composable
fun Banner(visible: Boolean) {
AnimatedVisibility(
visible = visible,
enter = fadeIn() + slideInVertically(),
exit = fadeOut() + slideOutVertically()
) {
Text("Saved successfully!")
}
}Continuidad y sentido espacial
El movimiento conserva la continuidad. Cuando una tarjeta se expande o un elemento se mueve a una nueva posición, animar el cambio ayuda al usuario a orientarse en el espacio.
Compose puede animar automáticamente los cambios de diseño con Modifier.animateContentSize(), de modo que un cuadro crezca o se reduzca suavemente cuando cambie su contenido.
@Composable
fun ExpandableCard(expanded: Boolean) {
Column(
Modifier
.fillMaxWidth()
.animateContentSize()
.padding(16.dp)
) {
Text("Title", style = MaterialTheme.typography.titleMedium)
if (expanded) {
Text("Here is the longer body that appears when expanded.")
}
}
}La duración y el ritmo importan
Una buena animación es rápida. La mayoría de las transiciones de la interfaz deberían durar aproximadamente entre 150 ms y 400 ms. Si es demasiado lenta, la aplicación parece pesada; si es demasiado rápida, el movimiento resulta imperceptible.
Compose permite ajustar la duración y el ritmo con tween y una curva de easing. El easing hace que el movimiento parezca natural al acelerarlo y desacelerarlo.
val offset by animateDpAsState(
targetValue = if (open) 0.dp else 200.dp,
animationSpec = tween(
durationMillis = 300,
easing = FastOutSlowInEasing
),
label = "panel-offset"
)No se exceda
La animación es potente, lo que significa que es fácil usarla en exceso. Demasiado movimiento resulta distractor, ralentiza a los usuarios e incluso puede causar molestias.
Reglas generales:
- Anime para comunicar, no para decorar.
- Mantenga las transiciones cortas y sutiles.
- Evite animar todo lo que aparece en pantalla al mismo tiempo.
- No impida nunca que el usuario actúe durante una animación.
Respete la accesibilidad
Algunos usuarios activan Quitar animaciones en la configuración del sistema debido a su sensibilidad al movimiento. Una aplicación considerada respeta esa preferencia.
Puede comprobar si las animaciones están escaladas a cero y reducir o desactivar en consecuencia el movimiento no esencial.
@Composable
fun rememberReduceMotion(): Boolean {
val context = LocalContext.current
val scale = Settings.Global.getFloat(
context.contentResolver,
Settings.Global.ANIMATOR_DURATION_SCALE,
1f
)
return scale == 0f
}La caja de herramientas de animación de Compose
Compose ofrece un conjunto de API de animación por capas. Las conocerá a lo largo de este curso:
animate*AsState: anima un único valor (color, tamaño o float).AnimatedVisibility: anima la aparición y desaparición.updateTransition: coordina varios valores a la vez.AnimatedContent: realiza una transición gradual entre distintos contenidos.Animatableyspring: proporcionan un control de bajo nivel basado en la física.
Empiece por las API de alto nivel y baje a un nivel inferior solo cuando necesite más control.
La animación sigue al estado
El modelo mental que permite entenderlo todo: en Compose, las animaciones siguen al estado. Cambia un valor y una API de animación interpola suavemente la interfaz hacia el nuevo valor en cada fotograma.
Esto significa que rara vez tendrá que escribir una línea de tiempo. Declara «esta propiedad debe ser igual a X» y Compose se encarga de los fotogramas intermedios.
@Composable
fun FadingText(highlighted: Boolean) {
val alpha by animateFloatAsState(
targetValue = if (highlighted) 1f else 0.4f,
label = "text-alpha"
)
Text(
"Status",
modifier = Modifier.graphicsLayer { this.alpha = alpha }
)
}Un breve calentamiento con Kotlin puro
Las animaciones interpolan entre valores. En esencia, solo se trata de matemáticas: una fracción t de 0 a 1 combina un valor inicial y uno final. Esta idea (la interpolación lineal, o lerp) sustenta todas las animaciones que escribirá.
Este pequeño fragmento de Kotlin puro muestra el concepto que Compose aplica muchas veces por segundo.
fun lerp(start: Float, end: Float, t: Float): Float =
start + (end - start) * t
fun main() {
for (i in 0..4) {
val t = i / 4f
println("t=$t -> ${lerp(0f, 100f, t)}")
}
}Comprobación rápida
¿Cuál es el modelo mental básico de las animaciones en Jetpack Compose?
Repaso: movimiento con significado
Ahora sabe por qué es importante la animación y cuál es el modelo que la sustenta:
- El movimiento proporciona retroalimentación, explica los cambios y mantiene la continuidad.
- Las animaciones de Compose son declarativas y siguen al estado.
- Mantenga las transiciones breves (≈150-400ms) y con un propósito; no abuse de ellas.
- Respete a los usuarios que reducen el movimiento por motivos de accesibilidad.
- Utilice primero las API de alto nivel:
animate*AsState,AnimatedVisibility, las transiciones y los resortes.
A continuación: animar valores individuales con la familia animate*AsState.
Preguntas frecuentes
¿La lección «Por qué son importantes las animaciones» es gratis?
Sí — el texto completo de «Por qué son importantes las animaciones» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Android Academy, actualiza a CoddyKit PRO. El curso de Android Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Por qué son importantes las animaciones»?
Movimiento que orienta y sorprende gratamente a los usuarios Practicas Android Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Android Academy?
No se requiere experiencia previa. Android Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Por qué son importantes las animaciones»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Android Academy?
Sí. Cada lección de Android Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Por qué son importantes las animaciones
- Conceptos básicos de animate*AsState
- AnimatedVisibility y transiciones
- Animaciones de gestos y resortes