Animaciones y transiciones
Anime vistas con ViewPropertyAnimator, ObjectAnimator y AnimatorSet. Añada transiciones de fragmentos, animaciones de elementos compartidos y física de resortes.
Animaciones y transiciones es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 4 de 5. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Android Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Android Academy incluye 5 lecciones en total.
Por qué son importantes las animaciones
Las animaciones hacen que las aplicaciones parezcan vivas y respondan mejor. Permiten:
- Proporcionar confirmación visual de las acciones del usuario
- Mostrar cómo se relacionan entre sí las pantallas
- Hacer que los cambios de datos resulten menos bruscos
- Ayudar a los usuarios a entender qué ha cambiado y por qué
La regla principal es que las animaciones deben estar al servicio de la interfaz, no distraer de ella. Manténgalas por debajo de 300 ms.
ViewPropertyAnimator — animaciones rápidas
Es la forma más sencilla de animar una vista. Encadene las llamadas y llame a 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 cualquier propiedad de cualquier objeto mediante su nombre. Es más flexible 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 — secuencial y paralelo
AnimatorSet coordina varios animadores para que se ejecuten juntos o uno después de otro:
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
Los interpoladores controlan la velocidad de cambio de una animación. Algunos habituales son:
LinearInterpolator— velocidad constanteAccelerateInterpolator— empieza despacio y acelera (salidas)DecelerateInterpolator— empieza rápido y desacelera (entradas)AccelerateDecelerateInterpolator— despacio → rápido → despacio (predeterminado)OvershootInterpolator— sobrepasa el objetivo y rebota hacia atrásBounceInterpolator— rebota al final
TransitionManager — cambios de layout
Anime automáticamente los cambios de layout llamando a TransitionManager.beginDelayedTransition() antes de cambiar la visibilidad o las propiedades del 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
}Transiciones de Fragment
Añada animaciones de entrada y salida a las transacciones 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)Transiciones de elementos compartidos
Comparta una vista entre dos pantallas para que se anime de una posición a otra (por ejemplo, una miniatura que se expande hasta convertirse en una imagen 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 transitionNameAnimación de resorte
Las animaciones de resorte parecen más naturales que las lineales o las de desaceleración porque simulan la física de un resorte:
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 — animaciones complejas
Lottie reproduce animaciones de After Effects exportadas como JSON. Es perfecto para indicadores de carga, introducciones y estados vacíos:
// 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()Prácticas recomendadas para animaciones
Directrices para crear animaciones fluidas y accesibles:
- Use una duración de 150–300 ms para la mayoría de las animaciones de la interfaz
- Respete siempre
AnimatorUtils.areAnimatorsEnabled()oSettings.System.ANIMATOR_DURATION_SCALE - Los usuarios con trastornos vestibulares pueden desactivar las animaciones; compruebe el ajuste de accesibilidad
Reduce Motion - No anime elementos que no lo necesiten; menos es más
- Pruebe en dispositivos de gama baja (las animaciones pueden provocar pérdida de fotogramas)
Comprobación rápida
¿Qué interpolador es más adecuado para que un elemento que entra en la pantalla parezca que desacelera y se detiene suavemente?
Resumen: animaciones y transiciones
Dé vida a su aplicación con animaciones fluidas:
view.animate()— cambios rápidos de alfa, traslación, escala y rotaciónObjectAnimator— cualquier propiedad, con un control detalladoAnimatorSet— coordina varios animadores (con/con posterioridad)TransitionManager.beginDelayedTransition()— anima automáticamente los cambios de diseño- Transiciones de elementos compartidos — continuidad fluida entre pantallas
- Lottie — animaciones JSON complejas de After Effects
A continuación: navegación inferior y pestañas para aplicaciones con varias secciones.
Aprende Kotlin con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 36
- Lecciones
- 152
Preguntas frecuentes
¿La lección «Animaciones y transiciones» es gratis?
Sí — el texto completo de «Animaciones y transiciones» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Android Academy, actualiza a CoddyKit PRO. El curso de Android Academy incluye 5 lecciones en total.
¿Qué aprenderé en «Animaciones y transiciones»?
Anime vistas con ViewPropertyAnimator, ObjectAnimator y AnimatorSet. Añada transiciones de fragmentos, animaciones de elementos compartidos y física de resortes. Practicas Android Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Android Academy?
No se requiere experiencia previa. Android Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 5.
¿Cuánto tiempo toma la lección «Animaciones y transiciones»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Android Academy?
Sí. Cada lección de Android Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Fundamentos de Material Design
- Temas y estilos
- Vistas personalizadas
- Animaciones y transiciones
- Navegación inferior y pestañas