Por que as animações são importantes
Movimento que orienta e encanta os usuários.
Por que as animações são importantes é uma aula grátis de Android Academy no CoddyKit. Esta é a aula 1 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.
Movimento com propósito
As animações são mais do que um enfeite visual. Em um ótimo aplicativo Android, o movimento guia a atenção, explica o que mudou e faz a interface parecer responsiva e viva.
Neste curso, você aprenderá as APIs de animação do Jetpack Compose, desde os auxiliares animate*AsState de uma linha até AnimatedVisibility, transições e molas baseadas em física.
Esta primeira lição trata de por que e quando animar, para que seu movimento sempre tenha uma finalidade.
O Compose anima de forma declarativa
No Compose, você não inicia e interrompe animações manualmente a cada quadro. Em vez disso, descreve um valor-alvo, e o Compose anima suavemente em direção a ele sempre que esse valor muda.
Aqui, a cor de uma caixa é controlada por um único estado booleano. Tocar nela alterna o estado, e a cor muda suavemente de forma automática.
@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 }
)
}Retorno para as ações do usuário
Uma das funções mais importantes do movimento é fornecer retorno. Quando o usuário toca em um botão ou alterna um interruptor, uma pequena animação confirma que o aplicativo recebeu a ação.
Mudanças instantâneas e bruscas parecem indicar um problema; uma transição rápida de 150 a 300 ms transmite um acabamento refinado. Aqui, um botão diminui ligeiramente enquanto é pressionado.
@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") }
}Explicando mudanças de estado
Quando a interface muda, a animação ajuda o usuário a entender o que acabou de acontecer. Um item que aparece gradualmente e desliza para dentro transmite a ideia de "novo"; um item que desaparece gradualmente transmite a ideia de "removido".
Sem movimento, o conteúdo pode aparecer ou desaparecer abruptamente, deixando os usuários confusos sobre se algo apareceu, desapareceu ou mudou de lugar.
@Composable
fun Banner(visible: Boolean) {
AnimatedVisibility(
visible = visible,
enter = fadeIn() + slideInVertically(),
exit = fadeOut() + slideOutVertically()
) {
Text("Saved successfully!")
}
}Continuidade e percepção espacial
O movimento preserva a continuidade. Quando um cartão se expande ou um elemento muda para uma nova posição, animar a mudança ajuda o usuário a se orientar no espaço.
O Compose pode animar automaticamente as mudanças de layout com Modifier.animateContentSize(), fazendo uma caixa crescer ou diminuir suavemente conforme o conteúdo muda.
@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.")
}
}
}Duração e tempo são importantes
Uma boa animação é rápida. A maioria das transições da interface deve durar aproximadamente entre 150 ms e 400 ms. Se for lenta demais, o aplicativo parecerá travado; se for rápida demais, o movimento ficará imperceptível.
O Compose permite ajustar a duração e o ritmo com tween e uma curva de easing. O easing faz o movimento parecer natural ao acelerá-lo e desacelerá-lo.
val offset by animateDpAsState(
targetValue = if (open) 0.dp else 200.dp,
animationSpec = tween(
durationMillis = 300,
easing = FastOutSlowInEasing
),
label = "panel-offset"
)Não exagere
A animação é poderosa, o que significa que é fácil usá-la em excesso. Movimento demais é distraente, torna os usuários mais lentos e pode até causar desconforto.
Regras práticas:
- Anime para comunicar, não para decorar.
- Mantenha as transições curtas e sutis.
- Evite animar tudo na tela ao mesmo tempo.
- Nunca impeça o usuário de agir durante uma animação.
Respeite a acessibilidade
Alguns usuários ativam a opção Remover animações nas configurações do sistema devido à sensibilidade ao movimento. Um aplicativo atencioso respeita essa preferência.
Você pode verificar se as animações estão configuradas para uma escala zero e reduzir ou desativar adequadamente os movimentos não essenciais.
@Composable
fun rememberReduceMotion(): Boolean {
val context = LocalContext.current
val scale = Settings.Global.getFloat(
context.contentResolver,
Settings.Global.ANIMATOR_DURATION_SCALE,
1f
)
return scale == 0f
}A caixa de ferramentas de animação do Compose
O Compose oferece um conjunto em camadas de APIs de animação. Você as conhecerá ao longo deste curso:
animate*AsState- anima um único valor (cor, tamanho, número de ponto flutuante).AnimatedVisibility- anima a aparição e o desaparecimento.updateTransition- coordena vários valores em conjunto.AnimatedContent- faz uma dissolução cruzada entre conteúdos diferentes.Animatableespring- oferecem controle de baixo nível baseado em física.
Comece pelas APIs de alto nível e desça para níveis mais baixos somente quando precisar de mais controle.
A animação acompanha o estado
O modelo mental que permite entender tudo: no Compose, as animações acompanham o estado. Você altera um valor, e uma API de animação interpola suavemente a interface em direção ao novo valor a cada quadro.
Isso significa que raramente você precisa escrever uma linha do tempo. Você declara "esta propriedade deve ser igual a X", e o Compose cuida dos quadros intermediários para você.
@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 }
)
}Um rápido aquecimento com Kotlin puro
As animações fazem interpolações entre valores. No fundo, isso é apenas matemática: uma fração t de 0 a 1 combina um valor inicial e um final. Essa ideia (interpolação linear, ou lerp) fundamenta todas as animações que você escreverá.
Este pequeno trecho de Kotlin puro mostra o conceito que o Compose aplica muitas vezes 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)}")
}
}Verificação rápida
Qual é o modelo mental central para as animações no Jetpack Compose?
Recapitulação: movimento com significado
Agora você sabe por que a animação é importante e conhece o modelo por trás dela:
- O movimento fornece retorno visual, explica mudanças e preserva a continuidade.
- As animações do Compose são declarativas e acompanham o estado.
- Mantenha as transições curtas (≈150-400 ms) e intencionais; não exagere.
- Respeite os usuários que reduzem o movimento por questões de acessibilidade.
- Prefira primeiro as APIs de alto nível:
animate*AsState,AnimatedVisibility, transições e molas.
A seguir: animar valores únicos com a família animate*AsState.
Perguntas Frequentes
A aula “Por que as animações são importantes” é grátis?
Sim — o texto completo de “Por que as animações são importantes” é 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 “Por que as animações são importantes”?
Movimento que orienta e encanta os usuários. 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 1 de 4.
Quanto tempo leva a aula “Por que as animações são importantes”?
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
- Por que as animações são importantes
- Noções básicas de animate*AsState
- AnimatedVisibility e transições
- Animações de gestos e molas