Guia rápido sobre animações no Compose

O Compose tem muitos mecanismos de animação integrados, e pode ser difícil saber qual deles escolher. Veja abaixo uma lista de casos de uso comuns de animação. Para saber mais sobre o conjunto completo de diferentes opções de API disponíveis, leia a documentação completa de animações no Compose.

Animar propriedades comuns que podem ser compostas

O Compose fornece APIs convenientes que permitem resolver muitos casos de uso comuns de animação. Esta seção demonstra como animar propriedades comuns de um elemento combinável.

Animar aparecimento / desaparecimento

Figura 1. Como animar o aparecimento e desaparecimento de um item em uma coluna

Use AnimatedVisibility para ocultar ou mostrar um elemento combinável. Filhos dentro de AnimatedVisibility podem usar Modifier.animateEnterExit() para a própria transição de entrada ou saída.

var visible by remember {
    mutableStateOf(true)
}
// Animated visibility will eventually remove the item from the composition once the animation has finished.
AnimatedVisibility(visible) {
    // your composable here
    // ...
}
AnimationQuickGuide.kt

Os parâmetros de entrada e saída de AnimatedVisibility permitem configurar como um elemento combinável se comporta quando aparece e desaparece. Leia a documentação completa para mais informações.

Outra opção para animar a visibilidade de um elemento combinável é animar o Alfa ao longo do tempo usando animateFloatAsState:

var visible by remember {
    mutableStateOf(true)
}
val animatedAlpha by animateFloatAsState(
    targetValue = if (visible) 1.0f else 0f,
    label = "alpha"
)
Box(
    modifier = Modifier
        .size(200.dp)
        .graphicsLayer {
            alpha = animatedAlpha
        }
        .clip(RoundedCornerShape(8.dp))
        .background(colorGreen)
        .align(Alignment.TopCenter)
) {
}
AnimationQuickGuide.kt

No entanto, mudar a versão Alfa vem com a ressalva de que o elemento combinável permanece na composição e continua ocupando o espaço em que está disposto. Isso pode fazer com que os leitores de tela e outros mecanismos de acessibilidade ainda considerem o item na tela. Por outro lado, o método AnimatedVisibility remove o item da composição em algum momento.

Figura 2. Como animar a versão Alfa de um elemento combinável

Animar a cor do plano de fundo

Figura 3. Como animar a cor de fundo de elementos que podem ser compostos.

val animatedColor by animateColorAsState(
    if (animateBackgroundColor) colorGreen else colorBlue,
    label = "color"
)
Column(
    modifier = Modifier.drawBehind {
        drawRect(animatedColor)
    }
) {
    // your composable here
}
AnimationQuickGuide.kt

Essa opção é mais eficiente do que usar Modifier.background(). Modifier.background() é aceitável para uma configuração de cor única, mas ao animar uma cor ao longo do tempo, isso pode causar mais recomposições do que o necessário.

Para animar infinitamente a cor de fundo, consulte Como repetir uma seção de animação.

Animar o tamanho de um elemento combinável

Figura 4. Elemento combinável que é animado de forma suave entre um tamanho pequeno e um maior.

O Compose permite animar o tamanho dos elementos combináveis de algumas maneiras diferentes. Use animateContentSize() para animações entre mudanças de tamanho de elementos combináveis.

Por exemplo, se você tem uma caixa contendo texto que pode se expandir de uma para várias linhas, é possível usar Modifier.animateContentSize() para ter uma transição mais suave:

var expanded by remember { mutableStateOf(false) }
Box(
    modifier = Modifier
        .background(colorBlue)
        .animateContentSize()
        .height(if (expanded) 400.dp else 200.dp)
        .fillMaxWidth()
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null
        ) {
            expanded = !expanded
        }

) {
}
AnimationQuickGuide.kt

Observação: a ordem dos modificadores é importante aqui. Coloque-o antes de qualquer modificador de tamanho.

Você também pode usar AnimatedContent com um SizeTransform para descrever como as mudanças de tamanho precisam ocorrer.

Animar a posição do elemento combinável

Figura 5. Função combinável movida por um deslocamento.

Para animar a posição de um elemento combinável, use Modifier.offset{ } combinado com animateIntOffsetAsState().

var moved by remember { mutableStateOf(false) }
val pxToMove = with(LocalDensity.current) {
    100.dp.toPx().roundToInt()
}
val offset by animateIntOffsetAsState(
    targetValue = if (moved) {
        IntOffset(pxToMove, pxToMove)
    } else {
        IntOffset.Zero
    },
    label = "offset"
)

Box(
    modifier = Modifier
        .offset {
            offset
        }
        .background(colorBlue)
        .size(100.dp)
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null
        ) {
            moved = !moved
        }
)
AnimationQuickGuide.kt

Atenção: isso não muda onde o elemento pai percebe o elemento combinável a ser posicionado e, portanto, não afeta o posicionamento dos irmãos. Isso pode fazer com que irmãos caiam sobre ou abaixo um do outro. O deslocamento influencia apenas a posição dos layouts filhos do Modifier.offset{}.

Se você quiser garantir que os elementos combináveis não sejam desenhados sobre ou sob outros elementos combináveis ao animar a posição ou o tamanho, use Modifier.layout{ }. Esse modificador propaga mudanças de tamanho e posição para o pai, o que afeta outros filhos.

Por exemplo, se você estiver movendo uma Box dentro de uma Column e os outros filhos precisarem se mover quando a Box for movida, inclua as informações de deslocamento com Modifier.layout{ } da seguinte maneira:

var toggled by remember {
    mutableStateOf(false)
}
val interactionSource = remember {
    MutableInteractionSource()
}
Column(
    modifier = Modifier
        .padding(16.dp)
        .fillMaxSize()
        .clickable(indication = null, interactionSource = interactionSource) {
            toggled = !toggled
        }
) {
    val offsetTarget = if (toggled) {
        IntOffset(150, 150)
    } else {
        IntOffset.Zero
    }
    val offset = animateIntOffsetAsState(
        targetValue = offsetTarget, label = "offset"
    )
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(colorBlue)
    )
    Box(
        modifier = Modifier
            .layout { measurable, constraints ->
                val offsetValue = if (isLookingAhead) offsetTarget else offset.value
                val placeable = measurable.measure(constraints)
                layout(placeable.width + offsetValue.x, placeable.height + offsetValue.y) {
                    placeable.placeRelative(offsetValue)
                }
            }
            .size(100.dp)
            .background(colorGreen)
    )
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(colorBlue)
    )
}
AnimationQuickGuide.kt

Figura 6. Como animar com Modifier.layout{ }

Animar o padding de um elemento combinável

Figura 7. Função combinável com animação de padding.

Para animar o padding de um elemento combinável, use animateDpAsState combinado com Modifier.padding():

var toggled by remember {
    mutableStateOf(false)
}
val animatedPadding by animateDpAsState(
    if (toggled) {
        0.dp
    } else {
        20.dp
    },
    label = "padding"
)
Box(
    modifier = Modifier
        .aspectRatio(1f)
        .fillMaxSize()
        .padding(animatedPadding)
        .background(Color(0xff53D9A1))
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null
        ) {
            toggled = !toggled
        }
)
AnimationQuickGuide.kt

Animar a elevação de um elemento combinável

Figura 8. Animação da elevação do elemento combinável ao clicar

Para animar a elevação de um elemento combinável, use animateDpAsState combinado com Modifier.graphicsLayer{ }. Para mudanças de elevação únicas, use Modifier.shadow(). Se você estiver animando a sombra, usar o modificador Modifier.graphicsLayer{ } é a opção de melhor desempenho.

val mutableInteractionSource = remember {
    MutableInteractionSource()
}
val pressed = mutableInteractionSource.collectIsPressedAsState()
val elevation = animateDpAsState(
    targetValue = if (pressed.value) {
        32.dp
    } else {
        8.dp
    },
    label = "elevation"
)
Box(
    modifier = Modifier
        .size(100.dp)
        .align(Alignment.Center)
        .graphicsLayer {
            this.shadowElevation = elevation.value.toPx()
        }
        .clickable(interactionSource = mutableInteractionSource, indication = null) {
        }
        .background(colorGreen)
) {
}
AnimationQuickGuide.kt

Como alternativa, use o elemento combinável Card e defina a propriedade de elevação como valores diferentes por estado.

Animar escala, translação ou rotação do texto

Figura 9. Texto animado com facilidade entre dois tamanhos

Ao animar escala, translação ou rotação de texto, defina o parâmetro textMotion em TextStyle como TextMotion.Animated. Isso garante transições mais suaves entre animações de texto. Use Modifier.graphicsLayer{ } para traduzir, girar ou dimensionar o texto.

val infiniteTransition = rememberInfiniteTransition(label = "infinite transition")
val scale by infiniteTransition.animateFloat(
    initialValue = 1f,
    targetValue = 8f,
    animationSpec = infiniteRepeatable(tween(1000), RepeatMode.Reverse),
    label = "scale"
)
Box(modifier = Modifier.fillMaxSize()) {
    Text(
        text = "Hello",
        modifier = Modifier
            .graphicsLayer {
                scaleX = scale
                scaleY = scale
                transformOrigin = TransformOrigin.Center
            }
            .align(Alignment.Center),
        // Text composable does not take TextMotion as a parameter.
        // Provide it via style argument but make sure that we are copying from current theme
        style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated)
    )
}
AnimationQuickGuide.kt

Animar a cor do texto

Figura 10. Exemplo mostrando como animar a cor do texto.

Para animar a cor do texto, use o lambda color no elemento combinável BasicText:

val infiniteTransition = rememberInfiniteTransition(label = "infinite transition")
val animatedColor by infiniteTransition.animateColor(
    initialValue = Color(0xFF60DDAD),
    targetValue = Color(0xFF4285F4),
    animationSpec = infiniteRepeatable(tween(1000), RepeatMode.Reverse),
    label = "color"
)

BasicText(
    text = "Hello Compose",
    color = {
        animatedColor
    },
    // ...
)
AnimationQuickGuide.kt

Alterne entre diferentes tipos de conteúdo

Figura 11. Uso de AnimatedContent para animar mudanças entre diferentes elementos combináveis (lento)

Use AnimatedContent para animar entre diferentes elementos combináveis. Se você quiser apenas um esmaecimento padrão entre elementos combináveis, use Crossfade.

var state by remember {
    mutableStateOf(UiState.Loading)
}
AnimatedContent(
    state,
    transitionSpec = {
        fadeIn(
            animationSpec = tween(3000)
        ) togetherWith fadeOut(animationSpec = tween(3000))
    },
    modifier = Modifier.clickable(
        interactionSource = remember { MutableInteractionSource() },
        indication = null
    ) {
        state = when (state) {
            UiState.Loading -> UiState.Loaded
            UiState.Loaded -> UiState.Error
            UiState.Error -> UiState.Loading
        }
    },
    label = "Animated Content"
) { targetState ->
    when (targetState) {
        UiState.Loading -> {
            LoadingScreen()
        }
        UiState.Loaded -> {
            LoadedScreen()
        }
        UiState.Error -> {
            ErrorScreen()
        }
    }
}
AnimationQuickGuide.kt

O AnimatedContent pode ser personalizado para mostrar muitos tipos diferentes de transições de entrada e saída. Para mais informações, leia a documentação em AnimatedContent ou leia esta postagem do blog sobre AnimatedContent.

Animar durante a navegação para destinos diferentes

Figura 12. Como animar entre elementos combináveis usando Navigation-compose

Para animar as transições entre elementos combináveis usando o artefato navigation-compose, especifique enterTransition e exitTransition em um elemento combinável. Você também pode definir a animação padrão que será usada para todos os destinos no NavHost de nível superior:

val navController = rememberNavController()
NavHost(
    navController = navController, startDestination = "landing",
    enterTransition = { EnterTransition.None },
    exitTransition = { ExitTransition.None }
) {
    composable("landing") {
        ScreenLanding(
            // ...
        )
    }
    composable(
        "detail/{photoUrl}",
        arguments = listOf(navArgument("photoUrl") { type = NavType.StringType }),
        enterTransition = {
            fadeIn(
                animationSpec = tween(
                    300, easing = LinearEasing
                )
            ) + slideIntoContainer(
                animationSpec = tween(300, easing = EaseIn),
                towards = AnimatedContentTransitionScope.SlideDirection.Start
            )
        },
        exitTransition = {
            fadeOut(
                animationSpec = tween(
                    300, easing = LinearEasing
                )
            ) + slideOutOfContainer(
                animationSpec = tween(300, easing = EaseOut),
                towards = AnimatedContentTransitionScope.SlideDirection.End
            )
        }
    ) { backStackEntry ->
        ScreenDetails(
            // ...
        )
    }
}
AnimationQuickGuide.kt

Há muitos tipos diferentes de transições de entrada e saída que aplicam efeitos diferentes ao conteúdo de entrada e saída. Consulte a documentação para saber mais.

Observação: as transições de entrada e saída estão disponíveis apenas no Navigation-compose 2.7.0-alpha01.

Repetir uma animação

Figura 13. Cor de plano de fundo animada entre dois valores infinitamente

Use rememberInfiniteTransition com um infiniteRepeatable animationSpec para repetir a animação continuamente. Mude RepeatModes para especificar como ela vai ser movida para frente e para trás.

Use finiteRepeatable para repetir um determinado número de vezes.

val infiniteTransition = rememberInfiniteTransition(label = "infinite")
val color by infiniteTransition.animateColor(
    initialValue = Color.Green,
    targetValue = Color.Blue,
    animationSpec = infiniteRepeatable(
        animation = tween(1000, easing = LinearEasing),
        repeatMode = RepeatMode.Reverse
    ),
    label = "color"
)
Column(
    modifier = Modifier.drawBehind {
        drawRect(color)
    }
) {
    // your composable here
}
AnimationQuickGuide.kt

Iniciar uma animação ao iniciar um elemento combinável

O LaunchedEffect é executado quando um elemento combinável entra na composição. Ele inicia uma animação ao iniciar um elemento combinável. Use-a para direcionar a mudança do estado da animação. Usando Animatable com o método animateTo para iniciar a animação na inicialização:

val alphaAnimation = remember {
    Animatable(0f)
}
LaunchedEffect(Unit) {
    alphaAnimation.animateTo(1f)
}
Box(
    modifier = Modifier.graphicsLayer {
        alpha = alphaAnimation.value
    }
)
AnimationQuickGuide.kt

Cuidado: tenha cuidado ao usar LaunchedEffects em layouts lentos. Elas são reiniciadas quando os itens entram novamente na composição. Isso pode ocorrer, por exemplo, ao rolar a lista para fora e de volta na tela. Em vez disso, eleve o estado fora do layout lento para garantir que a animação não aconteça a cada rolagem de entrada e saída da composição.

Criar animações sequenciais

Figura 14. Diagrama indicando o progresso de uma animação sequencial, uma por uma.

Use as APIs de corrotina Animatable para executar animações sequenciais ou simultâneas. Chamar animateTo no Animatable um após o outro faz com que cada animação aguarde a conclusão das animações anteriores antes de continuar . Isso ocorre porque é uma função de suspensão.

val alphaAnimation = remember { Animatable(0f) }
val yAnimation = remember { Animatable(0f) }

LaunchedEffect("animationKey") {
    alphaAnimation.animateTo(1f)
    yAnimation.animateTo(100f)
    yAnimation.animateTo(500f, animationSpec = tween(100))
}
AnimationQuickGuide.kt

Criar animações simultâneas

Figura 15. Diagrama indicando o progresso das animações simultâneas, todas ao mesmo tempo.

Use as APIs de corrotina (Animatable#animateTo() ou animate) ou a API Transition para criar animações simultâneas. Se você usar várias funções de inicialização em um contexto de corrotina, as animações serão iniciadas ao mesmo tempo:

val alphaAnimation = remember { Animatable(0f) }
val yAnimation = remember { Animatable(0f) }

LaunchedEffect("animationKey") {
    launch {
        alphaAnimation.animateTo(1f)
    }
    launch {
        yAnimation.animateTo(100f)
    }
}
AnimationQuickGuide.kt

Você pode usar a API updateTransition para usar o mesmo estado e conduzir muitas animações de propriedade diferentes ao mesmo tempo. O exemplo abaixo anima duas propriedades controladas por uma mudança de estado, rect e borderWidth:

var currentState by remember { mutableStateOf(BoxState.Collapsed) }
val transition = updateTransition(currentState, label = "transition")

val rect by transition.animateRect(label = "rect") { state ->
    when (state) {
        BoxState.Collapsed -> Rect(0f, 0f, 100f, 100f)
        BoxState.Expanded -> Rect(100f, 100f, 300f, 300f)
    }
}
val borderWidth by transition.animateDp(label = "borderWidth") { state ->
    when (state) {
        BoxState.Collapsed -> 1.dp
        BoxState.Expanded -> 0.dp
    }
}
AnimationQuickGuide.kt

Otimizar o desempenho da animação

As animações no Compose podem causar problemas de performance. Isso se deve à natureza da animação: mover ou mudar pixels na tela rapidamente, frame a frame para criar a ilusão de movimento.

Considere as diferentes fases do Compose: composição, layout e desenho. Se a animação mudar a fase de layout, ela vai exigir que todos os elementos combináveis afetados mudem o layout e sejam redesenhados. Se a animação ocorrer na fase de exibição, por padrão, ela vai ter uma performance melhor do que se fosse executada na fase de layout, já que teria menos trabalho a fazer em geral.

Para garantir que o app faça o mínimo possível durante a animação, escolha a versão lambda de um Modifier sempre que possível. Isso pula a recomposição e executa a animação fora da fase de composição. Caso contrário, use Modifier.graphicsLayer{ }, já que esse modificador sempre é executado na fase de exibição. Para mais informações, consulte a seção sobre adiamento de leituras na documentação de desempenho.

Mudar o tempo da animação

Por padrão, o Compose usa animações de mola para a maioria delas. As molas, ou animações baseadas em física, parecem mais naturais. Eles também podem ser interrompidos, porque consideram a velocidade atual do objeto, em vez de um tempo fixo. Se você quiser substituir o padrão, todas as APIs de animação demonstradas acima poderão definir um animationSpec para personalizar a forma como uma animação é executada, seja para executar uma animação por um determinado período ou aumentar a intensidade.

Veja a seguir um resumo das diferentes opções de animationSpec:

• spring: animação baseada em física, o padrão para todas as animações. Você pode mudar a rigidez ou o dampingRatio para ter uma aparência diferente para a animação.
• tween (abreviação de between): animação baseada em duração, animada entre dois valores com uma função Easing.
• keyframes: especificação para especificar valores em determinados pontos-chave de uma animação.
• repeatable: especificação baseada em duração que é executada um determinado número de vezes, especificada por RepeatMode.
• infiniteRepeatable: especificação baseada em duração que é executada para sempre.
• snap: ajusta instantaneamente ao valor final sem nenhuma animação.

Figura 16. Nenhum conjunto de especificações vs. conjunto de especificações personalizadas do Spring

Leia a documentação completa para saber mais informações sobre animationSpecs.

Outros recursos

Para mais exemplos de animações divertidas no Compose, consulte:

• Cinco animações rápidas no Compose
• Como fazer Jellyfish se mover no Compose (link em inglês)
• Como personalizar AnimatedContent no Compose
• Como usar funções de easing no Compose