Android Academy · Lección

AnimatedVisibility y transiciones

Anime la aparición y desaparición del contenido

AnimatedVisibility y transiciones es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 3 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.

Animar la aparición

Mostrar y ocultar contenido bruscamente produce una sensación abrupta. AnimatedVisibility de Compose anima un composable cuando entra y sale del diseño.

Coloque el contenido dentro de ella y controle la visibilidad con un booleano. Cuando este cambia, Compose reproduce una animación de entrada o salida en lugar de mostrar u ocultar el contenido de golpe.

@Composable
fun Greeting(show: Boolean) {
    AnimatedVisibility(visible = show) {
        Text("Welcome aboard!")
    }
}

Transiciones de entrada y salida

Puede elegir exactamente cómo entra y sale el contenido con los parámetros enter y exit. Entre los componentes habituales se incluyen fadeIn/fadeOut, slideIn/slideOut y expandVertically/shrinkVertically.

Combínelos con el operador + para ejecutarlos a la vez.

@Composable
fun Toast(show: Boolean) {
    AnimatedVisibility(
        visible = show,
        enter = fadeIn() + slideInVertically { it },
        exit = fadeOut() + slideOutVertically { it }
    ) {
        Text("Item added to cart")
    }
}

Ajustar la especificación de la transición

Cada transición de entrada o salida acepta un animationSpec, por lo que puede controlar la duración y la aceleración igual que con animate*AsState.

Aquí, el contenido aparece gradualmente durante 300ms y desaparece más rápido, durante 150ms; es un patrón habitual que hace que los cierres resulten ágiles.

AnimatedVisibility(
    visible = show,
    enter = fadeIn(animationSpec = tween(300)),
    exit = fadeOut(animationSpec = tween(150))
) {
    Card { Text("Details") }
}

Expandir y contraer

Para las secciones que muestran más contenido, expandVertically y shrinkVertically animan la altura y apartan suavemente el contenido circundante.

Es perfecto para paneles contraíbles, preguntas frecuentes o secciones de «mostrar más».

@Composable
fun Details(expanded: Boolean) {
    AnimatedVisibility(
        visible = expanded,
        enter = expandVertically() + fadeIn(),
        exit = shrinkVertically() + fadeOut()
    ) {
        Text("Extra details revealed when expanded.")
    }
}

updateTransition: un estado, muchos valores

Cuando varias propiedades deben cambiar juntas según un estado, updateTransition las coordina. Crea un objeto Transition cuyos elementos secundarios se animan sincronizados.

Defina el estado y, después, use animateColor, animateDp, etc., para cada propiedad en función de ese estado.

enum class BoxState { Collapsed, Expanded }

@Composable
fun MorphingBox(state: BoxState) {
    val transition = updateTransition(state, label = "box")
    val size by transition.animateDp(label = "size") {
        if (it == BoxState.Expanded) 200.dp else 100.dp
    }
    val color by transition.animateColor(label = "color") {
        if (it == BoxState.Expanded) Color.Magenta else Color.Cyan
    }
    Box(Modifier.size(size).background(color))
}

Duración independiente por propiedad en una transición

Una gran ventaja de updateTransition es poder establecer la duración de cada propiedad por separado. Cada elemento secundario animate* puede proporcionar su propio transitionSpec, de modo que el color y el tamaño pueden moverse a distintas velocidades sin dejar de estar coordinados por el mismo estado.

val size by transition.animateDp(
    transitionSpec = { tween(durationMillis = 300) },
    label = "size"
) { if (it == BoxState.Expanded) 200.dp else 100.dp }

val corner by transition.animateDp(
    transitionSpec = { tween(durationMillis = 600) },
    label = "corner"
) { if (it == BoxState.Expanded) 0.dp else 24.dp }

AnimatedContent: intercambiar contenido

Cuando cambia el contenido en sí, y no solo su visibilidad, use AnimatedContent. Anima la transición entre el contenido anterior y el nuevo, con un fundido cruzado de forma predeterminada.

Es ideal para elementos como un contador, un indicador de pasos o el cambio entre los estados de carga y de contenido cargado.

@Composable
fun Counter(count: Int) {
    AnimatedContent(
        targetState = count,
        label = "counter"
    ) { value ->
        Text("$value", style = MaterialTheme.typography.headlineLarge)
    }
}

Transiciones personalizadas de AnimatedContent

Personalice cómo AnimatedContent intercambia el contenido con transitionSpec. Un efecto clásico para un contador consiste en deslizar el valor nuevo hacia arriba mientras el anterior se aleja, acompañado de un fundido.

La palabra clave using asocia un SizeTransform para que el contenedor también cambie de tamaño suavemente.

AnimatedContent(
    targetState = count,
    transitionSpec = {
        (slideInVertically { it } + fadeIn()) togetherWith
            (slideOutVertically { -it } + fadeOut())
    },
    label = "counter"
) { value -> Text("$value") }

Animar elementos de una lista

Dentro de un LazyColumn, los elementos que se añaden, eliminan o mueven pueden animarse hasta su posición mediante Modifier.animateItem() en el contenido de cada elemento.

Esto permite reordenar e insertar elementos suavemente sin llevar un registro manual.

LazyColumn {
    items(tasks, key = { it.id }) { task ->
        Text(
            task.title,
            modifier = Modifier.animateItem()
        )
    }
}

Fundido cruzado para pantallas completas

Crossfade es una función auxiliar sencilla y específica que realiza un fundido entre dos estados; resulta ideal para cambiar de pantalla completa o entre estados importantes de la interfaz.

Pase el estado actual y una lambda de contenido; cuando cambie el estado, Crossfade hace desaparecer gradualmente el anterior y muestra el nuevo.

@Composable
fun ScreenHost(screen: Screen) {
    Crossfade(targetState = screen, label = "screen") { current ->
        when (current) {
            Screen.Home -> HomeScreen()
            Screen.Profile -> ProfileScreen()
        }
    }
}

Coordinar los elementos secundarios de entrada

Dentro de un bloque AnimatedVisibility obtiene un AnimatedVisibilityScope, que expone Modifier.animateEnterExit(). Esto permite que cada elemento secundario tenga su propia animación de entrada o salida, además de la transición del elemento principal.

Por ejemplo, un panel puede deslizarse mientras su título aparece gradualmente un poco después, creando un efecto por capas.

AnimatedVisibility(visible = show, enter = slideInVertically()) {
    Column {
        Text(
            "Title",
            modifier = Modifier.animateEnterExit(
                enter = fadeIn(tween(delayMillis = 100))
            )
        )
        Text("Body")
    }
}

Comprobación rápida

Quiere animar el cambio de un número 3 a un número 4, haciendo que el nuevo valor aparezca con un fundido y un deslizamiento. ¿Qué API es la más adecuada?

Repaso: visibilidad y transiciones

Ahora puede animar la aparición, desaparición y modificación del contenido:

AnimatedVisibility anima la entrada y salida con fadeIn/Out, slideIn/Out y expand/shrink, que se pueden combinar con +.
updateTransition coordina muchos valores a partir de un estado, cada uno con su propia especificación.
AnimatedContent anima los cambios entre distintos contenidos; Crossfade es la variante sencilla de fundido.
Modifier.animateItem() anima las inserciones y reordenaciones de listas.

A continuación: gestos y animaciones de resortes basadas en la física para conseguir un movimiento natural e interactivo.

Preguntas frecuentes

¿La lección «AnimatedVisibility y transiciones» es gratis?

Sí — el texto completo de «AnimatedVisibility y transiciones» 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 «AnimatedVisibility y transiciones»?

Anime la aparición y desaparición del contenido 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 3 de 4.

¿Cuánto tiempo toma la lección «AnimatedVisibility y transiciones»?

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

← Volver a Android Academy