Android Academy · Aula

Animações e transições

Anime views com ViewPropertyAnimator, ObjectAnimator e AnimatorSet. Adicione transições de fragmentos, animações de elementos compartilhados e física de molas.

Aula 4 de 513 etapas

Animações e transições é uma aula grátis de Android Academy no CoddyKit. Esta é a aula 4 de 5. 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 5 aulas no total.

Por que as animações são importantes

As animações fazem os apps parecerem vivos e responsivos. Elas:

  • Fornecem retorno visual para as ações do usuário
  • Mostram como as telas se relacionam
  • Tornam as alterações de dados menos bruscas
  • Ajudam os usuários a entender o que mudou e por quê

A regra principal: as animações devem servir à interface, não distrair dela. Mantenha-as abaixo de 300 ms.

ViewPropertyAnimator — animações rápidas

É a maneira mais simples de animar uma visualização. Encadeie as chamadas e chame start():

// Fade a view out:
binding.tvMessage
    .animate()
    .alpha(0f)
    .setDuration(300)
    .withEndAction { binding.tvMessage.visibility = View.GONE }
    .start()

// Slide in from bottom:
binding.cardView.translationY = 200f
binding.cardView.alpha = 0f
binding.cardView
    .animate()
    .translationY(0f)
    .alpha(1f)
    .setDuration(250)
    .setInterpolator(DecelerateInterpolator())
    .start()

ObjectAnimator

ObjectAnimator anima qualquer propriedade de qualquer objeto pelo nome. É mais flexível que ViewPropertyAnimator:

// Rotate an image:
val rotateAnimator = ObjectAnimator.ofFloat(
    binding.ivLogo,
    "rotation",
    0f, 360f
).apply {
    duration = 600
    repeatCount = ObjectAnimator.INFINITE
    interpolator = LinearInterpolator()
    start()
}

// Stop it:
rotateAnimator.cancel()

AnimatorSet — sequencial e paralelo

AnimatorSet coordena vários animadores para serem executados juntos ou um após o outro:

val fadeIn  = ObjectAnimator.ofFloat(binding.card, "alpha", 0f, 1f).setDuration(300)
val scaleX  = ObjectAnimator.ofFloat(binding.card, "scaleX", 0.8f, 1f).setDuration(300)
val scaleY  = ObjectAnimator.ofFloat(binding.card, "scaleY", 0.8f, 1f).setDuration(300)
val slideUp = ObjectAnimator.ofFloat(binding.card, "translationY", 100f, 0f).setDuration(300)

AnimatorSet().apply {
    // Run fadeIn + scaleX + scaleY together, then slideUp
    play(fadeIn).with(scaleX).with(scaleY)
    play(slideUp).after(fadeIn)
    interpolator = DecelerateInterpolator()
    start()
}

Interpoladores

Os interpoladores controlam a velocidade de mudança de uma animação. Alguns comuns:

  • LinearInterpolator — velocidade constante
  • AccelerateInterpolator — começa devagar e acelera (saídas)
  • DecelerateInterpolator — começa rápido e desacelera (entradas)
  • AccelerateDecelerateInterpolator — devagar → rápido → devagar (padrão)
  • OvershootInterpolator — ultrapassa o alvo e volta quicando
  • BounceInterpolator — quica no final

TransitionManager — alterações de layout

Anime alterações de layout automaticamente chamando TransitionManager.beginDelayedTransition() antes de alterar a visibilidade ou as propriedades do layout:

binding.btnToggle.setOnClickListener {
    // Tell the framework to animate the next layout change
    TransitionManager.beginDelayedTransition(
        binding.root,
        ChangeBounds().apply { duration = 300 }
    )

    // Now change visibility/size — Android animates the difference automatically
    binding.expandedSection.visibility =
        if (binding.expandedSection.isVisible) View.GONE else View.VISIBLE
}

Transições de fragmentos

Adicione animações de entrada e saída às transações de fragmentos:

supportFragmentManager.beginTransaction()
    .setCustomAnimations(
        R.anim.slide_in_right,   // enterAnim
        R.anim.slide_out_left,   // exitAnim
        R.anim.slide_in_left,    // popEnterAnim
        R.anim.slide_out_right   // popExitAnim
    )
    .replace(R.id.container, DetailFragment())
    .addToBackStack(null)
    .commit()

// Or use MaterialSharedAxis for a modern, Material Motion feel:
val forward = MaterialSharedAxis(MaterialSharedAxis.X, true)
exitTransition = forward
enterTransition = MaterialSharedAxis(MaterialSharedAxis.X, true)

Transições de elementos compartilhados

Compartilhe uma visualização entre duas telas para que ela seja animada de uma posição para outra (por exemplo, uma miniatura que se expande até se tornar uma imagem completa):

// In ListFragment:
binding.ivThumbnail.transitionName = "hero_image_${item.id}"

val extras = FragmentNavigatorExtras(
    binding.ivThumbnail to "hero_image_${item.id}"
)
findNavController().navigate(R.id.action_list_to_detail, null, null, extras)

// In DetailFragment:
sharedElementEnterTransition = TransitionInflater
    .from(requireContext())
    .inflateTransition(android.R.transition.move)

// ImageView in detail layout must have the same transitionName

Animação de mola

As animações de mola parecem mais naturais que as lineares ou de desaceleração porque simulam a física de uma mola:

implementation 'androidx.dynamicanimation:dynamicanimation:1.0.0'

// Spring animation on a button press:
val spring = SpringAnimation(binding.fabAdd, DynamicAnimation.SCALE_X, 1f).apply {
    spring = SpringForce(1f).apply {
        stiffness = SpringForce.STIFFNESS_MEDIUM
        dampingRatio = SpringForce.DAMPING_RATIO_LOW_BOUNCY
    }
}

binding.fabAdd.setOnClickListener {
    binding.fabAdd.scaleX = 0.8f
    spring.start()
}

Lottie — animações complexas

Lottie reproduz animações do After Effects exportadas como JSON. É perfeito para indicadores de carregamento, integração inicial e estados vazios:

// app/build.gradle:
// implementation 'com.airbnb.android:lottie:6.4.0'

<!-- In layout XML -->
<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieView"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:lottie_rawRes="@raw/loading_animation"
    app:lottie_autoPlay="true"
    app:lottie_loop="true" />

// Control in code:
binding.lottieView.playAnimation()
binding.lottieView.pauseAnimation()

Boas práticas para animações

Diretrizes para animações suaves e acessíveis:

  • Duração de 150 a 300 ms para a maioria das animações da interface
  • Respeite sempre AnimatorUtils.areAnimatorsEnabled() ou Settings.System.ANIMATOR_DURATION_SCALE
  • Usuários com distúrbios vestibulares podem desativar animações — verifique a configuração de acessibilidade Reduce Motion
  • Não anime elementos que não precisam disso — menos é mais
  • Teste em dispositivos simples (as animações podem causar perda de quadros)

Verificação rápida

Qual interpolador é melhor para que um elemento entrando na tela pareça desacelerar e se acomodar?

Recapitulação: animações e transições

Dê vida ao seu aplicativo com animações suaves:

  • view.animate() — alpha, translação, escala e rotação rápidas
  • ObjectAnimator — qualquer propriedade, com controle detalhado
  • AnimatorSet — coordena vários animadores (com/antes de)
  • TransitionManager.beginDelayedTransition() — anima automaticamente as alterações de layout
  • Transições de elementos compartilhados — continuidade fluida entre telas
  • Lottie — animações JSON complexas do After Effects

A seguir: navegação inferior e guias para aplicativos com várias seções.

Grátis para começar

Aprenda Kotlin com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos
36
Aulas
152

Perguntas Frequentes

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

Sim — o texto completo de “Animações 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 5 aulas no total.

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

Anime views com ViewPropertyAnimator, ObjectAnimator e AnimatorSet. Adicione transições de fragmentos, animações de elementos compartilhados e física de molas. 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 4 de 5.

Quanto tempo leva a aula “Animações 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

  1. Fundamentos do Material Design
  2. Temas e estilos
  3. Views personalizadas
  4. Animações e transições
  5. Navegação inferior e abas
← Voltar para Android Academy