Android Academy · Aula

Noções básicas de animate*AsState

Anime valores individuais suavemente.

Noções básicas de animate*AsState é uma aula grátis de Android Academy no CoddyKit. Esta é a aula 2 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 um único valor

A maneira mais simples de animar no Compose é usar a família animate*AsState. Você fornece um valor-alvo, e ela retorna um State que anima suavemente do valor atual até o valor-alvo sempre que o alvo muda.

Há uma variante para cada tipo comum: animateFloatAsState, animateDpAsState, animateColorAsState, animateOffsetAsState e outras.

animateFloatAsState

animateFloatAsState anima um único Float. Um uso comum é controlar a opacidade (alfa). Quando visible muda, o alfa retornado desliza entre 0f e 1f.

Observe a palavra-chave by: ela permite ler o State<Float> animado diretamente como um Float simples.

@Composable
fun FadingLabel(visible: Boolean) {
    val alpha by animateFloatAsState(
        targetValue = if (visible) 1f else 0f,
        label = "alpha"
    )
    Text(
        "Hello",
        modifier = Modifier.graphicsLayer { this.alpha = alpha }
    )
}

animateDpAsState

Os tamanhos e deslocamentos da interface usam Dp; por isso, use animateDpAsState para animar preenchimento, tamanho ou posição.

Aqui, uma caixa cresce de 80dp para 160dp quando alternada. Como fornecemos o Dp animado a size(), a caixa muda de tamanho suavemente.

@Composable
fun GrowingBox(big: Boolean) {
    val size by animateDpAsState(
        targetValue = if (big) 160.dp else 80.dp,
        label = "size"
    )
    Box(
        Modifier
            .size(size)
            .background(Color.Blue)
    )
}

animateColorAsState

Para animar cores, use animateColorAsState. Ela interpola no espaço de cores para que as transições pareçam suaves e naturais, em vez de passarem por tons intermediários estranhos.

Aqui, um ponto de status anima entre vermelho e verde com base em um booleano.

@Composable
fun StatusDot(online: Boolean) {
    val color by animateColorAsState(
        targetValue = if (online) Color(0xFF4CAF50) else Color(0xFFF44336),
        label = "status-color"
    )
    Box(
        Modifier
            .size(16.dp)
            .clip(CircleShape)
            .background(color)
    )
}

Personalização com animationSpec

Por padrão, esses auxiliares usam uma mola suave. Passe um animationSpec para controlar o tempo. Use tween para definir uma duração fixa com uma curva de suavização.

Este painel desliza durante 400 ms com uma curva suave que acelera e depois desacelera.

@Composable
fun SlidingPanel(open: Boolean) {
    val offset by animateDpAsState(
        targetValue = if (open) 0.dp else 250.dp,
        animationSpec = tween(
            durationMillis = 400,
            easing = FastOutSlowInEasing
        ),
        label = "offset"
    )
    Box(Modifier.offset(x = offset)) { /* content */ }
}

Curvas de suavização

A suavização define como uma animação acelera e desacelera. O Compose oferece várias opções:

LinearEasing - velocidade constante (sensação mecânica).
FastOutSlowInEasing - o padrão do Material; início rápido e final suave.
LinearOutSlowInEasing - para elementos que entram na tela.
FastOutLinearInEasing - para elementos que saem da tela.

Escolher a suavização correta faz o movimento parecer intencional, em vez de robótico.

val progress by animateFloatAsState(
    targetValue = if (done) 1f else 0f,
    animationSpec = tween(500, easing = LinearOutSlowInEasing),
    label = "progress"
)

Especificações de mola

Em vez de uma duração fixa, você pode usar uma mola, que transmite uma sensação física e natural. Uma mola é definida por dampingRatio (o quanto oscila) e stiffness (a rapidez).

As molas são excelentes porque se adaptam suavemente mesmo quando o alvo muda no meio da animação.

val scale by animateFloatAsState(
    targetValue = if (active) 1.2f else 1f,
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioMediumBouncy,
        stiffness = Spring.StiffnessLow
    ),
    label = "scale"
)

Reagir à conclusão

Às vezes, você precisa fazer algo quando uma animação termina, como executar uma função de retorno uma vez que um valor alcança seu alvo. animate*AsState aceita um finishedListener exatamente para isso.

val alpha by animateFloatAsState(
    targetValue = if (gone) 0f else 1f,
    label = "alpha",
    finishedListener = { finalValue ->
        if (finalValue == 0f) onFullyHidden()
    }
)

Animar várias propriedades

Você pode combinar várias chamadas de animate*AsState para animar mais de uma propriedade ao mesmo tempo. Cada uma acompanha seu próprio valor e, juntas, criam um efeito mais rico.

Aqui, um chip aumenta de escala e muda de cor quando é selecionado.

@Composable
fun SelectableChip(selected: Boolean, text: String) {
    val scale by animateFloatAsState(if (selected) 1.1f else 1f, label = "s")
    val bg by animateColorAsState(
        if (selected) Color(0xFF3F51B5) else Color.LightGray,
        label = "bg"
    )
    Box(
        Modifier
            .graphicsLayer { scaleX = scale; scaleY = scale }
            .clip(RoundedCornerShape(16.dp))
            .background(bg)
            .padding(horizontal = 12.dp, vertical = 6.dp)
    ) { Text(text) }
}

Uma mola em Kotlin puro

Para desenvolver uma intuição sobre o que uma mola "faz", veja esta pequena simulação em Kotlin puro. Ela aproxima um valor do alvo a cada etapa, aplicando algum amortecimento, assim como a mola do Compose converge para o valor-alvo ao longo de vários quadros.

fun main() {
    var value = 0f
    val target = 100f
    var velocity = 0f
    val stiffness = 0.1f
    val damping = 0.6f
    repeat(6) { step ->
        val force = (target - value) * stiffness
        velocity = (velocity + force) * damping
        value += velocity
        println("step $step -> ${"%.1f".format(value)}")
    }
}

Animar Int e Offset

A família vai além de números de ponto flutuante e cores. Use animateIntAsState para valores inteiros, como a contagem-alvo de um distintivo, e animateOffsetAsState ou animateIntOffsetAsState para animar a posição 2D em uma única chamada.

Aqui, um chip desliza diagonalmente ao animar um IntOffset.

@Composable
fun SlidingChip(moved: Boolean) {
    val pos by animateIntOffsetAsState(
        targetValue = if (moved) IntOffset(120, 60) else IntOffset.Zero,
        label = "pos"
    )
    Box(
        Modifier
            .offset { pos }
            .size(40.dp)
            .background(Color.Magenta)
    )
}

Verificação rápida

Você quer animar suavemente a largura de uma caixa, medida em Dp, quando um booleano mudar. Qual API é mais adequada?

Recapitulação: animate*AsState

A família animate*AsState é a sua escolha principal para animar um único valor:

Escolha a variante tipada: animateFloatAsState, animateDpAsState, animateColorAsState etc.
Defina um targetValue; o resultado anima em direção a ele a cada mudança.
Ajuste o movimento com animationSpec, usando tween + suavização ou spring.
Combine várias APIs para animar diversas propriedades em conjunto.
Use finishedListener para reagir quando uma animação termina.

A seguir: animar a aparição e o desaparecimento de conteúdo com AnimatedVisibility e transições.

Perguntas Frequentes

A aula “Noções básicas de animate*AsState” é grátis?

Sim — o texto completo de “Noções básicas de animate*AsState” é 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 “Noções básicas de animate*AsState”?

Anime valores individuais suavemente. 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 2 de 4.

Quanto tempo leva a aula “Noções básicas de animate*AsState”?

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