Android Academy · Aula

AnimatedVisibility e transições

Anime a exibição e o ocultamento de conteúdo.

AnimatedVisibility e transições é uma aula grátis de Android Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Android Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Android Academy inclui 4 aulas no total.

Animar a aparição

Mostrar e ocultar conteúdo de forma abrupta causa uma sensação desagradável. O AnimatedVisibility do Compose anima um componente ao entrar e sair do leiaute.

Envolva seu conteúdo com ele e controle a visibilidade usando um booleano. Quando esse booleano muda, o Compose executa uma animação de entrada ou saída em vez de fazer o conteúdo aparecer ou desaparecer instantaneamente.

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

Transições de entrada e saída

Você pode escolher exatamente como o conteúdo entra e sai usando os parâmetros enter e exit. Os blocos de construção comuns incluem fadeIn/fadeOut, slideIn/slideOut e expandVertically/shrinkVertically.

Combine-os com o operador + para executá-los ao mesmo tempo.

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

Ajustar a especificação da transição

Cada transição de entrada ou saída aceita um animationSpec, permitindo controlar a duração e a suavização, assim como em animate*AsState.

Aqui, o conteúdo aparece gradualmente durante 300 ms e desaparece mais rapidamente, durante 150 ms, um padrão comum que torna os fechamentos ágeis.

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

Expandir e reduzir

Em seções que revelam mais conteúdo, expandVertically e shrinkVertically animam a altura, deslocando suavemente o conteúdo ao redor.

Isso é perfeito para painéis recolhíveis, itens de FAQ ou seções de "mostrar mais".

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

updateTransition: um estado, muitos valores

Quando várias propriedades devem mudar juntas com base em um único estado, updateTransition as coordena. Ele cria um objeto Transition cujos elementos filhos são todos animados em sincronia.

Defina o estado e use animateColor, animateDp etc. para cada propriedade em função desse 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))
}

Temporização por propriedade em uma transição

Uma grande vantagem de updateTransition é permitir uma temporização diferente para cada propriedade. Cada elemento filho animate* pode fornecer sua própria transitionSpec, fazendo com que a cor e o tamanho se movam em velocidades diferentes, enquanto continuam coordenados pelo mesmo 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: trocar conteúdo

Quando o próprio conteúdo muda, e não apenas sua visibilidade, use AnimatedContent. Ele anima a transição entre o conteúdo antigo e o novo, fazendo uma dissolução cruzada por padrão.

É ideal para elementos como um contador, um indicador de etapa ou a alternância entre estados de carregamento e carregado.

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

Personalizar transições de AnimatedContent

Personalize como AnimatedContent troca o conteúdo usando transitionSpec. Um efeito clássico para um contador é deslizar o novo valor para cima enquanto o antigo sai, combinado com um desvanecimento.

A palavra-chave using associa um SizeTransform para que o contêiner também mude de tamanho suavemente.

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

Animar itens de uma lista

Dentro de uma LazyColumn, os itens adicionados, removidos ou movidos podem animar até suas posições usando Modifier.animateItem() no conteúdo de cada item.

Isso proporciona reordenação e inserção suaves sem qualquer controle manual adicional.

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

Dissolução cruzada para telas inteiras

Crossfade é um auxiliar simples e específico que faz a transição gradual entre dois estados, sendo ótimo para alternar telas inteiras ou estados principais da interface.

Passe o estado atual e uma função lambda de conteúdo; quando o estado muda, Crossfade faz o antigo desaparecer gradualmente e o novo aparecer.

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

Coordenar filhos durante a entrada

Dentro de um bloco AnimatedVisibility, você obtém um AnimatedVisibilityScope, que expõe Modifier.animateEnterExit(). Isso permite que cada filho tenha sua própria animação de entrada ou saída, além da transição do elemento pai.

Por exemplo, um painel pode deslizar para dentro enquanto o título aparece gradualmente um pouco depois, criando um efeito em camadas.

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

Verificação rápida

Você quer animar a troca do número 3 para o número 4, fazendo o novo valor aparecer gradualmente e deslizar para dentro. Qual API é mais adequada?

Recapitulação: visibilidade e transições

Agora você pode animar o conteúdo enquanto ele aparece, desaparece ou muda:

AnimatedVisibility anima a entrada e a saída com fadeIn/Out, slideIn/Out e expand/shrink, que podem ser combinados com +.
updateTransition coordena vários valores a partir de um único estado, cada um com sua própria especificação.
AnimatedContent anima trocas entre conteúdos diferentes; Crossfade é a variante simples de dissolução.
Modifier.animateItem() anima inserções e reordenações de itens de listas.

A seguir: gestos e animações de mola baseadas em física para criar movimentos naturais e interativos.

Perguntas Frequentes

A aula “AnimatedVisibility e transições” é grátis?

Sim — o texto completo de “AnimatedVisibility e transições” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Android Academy, atualize para CoddyKit PRO. O curso de Android Academy inclui 4 aulas no total.

O que vou aprender em “AnimatedVisibility e transições”?

Anime a exibição e o ocultamento de conteúdo. Você pratica Android Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Android Academy?

Nenhuma experiência prévia é necessária. Android Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “AnimatedVisibility e transições”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Android Academy?

Sim. Cada aula de Android Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Android Academy