📊 Capítulo 19: Animações Fluidas no Compose

Especialização em Mobile Nativo Android

🗺️ O Espectro de Animações Declarativas do Jetpack Compose

flowchart TD
    ANIM{"Objetivo da Animação"}
    ANIM --> |"Aparecer / Desaparecer Elemento"| VIS["AnimatedVisibility(visible = expandido)\n- Suporta slideInVertically + fadeIn"]
    ANIM --> |"Mudança de Tamanho Dinâmica"| SIZE["Modifier.animateContentSize(animationSpec = spring())\n- Anima expansão de acordeão automaticamente!"]
    ANIM --> |"Múltiplas Propriedades Coordenadas"| TRANS["updateTransition(targetState)\n- Anima rotação, cor e escala em sincronia perfeita!"]

    style ANIM fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style VIS fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style SIZE fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style TRANS fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px

🎯 Slide 1: `AnimatedVisibility` Declarativo

AnimatedVisibility(
    visible = exibirDetalhes,
    enter = fadeIn() + slideInVertically(),
    exit = fadeOut() + shrinkVertically()
) {
    DetalhesTransacaoCard()
}

🎯 Slide 2: Animações Físicas com `Spring` (Molas)

O Compose utiliza física de molas por padrão (spring(dampingRatio, stiffness)), resultando em um movimento muito mais natural e responsivo ao toque do que curvas bezier estáticas.

🎯 Slide 3: Shared Element Transitions no Compose

No Compose 1.7+, utilize o SharedTransitionLayout para fazer cards da listagem expandirem suavemente até preencherem a tela inteira com animação de elemento compartilhado cinematográfica!