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.
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 constanteAccelerateInterpolator— 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 quicandoBounceInterpolator— 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 transitionNameAnimaçã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()ouSettings.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ápidasObjectAnimator— qualquer propriedade, com controle detalhadoAnimatorSet— 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.
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
- Fundamentos do Material Design
- Temas e estilos
- Views personalizadas
- Animações e transições
- Navegação inferior e abas